🎯 Community Event Template

A professional, production-ready event website template built with React + TypeScript + Tailwind CSS

Created by Sunnat629 Labs | Empowering tech communities worldwide 🚀

---

🌟 Introducing Community Event Template

A complete, ready-to-use template for creating beautiful websites for tech community events of any size. Perfect for meetups, conferences, workshops, and hackathons. Designed to be easily customizable with a focus on developer experience and modern design.

🎉 Why Use This Template?

• Complete Solution: Everything you need for an event website in one place
• No Design Skills Required: Professional design out of the box
• Customizable: Easy to adapt to your community brand
• Fast Setup: Be live in minutes, not days
• SEO Optimized: Built with search engines in mind
• Open Source: Free to use and modify

---

📸 Screenshots

Desktop View

Desktop View - Pro Mode with full navigation

Mobile View

Responsive Mobile Experience

Feature Showcase

Speaker Showcase with Carousel

Interactive Agenda Timeline

Sponsors Section with Tiered Display

Dark Mode Support

---

✨ Features

🎨 Beautiful & Modern Design

• ✅ Stunning gradient hero sections with animated backgrounds
• ✅ Glassmorphism effects and smooth animations
• ✅ Auto-rotating carousels for speakers and sponsors
• ✅ Professional cards with hover effects
• ✅ Fully responsive (mobile-first design)

📋 Complete Event Sections

• Hero - Eye-catching landing with CTA buttons
• About - Event overview with highlights
• Speakers - Featured speakers with auto-rotating carousel
• Agenda - Multi-day, multi-track schedule
• Sponsors - Tiered sponsor display (Platinum, Gold, Silver)
• Venue - Google Maps integration
• Team - Organizing team showcase
• Footer - Complete with attribution

🚀 Two Modes for Any Event Size

🎈 Lite Mode - Perfect for small events

• Single-page scrolling experience
• 5-10 speakers, single day
• Fast setup and deployment
• 50-200 attendees

🚀 Pro Mode - Built for conferences

• Dedicated pages for speakers, agenda, sponsors
• Individual detail pages
• Multi-day, multi-track support
• 200+ attendees

⚡ Developer Experience

• Vite 7 - Lightning-fast builds (< 2 seconds)
• TypeScript - Full type safety
• Code splitting - Optimized bundle size
• SEO ready - Sitemap, robots.txt, meta tags
• Production safe - No mock data in template

---

🚀 Quick Start

Prerequisites

• Node.js 18+ (install with nvm)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/sunnat629/community-event-template.git
cd community-event-template

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 to see your site! 🎉

Build for Production

npm run build
# Output in 'dist' folder

---

🎨 Demo & Mode Switching

🎯 Interactive Mode Toggle (Available in Production!)

We've made the mode toggle button available in production so you can easily explore both Lite and Pro modes!

Look for the floating button in the bottom-right corner of the screen:

• In Development: Shows "DEV" badge
• In Production: Shows "DEMO" badge

Using the Mode Toggle:

1. Click the Mode Toggle button in the bottom-right corner
2. Switch between:
   • 🎈 Lite Mode - Single-page layout for small events
   • 🚀 Pro Mode - Multi-page layout for conferences
3. Configure Pro Mode (when in Pro mode):
   • Set event days (1, 2, or 3 days)
   • Set parallel tracks (1, 2, or 3 tracks)
   • Toggle Android theme
4. Changes apply instantly - Page reloads to show new configuration

Production Demo Routes

You can also use direct URLs to test modes:

Test Pro Mode (Multi-page):

https://your-domain.com/demo/pro

Enables Pro mode and redirects to home page with navigation

Test Lite Mode (Single-page):

https://your-domain.com/demo/lite

Enables Lite mode and redirects to single-page layout

---

📝 Content Management

All content is managed through simple TypeScript files in src/content/:

1️⃣ Site Configuration (siteConfig.ts)

export const siteConfig = {
    eventTitle: "Your Event 2026",
    eventYear: 2026,
    city: "Your City",
    country: "Your Country",
    // ... more settings
};

2️⃣ Speakers (speakers.ts)

