> ## Documentation Index > Fetch the complete documentation index at: https://docs.prelaunch.online/llms.txt > Use this file to discover all available pages before exploring further. # Development Guide - PreLaunch Next.js Template > Complete development documentation for PreLaunch Next.js landing page template. Learn about Supabase setup, authentication, payment integration, and deployment. **Prerequisite**: Please install Node.js (version 16 or higher) and npm, yarn, or pnpm. For basic setup steps, refer to the [Quick Start](/docs/quickstart) 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](https://supabase.com/) 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://.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key ``` ### Core Database Tables PreLaunch requires the following core tables: #### Waitlist Table ```sql theme={null} 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 ```sql theme={null} 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 ```sql theme={null} 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: ```typescript theme={null} // 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... } // ... } ``` ```typescript theme={null} // 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](/features/payments) 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 Try clearing the `.next` folder and restarting the development server: ```bash theme={null} rm -rf .next npm run dev ``` Check that your Supabase URL and key are correct. Make sure your IP address is not blocked by Supabase and that the database tables are correctly created. If authentication is not working, check the NextAuth.js configuration and ensure all necessary environment variables are set correctly. ## Common Development Tasks ### Adding a New Page Add a new directory and page component in the `app` directory: ```tsx theme={null} // app/new-page/page.tsx export default function NewPage() { return (

New Page

This is the content of a new page

); } ``` ### 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 ```typescript theme={null} // 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(); } ```