web

A CRM built for insurance sales teams.

Client

Plan With a Pro

Role

Project Team Lead & Full Stack Developer

Timeline

August 2024 - August 2025

Overview.

Plan With a Pro is a full-stack, real-time Customer Relationship Management platform purpose-built for the life insurance and final expense insurance industry. It provides agents with lead management, omni-channel communication (calls, SMS, email), marketing automation, quote generation, reporting, and a real-time dashboard — all powered by 141+ REST endpoints across 21 route files.

THE CHALLENGE

Insurance sales teams juggled multiple disconnected tools for lead tracking, calling, messaging, and reporting. Without a unified platform, agents wasted time switching between systems, leads fell through the cracks, and managers lacked real-time visibility into team performance and campaign effectiveness.

Led development of a full-stack TypeScript CRM with end-to-end type safety, integrating Twilio for omni-channel calls and SMS, SendGrid for email with webhook-based delivery tracking, Socket.IO 4.8 for real-time bidirectional events, Cloudflare R2 for file storage with signed URLs, marketing automation with multi-step nurture campaigns, an insurance quote system via Glix API, and a three-tier RBAC system — deployed with frontend on Vercel and backend on Koyeb.

THE SOLUTION

Gallery.

Full CRM walkthrough showing lead management, omni-channel communication (Twilio calls/SMS, SendGrid email), nurture campaigns, and real-time reporting dashboards.

Video

Main CRM dashboard with lead pipeline overview, agent activity, and quick-action navigation — powered by real-time Socket.IO 4.8 events.

Advanced leads table with 50+ filterable fields (timezone, state, insurance type, date range), bulk CSV import, and automatic Google/Facebook Ads capture.

Lead tracker with real-time status updates, assignment tracking, status history with timestamps, and pipeline progression across agents.

Multi-step nurture campaign editor with email, SMS, task, and call steps — supporting drip campaigns, re-engagement, and educational sequences with scheduled execution via node-cron.

Call management dashboard with Twilio-powered inbound/outbound calls, call recording, hold music, call transfer, conference calls, and prerecorded voicemail.

Twilio settings with hold music, voicemail greetings, TTS voice selection, recording configuration, and call forwarding.

Call reports with call history, talk minutes, answered vs. no-answer stats, and direction filtering — visualized with Tremor React charts.

Rich HTML email editor built with TipTap, supporting templates with dynamic field replacement, scheduled delivery, and SendGrid integration.

Email template library with per-insurance-type assignment and reusable templates for nurture campaign sequences.

SendGrid email delivery report with webhook-tracked analytics — opens, clicks, bounces, spam reports, and unsubscribes.

Announcements system with rich content (images/videos), role-targeted delivery, and default announcements for team-wide communications.

Webhook-based lead capture from Google Ads and Facebook Ads campaigns with automatic lead ingestion and source attribution.

Health questionnaire form powered by Glix API integration for insurance qualification, beneficiary data, and underwriting workflows.

Application questionnaire for beneficiary, employment, and underwriting data collection with quote result storage per lead.

TECHNOLOGY

Tech Stack.

Frontend

Next.js 14 (App Router)

React framework with SSR/SSG

TypeScript

End-to-end type safety

shadcn/ui (68+ components)

Customized UI component system

Zustand (3 stores)

Client state management + React Context for auth

TanStack React Query

Server state & caching

FullCalendar 6.1

Calendar with day/week/month views

React Hook Form + Zod

Form management & validation

TipTap (custom extensions)

Rich text editor with anchor links, buttons, video embeds

Recharts

Data visualization & charts

Twilio Client SDK

Browser-based VoIP calling (WebRTC)

Socket.IO Client

Real-time bidirectional events

Tailwind CSS

Utility-first styling with mobile-responsive design

Backend & APIs

Node.js + Express

REST API server (40+ endpoints across 15+ route groups)

MongoDB Atlas (Prisma ORM)

Cloud database with 30+ models, composite indexes, JSON fields

Socket.IO

Room-based real-time events with exponential backoff reconnection

JWT (Access + Refresh tokens) + bcrypt

