Development 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:
   Copy

   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();
}