I built this to generate leads for small businesses
Fully customized lead gen platform built for Idaho-based home service providers, with a focus on scalability, SEO optimization, and dynamic content management.
This project demonstrates my ability to develop a full-stack web application from semi-scratch using modern web technologies.
Tech Stack:
- Frontend: Next.js, React, Tailwind CSS
- Backend: Supabase (PostgreSQL), Node.js
- CMS: Sanity
- Deployment: Vercel
Key Features:
- Dynamic category pages and SEO optimizations using Sanity CMS.
- Custom lead submission system with Supabase for secure data handling.
- Email notification system for admin alerts on new submissions via Nodemailer.
- Responsive UI built with Tailwind CSS for seamless user experience.
- API routes in Next.js for form handling and automated responses.
Architecture & Frontend Development:
Leveraged Next.js for its static site generation (SSG) and incremental static regeneration (ISR) capabilities, allowing the platform to dynamically generate and cache individual service and city-specific pages. Implemented dynamic routing based on cities and services, pulling data directly from Sanity CMS.
Built reusable React components for forms, service listings, and lead generation with a focus on modularity. Used Tailwind CSS for rapid styling and responsive design across devices.
Backend & CMS Integration:
Integrated Sanity CMS with a custom schema for managing categories, services, and city-specific content. The backend is powered by Supabase, handling lead submissions and data storage via a PostgreSQL database. Each submission is securely routed and stored for specific service providers, with real-time notifications sent using custom API endpoints & Nodemailer.
SEO & Performance Optimizations:
Implemented programmatic SEO strategies to add ability for dynamically generating thousands of city-service combinations if desired. Pages include unique metadata, canonical tags, and structured data for optimal search engine visibility. Optimized images using Next.js's Image component and applied lazy loading for enhanced page speed and user experience.
Challenges & Solutions:
A key challenge was scaling the site to handle hundreds of service-area combinations without affecting SEO. Leveraging Next.js's ISR helped address this while programmatically handling SEO challenges like avoiding duplicate content with canonical tags.