export const featuredSpeakers: Speaker[] = [
    {
        name: "Speaker Name",
        title: "Job Title",
        company: "Company",
        topic: "Talk Title",
        image: "https://your-cdn.com/photo.jpg",
        bio: "Biography...",
        social: {
            twitter: "...",
            linkedin: "...",
            email: "..."
        },
        featured: true
    }
];

3️⃣ Sponsors (partners.ts)

export const partners: Partner[] = [
    {
        name: "Company Name",
        slug: generateSlug("Company Name"),
        role: "Gold Sponsor",
        tier: "gold", // platinum, gold, silver, bronze
        shortDescription: "Short description",
        description: "Full description",
        logo: "https://your-cdn.com/logo.png",
        icon: Building2,
        website: "https://company.com"
    }
];

4️⃣ Agenda (agenda.ts)

export const agendaItems: AgendaItem[] = [
    {
        time: "10:00 AM",
        endTime: "11:00 AM",
        title: "Session Title",
        description: "Description",
        speaker: "Speaker Name",
        icon: Code,
        type: "session", // keynote, session, workshop, panel, break
        track: "technical", // all, technical, workshop
        duration: "60 min",
        location: "Main Hall",
        day: 1
    }
];

5️⃣ Team (team.ts)

export const teamMembers: TeamMember[] = [
    {
        name: "Team Member",
        role: "Lead Organizer",
        title: "Event Director",
        image: "https://your-cdn.com/photo.jpg",
        bio: "Biography...",
        social: { /* ... */ },
        tier: "organizer" // organizer, committee, volunteer
    }
];

6️⃣ Venue (eventDetails.ts)

export const eventDetails = {
    venue: {
        city: "Your City, Country",
        location: "Venue Name",
        address: "Full Address",
        capacity: "500 people",
        // ... more details
    }
};

---

🎨 Customization

Change Theme Colors

Edit src/index.css:

:root {
    --primary: 159 59% 46%; /* Mint Green (HSL) */
    --secondary: 207 90% 81%; /* Sky Blue */
    --accent: 320 85% 55%; /* Your accent color */
}

You can use any HSL color values to completely change the look and feel of the site.

Enable/Disable Sections

Toggle sections in src/config/layout.config.ts:

{
    id: "speakers",
    order: 4,
    theme: "light",
    enabled: true // Set to false to hide
}

Switch Modes (Lite/Pro)

Edit src/config/site.config.ts:

eventMode: {
    mode: 'pro', // 'lite' or 'pro'
    // ... settings
}

Or use the interactive mode toggle button in the bottom-right corner!

---

📊 Performance & SEO

Build Performance

✓ Built in 2.39s
✓ Bundle: 427 kB (gzipped: 112 kB)
✓ Zero errors

SEO Features

• ✅ sitemap.xml - All pages indexed
• ✅ robots.txt - Search engine optimized
• ✅ JSON-LD structured data - Rich snippets
• ✅ Meta tags - Complete OG and Twitter cards
• ✅ Mobile-friendly - Responsive design

---

🌍 Perfect For

• 🌐 Web Development Communities - Meetups, conferences, hackathons
• 📱 Mobile Dev Communities - Android, iOS, cross-platform events
• 🤖 AI/ML Communities - AI conferences, hackathons
• 🎮 Game Dev Communities - Game jams, showcases
• 🧪 DevOps & QA Communities - Testing conferences, CI/CD workshops
• 🔐 Cybersecurity Communities - Security conferences, CTF events
• 👥 Any Technology Community - Highly adaptable for all tech groups!

---

📦 Hosting & Deployment

Flexibility by Design

This template generates standard static files that can be hosted anywhere - giving you complete freedom and control over your deployment strategy:

• ✅ No vendor lock-in
• ✅ No external dependencies
• ✅ No proprietary platforms required
• ✅ Full control over your infrastructure

Deployment Options

Any Static Hosting

# Build the project
npm run build

# The 'dist' folder contains all static files
# Upload these files to any web server or static hosting service:
# - AWS S3 + CloudFront
# - DigitalOcean App Platform
# - Firebase Hosting
# - Cloudflare Pages
# - Any standard web hosting

