Prerequisite: Please install Node.js (version 16 or higher) and npm, yarn, or pnpm. For basic setup steps, refer to the Quick Start guide.

​
Technology Stack

PreLaunch is built with the following core technologies:

  • Frontend Framework: Next.js 14 (App Router)
  • UI Frameworks: Tailwind CSS, DaisyUI, Radix UI
  • State Management: React Hooks
  • Form Handling: React Hook Form + Zod
  • Database: Supabase (PostgreSQL)
  • Authentication: NextAuth.js
  • Payment Processing: Paddle

​
Supabase Database Configuration

PreLaunch uses Supabase as the primary database for storing users, products, and subscription data.

​
Setting Up Supabase

  1. Create a Supabase account
  2. Create a new project
  3. Note down the URL and anonymous key, add them to your .env.local file: 
    NEXT_PUBLIC_SUPABASE_URL=https://<your-project-id>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

​
Core Database Tables

PreLaunch requires the following core tables:

​
Waitlist Table

create table
  public.waitlist (
    id uuid not null default uuid_generate_v4(),
    email text not null,
    name text null,
    created_at timestamp with time zone not null default now(),
    source text null,
    constraint waitlist_pkey primary key (id),
    constraint waitlist_email_key unique (email)
  );

​
Paddle Customers Table

create table
  public.customers (
    customer_id text not null,
    email text not null,
    created_at timestamp with time zone not null default now(),
    updated_at timestamp with time zone not null default now(),
    constraint customers_pkey primary key (customer_id)
  );

​
Subscriptions Table

create table
  public.subscriptions (
    subscription_id text not null,
    subscription_status text not null,
    price_id text null,
    product_id text null,
    scheduled_change text null,
    customer_id text not null,
    created_at timestamp with time zone not null default now(),
    updated_at timestamp with time zone not null default now(),
    constraint subscriptions_pkey primary key (subscription_id),
    constraint public_subscriptions_customer_id_fkey foreign key (customer_id) references customers (customer_id)
  );

​
Using Supabase Client

PreLaunch includes preconfigured clients for interacting with Supabase:

// In client-side components
import { createBrowserClient } from '@/libs/supabase';

export default function Component() {
  const supabase = createBrowserClient();
  
  async function fetchData() {
    const { data, error } = await supabase
      .from('waitlist')
      .select('*');
    
    // Process data...
  }
  
  // ...
}

// In server components
import { createClient } from '@/libs/supabase';

export default async function ServerComponent() {
  const supabase = await createClient();
  
  const { data, error } = await supabase
    .from('waitlist')
    .select('*');
  
  // Process data...
}

​
Authentication Configuration

PreLaunch uses NextAuth.js for user authentication. The configuration is in the libs/next-auth.ts file.

Multiple authentication methods are supported:

  • Email/password authentication
  • Google OAuth
  • GitHub OAuth

​
Payment Integration Details

​
Paddle Integration

For Paddle integration, PreLaunch includes:

  • Webhook handling in the /api/webhooks/paddle endpoint
  • Client-side checkout components in components/checkout
  • Server-side API helpers in libs/paddle

For more about Paddle configuration, see the Payment Integration guide.

​
Typeform Integration

PreLaunch integrates Typeform for user voting and suggestion collection:

  • The embedded forms are available through @typeform/embed-react
  • The forms are integrated in components/landing/suggestion-form.tsx and components/landing/vote-form.tsx

​
Advanced Project Structure

├── app/                  # Next.js App Router pages
│   ├── api/              # API routes
│   │   └── webhooks/     # Webhook handlers for Paddle, etc.
│   ├── blog/             # Blog pages and content
│   ├── dashboard/        # User dashboard
│   └── ...               # Other pages
├── components/           # React components
│   ├── analytics/        # Analytics-related components
│   ├── landing/          # Landing page components
│   ├── ui/               # UI component library
│   ├── checkout/         # Checkout components
│   ├── emails/           # Email template components
│   └── ...               # Other components
├── libs/                 # Utility libraries
│   ├── paddle/           # Paddle payment integration
│   ├── supabase/         # Supabase client and functionalities
│   └── ...               # Other function libraries
├── hooks/                # Custom React hooks
└── types/                # TypeScript type definitions

​
Troubleshooting

​
Common Development Tasks

​
Adding a New Page

Add a new directory and page component in the app directory:

// app/new-page/page.tsx
export default function NewPage() {
  return (
    <div>
      <h1>New Page</h1>
      <p>This is the content of a new page</p>
    </div>
  );
}

​
Working with the Database

For adding a new table to Supabase, you’ll need to:

  1. Create the table in the Supabase dashboard or using SQL
  2. Define TypeScript types in the types directory
  3. Create helper functions in libs/supabase for common operations
// Example of a database helper in libs/supabase/helpers.ts
export async function addToWaitlist(email: string, name?: string) {
  const supabase = await createClient();
  
  return await supabase
    .from('waitlist')
    .insert([{ email, name }])
    .select();
}