ServicePro Lead Engine

Project summary

ServicePro Lead Engine is a deployed full-stack web application that handles the full lead lifecycle for a service business: a public marketing site and contact form, a Supabase database for storing leads, and a password-protected admin dashboard where leads can be searched, updated, annotated, and exported to CSV.

What was broken

Service businesses often capture leads through generic contact forms that drop messages into a personal inbox. Without a structured place to store, track, and follow up on those leads, inquiries get missed, response times suffer, and there is no visibility into which leads are open, contacted, or won.

What I built

I built an end-to-end system around a typed Next.js App Router stack: a public contact form validated with Zod, a Supabase Postgres table for leads, transactional email via Resend, and a protected admin dashboard for managing the pipeline. The admin view supports search, filter, status updates, internal notes, and CSV export for hand-off to external tools.

What shipped

• Public contact form with Zod validation and honeypot spam guard
• Supabase Postgres table for leads with row-level security
• Transactional email notifications via Resend on new submissions
• Password-protected admin dashboard for the lead pipeline
• Search, filter, status workflow, and per-lead notes
• CSV export endpoint for downstream tools
• Responsive UI tested on mobile and desktop

How it's built

• Next.js App Router with TypeScript end-to-end and server components for the admin views.
• Public form posts to a typed API route that runs Zod validation and a honeypot check before writing.
• Supabase Postgres stores leads; row-level security keeps reads scoped to the admin role.
• Resend sends transactional emails to the team when a new lead is captured.
• Admin dashboard is gated by a server-side auth check before any lead data is fetched.
• Deployed on Vercel with environment variables for Supabase keys and Resend credentials.

Why it matters

• Replaces an ad-hoc inbox-based workflow with a structured database the team can actually search.
• Cuts the chance of lost leads by capturing every submission in a single place with a clear status.
• Gives the owner a simple admin view to see what is open and what has been followed up on.
• Enables hand-off to other tools through CSV export, without locking the data into one platform.

Takeaways from the build

• Designing a Supabase schema with RLS up-front is faster than retrofitting auth later.
• Treating the admin dashboard as its own protected app — not a public route — kept the surface area small.
• Server-side validation with Zod combined with a honeypot field handled most spam without a third-party service.
• Keeping the contact form and admin dashboard in one Next.js project simplified deploy, env vars, and TypeScript types.