Development Guide - PreLaunch Next.js Template

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

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

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

// 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...
}

├── 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

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

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