A modern lead tracking and CRM dashboard built with Next.js 14 and Supabase.

• 🎨 Modern dark mode UI
• 📝 Lead capture form with validation
• 🔒 Secure server-side API routes
• ⚡ Real-time database sync with Supabase
• 📱 Fully responsive design

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Supabase - PostgreSQL database and backend

npm install

1. Create a free account at supabase.com
2. Create a new project
3. Go to SQL Editor and run the contents of setup.sql:

-- Create the leads table
CREATE TABLE IF NOT EXISTS leads (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL UNIQUE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add indexes
CREATE INDEX IF NOT EXISTS idx_leads_email ON leads(email);
CREATE INDEX IF NOT EXISTS idx_leads_created_at ON leads(created_at DESC);

-- Disable RLS (we use API routes for security)
ALTER TABLE leads DISABLE ROW LEVEL SECURITY;

4. Get your credentials from Settings > API:
   • Project URL
   • anon public key

Copy .env.example to .env.local:

cp .env.example .env.local

Update .env.local with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

npm run dev

Open http://localhost:3000 to see your dashboard.

├── app/
│   ├── api/leads/route.ts    # API endpoint for lead submissions
│   ├── layout.tsx             # Root layout
│   ├── page.tsx               # Main dashboard page
│   └── globals.css            # Global styles
├── components/
│   └── FeedbackForm.tsx       # Lead capture form
├── lib/
│   └── supabase.ts            # Supabase client config
└── setup.sql                  # Database setup script

This app uses a server-side API route approach for security:

User → FeedbackForm → /api/leads → Supabase → Database

Benefits:

• ✅ No database credentials exposed to browser
• ✅ Server-side validation
• ✅ Easy to extend (rate limiting, emails, etc.)
• ✅ No RLS complexity

Go to your Supabase project → Table Editor → leads table to see all submissions.

Or run this SQL query:

SELECT * FROM leads ORDER BY created_at DESC;

1. Push your code to GitHub
2. Import to Vercel
3. Add environment variables in Vercel settings
4. Deploy!

1. Push to GitHub/GitLab/Bitbucket
2. Connect to AWS Amplify
3. Add environment variables
4. Amplify uses amplify.yml automatically

npm run dev      # Start development server
npm run build    # Build for production
npm start        # Start production server
npm run lint     # Run ESLint

MIT