Authentication with proactive token refresh

node-cron (4 schedulers)

Email/SMS sending, cleanup, database backup, Twilio cleanup

express-rate-limit

Brute-force protection on auth endpoints

Multer

File upload handling with type-specific validators

Third-Party Integrations

Twilio (Voice + SMS + Client SDK)

WebRTC calls, conference calling, call recording, voicemail (Polly.Joanna TTS), IVR/TwiML, SMS with 47+ dynamic fields

SendGrid (Email + Webhooks)

HTML email delivery, webhook tracking (delivered, opened, clicked, bounced, spam, unsubscribed), engagement metrics

Cloudflare R2

Primary file storage (images, audio, CSV) with signed URLs

Cloudinary

Image processing & CDN

MEGA.io (megajs)

Automated database backup storage with level 9 compression

Google Ads

Webhook-based lead capture from Lead Forms

Facebook Lead Ads

Webhook-based lead capture with verification endpoint

Compulife/Glix

Insurance quoting engine — health quotes, application quotes, carrier catalog

Google Tag Manager / AdSense

Analytics & monetization

Nodemailer

Fallback/internal email sending

Infrastructure

Vercel

Frontend hosting & deployment

Koyeb

Backend PaaS hosting with multi-platform Prisma targets

MongoDB Atlas

Managed database cluster

CAPABILITIES

Key Features.

Lead Management

Full CRUD with 40+ data fields (personal, contact, address, employment, financial, insurance)

CSV bulk import with field mapping and R2 storage

Automatic capture from Google Ads and Facebook Ads webhooks with ROT13-secured URLs

Advanced filtering — status, date range, DOB, contact status, time period, search text

Lead status tracking with full StatusHistory model and timestamps

Insurance info per lead (carrier, product, coverage, premium, policy details)

Self-completion data — leads fill out their own applications

Sticky notes per lead and lead source attribution

Omni-Channel Communication

Voice (91KB of call logic): Browser-based WebRTC calling, conference calls with participant management, warm/cold call transfers, custom hold music, call recording, voicemail with TTS (Polly.Joanna), IVR/TwiML routing, call forwarding, per-agent phone numbers, pre-recorded voicemail drops, audio caching

SMS: Templates with 47+ dynamic fields, timezone-aware scheduled sending via cron, live data replacement preview, character/segment counting with encoding type, cursor-aware field insertion

Email: Rich HTML editor (TipTap with custom extensions), CRM-verified sender emails per agent (OTP verification), SendGrid webhook tracking (delivered, opened, clicked, bounced, spam, unsubscribed), engagement metrics (unique opens/clicks)

Marketing Automation (Nurture Campaigns)

Drip campaigns, re-engagement campaigns, and educational sequences

Multi-step workflows with email, SMS, task, and call steps

Campaign lifecycle: Draft → Active → Paused

Lead assignment with per-lead tracking of current step and progress

Scheduled execution via node-cron background jobs

Calendar & Appointments

FullCalendar integration with day/week/month views

Appointment creation linked to leads with timezone-aware scheduling

Read/dismiss status tracking for notifications

Reporting & Analytics

Call Reports: Call history, talk minutes, answered vs. no-answer, direction filtering

Activity Reports: Lead activity stats by date/period

Sales Reports: Sales pipeline tracking by agent

Agent Summary: Per-agent performance metrics

Email Delivery Reports: Opens, clicks, bounces, spam reports, unsubscribes via SendGrid

SMS Delivery Reports: Delivery status tracking

Data visualization with Tremor React charts and graphs

Insurance Quote System (Glix Integration)

Health questionnaire links and data collection

Application questionnaires (beneficiary, employment, underwriting)

Quote result storage and retrieval per lead

Carrier and product catalog

Authentication & Security

Three-tier RBAC: AGENT < ADMIN < SUPERADMIN with requireRole(), requireExactRole(), requireAnyRole() middleware

JWT with access tokens (24h) + refresh tokens (7d) and proactive refresh (2 hours remaining)

OTP email verification (6-digit, 10-minute expiry) and forgot password (32-byte token, email reset)

