Waiting List

A modern, real-time waitlist landing page template for MVP validation. Built with Next.js and Supabase.

Features

• Landing Page - Clean, modern design with product name, slogan, and features showcase
• One-Click Join - Users can join the waitlist with a single click after signing in
• Real-time Updates - Live counter showing the number of people on the waitlist (powered by Supabase Realtime)
• Queue Position - Users can see their position in the waitlist
• Public Stats Page - /admin page showing waitlist statistics (total, today, this week, this month)
• Privacy Protection - Email addresses are partially masked in the public stats page
• Dark Mode - Built-in theme switcher for light/dark mode
• Responsive Design - Works on desktop, tablet, and mobile devices

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Backend: Supabase (PostgreSQL + Auth + Realtime)
• Styling: Tailwind CSS
• UI Components: shadcn/ui + Radix UI
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+
• A Supabase project (create one here)

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd waiting-list

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
   NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-supabase-anon-key

   You can find these values in your Supabase project settings.

4. Set up the database

   Go to your Supabase Dashboard → SQL Editor, then copy and paste the contents of supabase/init.sql and run it.

   This will create:

   • waitlist_entries table
   • Row Level Security (RLS) policies
   • Database functions for the waitlist logic
   • Supabase Realtime configuration

5. Run the development server

   npm run dev

6. Open http://localhost:3000 in your browser

Project Structure

├── app/
│   ├── page.tsx              # Landing page
│   ├── admin/page.tsx        # Public stats page
│   └── auth/                 # Authentication pages
├── components/
│   ├── hero.tsx              # Hero section
│   ├── features.tsx          # Features showcase
│   ├── join-waitlist-button.tsx  # Join button with state handling
│   ├── waitlist-stats.tsx    # Real-time counter
│   └── ui/                   # shadcn/ui components
├── lib/
│   ├── supabase/             # Supabase client configuration
│   └── types/database.ts     # TypeScript types
└── openspec/                 # OpenSpec documentation

Database Schema

The project uses a single table waitlist_entries:

Column	Type	Description
id	UUID	Primary key
user_id	UUID	Reference to auth.users
queue_position	INTEGER	Position in the waitlist
joined_at	TIMESTAMPTZ	When the user joined

Customization

Update Product Name & Slogan

Edit components/hero.tsx to change the product name and slogan.

Update Features

Edit components/features.tsx to customize the feature cards.

Styling

The project uses Tailwind CSS with CSS variables for theming. Edit app/globals.css to customize colors.

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the project in Vercel
3. Add your environment variables
4. Deploy

Other Platforms

The project can be deployed to any platform that supports Next.js (Netlify, Railway, etc.).

License

MIT