Kidrove Workshop

Kidrove Workshop is a responsive React landing page for the AI & Robotics Summer Workshop with a validated registration form and a Supabase-backed enquiry flow.

What’s Included

• Hero section with workshop title, description, and enroll CTA
• Workshop details cards
• Learning outcomes section
• FAQ accordion
• Registration form with validation and loading state
• Express POST /api/enquiry endpoint
• Supabase storage for workshop enquiries
• Mobile-first, Vercel-ready setup

Tech Stack

• React + Vite
• Framer Motion
• React Hook Form + Zod
• Express.js
• Supabase
• Tailwind CSS

Project Structure

• src/pages/WorkshopLanding.jsx - the workshop landing page
• api/enquiry.js - serverless API entry point
• api/enquiry-service.js - shared enquiry logic and Supabase insert
• api/enquiry-core.js - validation and response helpers
• supabase/workshop_enquiries.sql - table + RLS migration
• VERCEL_DEPLOYMENT.md - copy-paste deployment guide
• PRD.md - project requirements doc

Local Setup

1. Install dependencies:

npm install

2. Create .env.local in the project root:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_URL=your_supabase_project_url
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

3. Run the app:

npm run dev

Open:

http://127.0.0.1:4173/

4. Optional backend-only run:

npm run serve:enquiry

Supabase Setup

Run the SQL in supabase/workshop_enquiries.sql inside the Supabase SQL Editor if the table is not already present.

This creates:

• workshop_enquiries
• row level security
• RLS policies for service_role and authenticated read access

Verification

npm run lint
npm run build

The form submits to POST /api/enquiry and stores the enquiry in Supabase.

Security Notes

• SUPABASE_SERVICE_ROLE_KEY stays in .env.local only.
• Do not commit secrets to GitHub.
• Rotate the service role key if it was ever shared externally.

Submission Note

I built a responsive workshop landing page with clear hierarchy, child-friendly visuals, and a complete enquiry flow. The page includes workshop details, learning outcomes, FAQs, and a validated registration form. The backend uses an Express endpoint that saves enquiries into Supabase with RLS enabled. If I had more time, I would add email confirmations, an admin dashboard, and automated follow-up workflows.