Moment 01
A connected sales and onboarding system combining a client-facing website, operator dashboard, and n8n workflow engine for automated lead handling and booking.
Overview
Why this system had to exist
I built ClientSnap as a practical conversion system, not just a marketing site. The business needed a public-facing website for demos, a private dashboard for operators, and a workflow layer that could capture, qualify, and route leads without forcing the team to manually stitch together every conversation. The goal was to turn inbound demand into a visible pipeline with faster response times and cleaner handoffs.
Moment 02
Built the full operating stack that moves leads from first contact to qualified booking with far less manual follow-up.
Moment 03
Automated lead intake and follow-up paths, saving operators 20+ hours of manual scheduling weekly.
Stage 1 of 5
Continue
Problem
What was breaking down
Before the system was structured, lead handling lived across disconnected channels and manual follow-up habits. Messages could arrive through web, voice, or social inboxes, but operators still had to chase context, update records, and remember next actions themselves. That creates lag, missed opportunities, and poor visibility whenever the same lead touches multiple channels or needs timed re-engagement before booking.
Moment 01
Lead Handling
Manual follow-up across scattered channels
Moment 02
Operator Visibility
Partial context in separate tools
Moment 03
Booking Flow
Human-managed reminders and handoffs
Stage 2 of 5
Constraint map
Solution
The breakthrough and implementation path
I implemented a React and Vite website, a pnpm workspace dashboard with Express and React, and an n8n automation layer that handles lead intake, AI-assisted qualification, follow-up sequencing, scheduling, payments, and onboarding. The setup connects to Google Sheets for CRM logging, Vapi for voice interactions, and Calendly for booking flow support. The result is a full automation stack that keeps inbound activity visible while reducing manual coordination work for the operator.
Moment 01
The breakthrough was treating ClientSnap as three coordinated surfaces instead of one app: the website creates intent, the workflow engine moves the lead, and the dashboard gives operators control. Once those layers were tied together through shared lead records, channel-aware automations, and booking-state visibility, the system stopped behaving like scattered tools and started behaving like one sales machine.
Moment 02
React/Vite Demo Website
Moment 03
Express + React Operator Dashboard
Stage 3 of 5
Build system
Results
Before vs after, without the clutter
Outcome metrics stay visible while comparison details are compressed into large readable cards instead of long stacked panels.
Before
Lead Handling
Manual follow-up across scattered channels
After
Optimized resolution
Unified intake with automated routing and sequences
Stage 4 of 5
Measured impact
Architecture
Layered architecture with one consistent layout
Explore the operating layers and the shipped feature set in the same wider content frame used across the full case study.
Active layer
React/Vite Demo Website
Multi-channel lead intake across website, voice, WhatsApp, Instagram, and Facebook
Ship 01
Multi-channel lead intake across website, voice, WhatsApp, Instagram, and Facebook
Ship 02
Operator dashboard for leads, conversations, analytics, automations, and AI configuration
Ship 03
n8n workflow stack for qualification, follow-ups, booking, payments, and onboarding
Ship 04
Connected CRM logging through Google Sheets with booking and handoff automation
Stage 5 of 5
Architecture live