GitHub Pages

# Build the project
npm run build

# Deploy 'dist' folder to gh-pages branch
npm run deploy  # If you've set up gh-pages deployment

Self-Hosted Options

# For Apache/Nginx servers
npm run build
# Copy contents of 'dist' to your web server's public directory

Local Preview

# For local preview with production build
npm run build
npm run preview  # Serves the built files locally

SPA Routing Configuration

This template uses client-side routing. For proper SPA behavior with direct URL access, we've included ready-to-use configuration files:

• Apache: Copy .htaccess.example to .htaccess in your production build
• Nginx: Use nginx.conf.example as a template for your server configuration

These files include:

• SPA routing (redirecting 404s to index.html)
• Proper MIME types
• Performance optimizations (compression, caching)
• Security headers

Basic configuration snippets:

Apache (.htaccess)

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

---

🔒 Security & Privacy

✅ No Third-Party Tracking

This template is privacy-first with:

• ❌ No Google Analytics by default
• ❌ No tracking pixels
• ❌ No hidden data collection
• ✅ Optional analytics (you control what to add)
• ✅ All dependencies are open-source and trusted

🛡️ Safe for Open Source

• All API keys use environment variables (.env)
• .env files are gitignored by default
• No hardcoded secrets in the codebase
• Example configuration provided in .env.example

🔑 Environment Variables

If you need third-party services, add them via .env:

# Copy the example file
cp .env.example .env

# Add your keys (these stay private)
VITE_GOOGLE_MAPS_API_KEY=your_key_here
VITE_GA_ID=your_analytics_id

Never commit .env files to version control!

---

🤝 Contributing

We welcome contributions from the community! Whether it's fixing bugs, adding features, improving documentation, or sharing ideas, your help is appreciated.

📚 Important Documentation for Contributors

Before contributing, please review these key documents:

• CONTRIBUTING.md - Contribution guidelines and development setup
• Future Development Plan - Roadmap for new features and themes
• Theme System Architecture - Technical details about the theme system

🎨 Looking to Contribute a Theme?

We're actively seeking contributors to help create themes for different tech platforms! Check out our Future Development Plan to see which themes are needed:

High Priority:

• iOS Theme
• AI/ML Theme
• QA/Testing Theme
• Cloud/DevOps Theme

See the Theme Contribution Guide for detailed instructions.

Ways to Contribute

• Star the Repository ⭐ - Show your support
• Fork and Create a Pull Request - Add new features or fix bugs
• Report Issues - Help us identify bugs and areas for improvement
• Suggest Features - Share your ideas for making the template better
• Share the Template - Help other tech communities discover this resource

Please see CONTRIBUTING.md for detailed guidelines.

Join Our Community

We welcome contributions from developers of all experience levels. See our CONTRIBUTING.md guide to get started.

---

🗺️ Roadmap

Want to see what's coming next? Check out our Future Development Plan to learn about:

• 🎨 Planned themes (iOS, AI/ML, QA, Cloud, Unity)
• 🔧 Upcoming features (Theme Builder, i18n, Analytics)
• 🏗️ Architecture improvements (React Context theme system)
• 📅 Timeline and milestones

Current Focus: React Context-based theme system for runtime theme switching

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Attribution

Created and maintained by Sunnat629 Labs.

If you use this template:

• ✅ Keep the footer attribution intact
• ✅ Star this repository ⭐
• ✅ Share your event website with us!

---

💖 Support

• ⭐ Star this repo if you find it helpful
• 🐛 Report bugs via Issues
• 💡 Suggest features via Discussions
• 🐦 Share on social media
• ☕ Buy me a coffee - buymeacoffee.com/sunnat629

---

📧 Contact

Sunnat629 Labs

• 🌐 GitHub: @sunnat629
• 🐦 Twitter: @sunnat629
• 📼 LinkedIn: in/sunnat629
• 📧 Email: me@sunnat629.dev

---

Made with ❤️ by Sunnat629 Labs for tech communities worldwide

Report Bug · Request Feature · Star ⭐