Lead Capture App

A lead capture form built with Next.js and Supabase. Submitted leads are stored in a Supabase database and viewable at /leads.

Prerequisites

Before you start, make sure you have the following installed:

• Node.js (version 18 or above)
• npm (comes with Node.js)

1. Clone the repository

git clone <your-repo-url>
cd demo_web

2. Install dependencies

npm install

3. Set up environment variables

Create a file called .env.local in the root of the project and add the following:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key
SUPABASE_SECRET_KEY=your_supabase_secret_key

Where to find these values:

• Go to your Supabase dashboard
• Open your project → Connect → you will find the URL and keys there
• NEXT_PUBLIC_SUPABASE_URL — your project URL
• NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY — the publishable (public) key
• SUPABASE_SECRET_KEY — the secret key (under Secret keys)

Note: Never commit .env.local to Git. It is already excluded in .gitignore.

4. Run the development server

npm run dev

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

• / — the lead capture form
• /leads — view all submitted leads

How it works

1. User fills in the form and clicks Submit
2. The form sends a POST request to /api/leads
3. The server validates the data and inserts it into Supabase
4. After saving, the server sends the lead data to a webhook endpoint
5. The user sees a success message