📌 Project Overview
The Event / Conference template is a complete event marketing and operations platform built for conference organizers, workshop hosts, and event management teams who need a polished public-facing site paired with powerful backend tooling. From the Framer Motion countdown timer on the hero to Stripe-powered multi-tier ticket sales and QR code-based check-in validation, this template handles every touchpoint of the attendee experience — and every operational need of the organizer.
Whether it's a single-day workshop, a multi-track conference, or an annual industry summit, this template scales to fit the event format with a flexible schedule grid, speaker profiles, and a real-time attendee management dashboard.
🧩 Core Features
1. Framer Motion Countdown Timer
A live countdown timer on the home hero section creates anticipation and urgency for prospective attendees — automatically calculating days, hours, minutes, and seconds remaining until the event.
2. Multi-Tier Stripe Ticket Sales
The Tickets page supports multiple pricing tiers (Early Bird, Regular, VIP) mapped to Stripe Price IDs. On successful payment, a registration is saved to Supabase and a QR code ticket is generated and emailed via Resend.
3. QR Code Ticket Generation & Validation
Each attendee receives a unique QR code on their confirmation email. The Organizer Dashboard includes a QR scanner input that calls /api/checkin to validate tickets, mark attendees as checked in, and prevent duplicate entry.
4. Day-by-Day Schedule Grid
The Schedule page presents sessions in a day-by-day timeline grid with track columns and speaker avatar thumbnails. Mobile-responsive and accessible, it helps attendees plan their conference day at a glance.
5. Speaker Profiles
A Speakers page with grid cards links to individual speaker pages [slug] featuring full bios, session descriptions, social links, and talk topics — driving engagement and speaker discoverability.
6. Organizer Dashboard with Stats
The protected Organizer Dashboard shows a full attendee list with check-in status, a QR code validator for on-site check-in, and a revenue and registration summary — everything the event team needs on event day.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Fast static event pages |
| Styling | Tailwind CSS | Schedule grid & speaker card layouts |
| Animations | Framer Motion | Countdown timer & reveal animations |
| QR Codes | qrcode.react | Attendee ticket QR generation |
| Maps | @react-google-maps/api | Venue location embed |
| Forms | React Hook Form + Zod | Registration & contact forms |
| Payments | Stripe API | Multi-tier ticket sales & refunds |
| Database | Supabase (PostgreSQL) | Events, sessions, speakers, registrations |
| Auth | Supabase Auth | Organizer dashboard login |
| Resend | Ticket confirmation & reminder emails | |
| Check-In | Next.js API Route /api/checkin | QR validation & check-in status |
| Hosting | Vercel | Hosting & deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Countdown timer hero, event highlights, speakers teaser, tickets CTA |
| Schedule | Day-by-day timeline grid with tracks and speaker avatars |
| Speakers | Grid cards with individual speaker profile pages |
| Venue | Location details, Google Maps embed, and travel info |
| Register / Tickets | Multi-tier Stripe checkout with QR code generation on success |
| FAQ | Radix UI accordion with event questions and policies |
| Organizer Dashboard | Attendee list, QR check-in scanner, registration stats, revenue summary |
🔒 Key Technical Highlights
- QR code generation and /api/checkin validation with duplicate prevention
- Stripe webhook handler for payment confirmation and ticket activation
- Radix UI FAQ accordion with accessible expand/collapse behavior
- Revenue and registration summary dashboard for event day operations
- Supabase schema: events, sessions, speakers, registrations, tickets, check_ins