express-rate-limit on login, CORS whitelist, API key validation middleware, bcrypt (10 salt rounds)

8-step cascade account deletion with real-time progress tracking and cancellation support

Ads Integration Platform

Google Ads webhook — automatic lead creation from Google Lead Forms

Facebook Lead Ads webhook — automatic lead creation with verification endpoint

ROT13 encoding for user ID security in webhook URLs

Lead magnet toggle (active/paused) per platform with field mapping

Custom field storage for unmapped ad data with documentation page

Settings & Administration

Twilio Settings: Hold music, voicemail greetings, TTS voice selection, recording config, ring timeout, call forwarding

Lead status customization (custom pipeline statuses), CRM email setup and verification

Rich Text Announcements: TipTap editor with custom extensions (anchor links, buttons, video embeds), role-targeted, clone/edit/preview modes

API Key Management: Create, view, delete keys for programmatic access and third-party lead imports

Agent phone number management with default assignment

Real-Time Architecture (Socket.IO)

Room-based isolation — each user gets private room (user-{userId})

Twilio event streaming — incoming calls, status changes, recordings, voicemail

Conference cleanup events — orphaned conference detection and cleanup

Call hold status synchronization across participants

Production-optimized — polling + WebSocket transport, 120s ping timeout, automatic reconnection with exponential backoff

File Management & Backups

Multi-provider upload — Cloudflare R2 (primary), Cloudinary (images), local fallback

Type-specific handlers: CSV (leads), images (profiles, 10MB limit), audio (voicemail, 50MB limit)

Automated MongoDB backups via cron — level 9 zip compression, cloud upload to MEGA.io, automatic local cleanup

IMPACT

Results.

010+React Components68 shadcn/ui + 61 main + layouts + pages

020+Prisma ModelsFull insurance CRM data schema with composite indexes

030+Custom HooksAuth, pagination, dialer, Twilio pricing, email delivery

040+Third-Party IntegrationsTwilio, SendGrid, Cloudflare R2, Cloudinary, MEGA.io, Google/Facebook Ads, Glix

050+Dynamic FieldsSMS/email template variables (personal, address, employment, links, dates)

060Middleware LayersJWT, RBAC, rate limiting, API key, logging, error handling

ENGINEERING

Architecture.

01Full-stack TypeScript with end-to-end type safety — 178+ React components (68 shadcn/ui + 61 main + layouts + pages)

0240+ REST endpoints across 15+ route groups with 6 middleware layers (JWT, RBAC, rate limiting, API key, logging, error handling)

0330+ Prisma models on MongoDB Atlas with composite indexes, JSON fields, and enum types

0414+ custom hooks (auth, pagination, sorting, dialer, participant management, Twilio pricing, email delivery, reminders)

05Real-time architecture via Socket.IO with room-based isolation and production-optimized transport (polling + WebSocket, 120s ping)

0691KB of Twilio call handling logic — WebRTC, conference, voicemail (TTS), IVR/TwiML, per-agent phone numbers

074 webhook handlers — Google Ads, Facebook Ads, SendGrid delivery events, Twilio call events

08Marketing automation engine with multi-step nurture campaigns and minute-by-minute cron execution

09Three-tier RBAC with requireRole(), requireExactRole(), requireAnyRole() middleware and API key validation

10Event-driven email analytics via SendGrid webhook processing (delivery, opens, clicks, bounces, spam, unsubscribes)

11Multi-provider file management — Cloudflare R2, Cloudinary, local fallback with type-specific validation

124 simultaneous cron schedulers: email/SMS sending (1min), email cleanup (6h), database backup (MEGA.io), Twilio cleanup

138-step cascade account deletion with real-time progress tracking and cancellation support

Deployment

Frontend deployed on Vercel

Backend deployed on Koyeb with multi-platform Prisma targets

Cloudflare R2 for primary file storage with signed URLs

Background jobs via node-cron for scheduled emails, SMS, and cleanup tasks

Database backup automation on server start

Previous ProjectOperations management for modern

Next ProjectAI-powered travel planning made

Get in Touch