What we delivered

We built and shipped a robust SaaS MVP for PivotalOS. The scope: frontend, backend, infrastructure, AI, and DevOps, delivered as a bulletproof foundation for rapid growth.

Frontend UI/UX

• Lightning-Fast Navigation: Engineered a modern app shell with Next.js 15 App Router and optimized server components, enabling instant page loads and seamless navigation across 60+ protected routes.

• Responsive Multi-Tenant Design: Developed a pixel-perfect, mobile-first interface with Tailwind CSS, supporting every device from phones to large treatment center desktops, custom breakpoints ensure optimal layouts everywhere.

• Dynamic Landing Page Builder: Built a drag-and-drop visual editor with 30+ modular sections, live preview, and real-time brand color theming using advanced hex-to-RGB conversion.

• shadcn/ui Component System: Integrated 35+ reusable, accessible UI components, ensuring design consistency and ADA compliance across the entire platform.

• Advanced Form System: Delivered 22 specialized React Hook Form components with Zod validation, covering onboarding, settings, and landing page configurations, every field with real-time feedback and error handling.

• Progressive Web App: Implemented full PWA features, offline access, installable app manifest, and resilient UX for healthcare settings with unreliable connectivity.

Backend & Infrastructure

• Multi-Tenant Subdomain Architecture: Architected a scalable subdomain-routing system with Next.js middleware, supporting orgId.pivotalos.com, CNAME custom domains, and strict data isolation per tenant.

• Prisma ORM on Neon Postgres: Built a robust, type-safe database with 15+ relational models, cascade deletes, optimistic locking, and zero-downtime migrations.

• Server Actions at Scale: Implemented 40+ production-grade server actions using Next.js 15 standards, all with uniform error handling and reliability.

• Automated CI/CD Pipeline: Deployed on Vercel with automatic previews, branch-specific environments, DNS management for wildcard subdomains, and edge functions for high-speed landing page delivery.

• API-First Integrations: Developed 6 secure webhook endpoints for Google Ads, Call Tracking Metrics, and Stripe, all with authentication, rate limiting, and robust error handling.

• Type-Safe Data Fetching: Delivered 22 standardized fetcher functions for parallel server-side data loading, optimized for React Server Components.

Authentication & User Flows

• NextAuth.js v5 Security: Launched secure authentication with JWT sessions, bcrypt-hashed passwords, CSRF protection, and httpOnly cookies, auth checks handled at page/layout level for maximum control.

• Role-Based Access Control: Engineered robust RBAC for three user tiers—viewer, editor, super admin, enforcing granular permissions across UI and server logic.

• Multi-Step Onboarding Workflow: Built a guided 16-step onboarding wizard with draft-saving, progress tracking, and Google Ads account connection, optimized for fast facility setup.

User Dashboard & Features

• Comprehensive Organization Dashboard: Deployed an actionable dashboard with live metrics—campaigns, landing pages, ad spend, conversion rates, and quick actions for rapid team execution.

• Landing Page Management: Created a full CRUD interface for 50+ landing page fields, real-time Liquid template previews, and instant publish/unpublish controls.

• Google Ads Automation: Integrated full Google Ads API support, campaign templates, geo-targeting, keyword management, and daily budget controls, automated and accessible.

• Real-Time Analytics Dashboard: Built interactive analytics with Recharts, filterable by campaign and date, with export and month-over-month comparison capabilities.

• Flexible Template System: Enabled treatment centers to select page layouts, customize sections, configure call tracking, and preview brand changes live.

• Internal Task Management: Delivered super admin task assignment, priority tracking, due dates, and automated email notifications for operational efficiency.

Deep AI Integration

• Claude-Powered Content Generation: Embedded Anthropic Claude for AI-driven copywriting, auto-generates high-converting hero headlines, value props, and testimonials per facility, slashing manual effort.

• Context-Aware Marketing Copy: Built a prompt engine that analyzes organization data and outputs tailored, industry-optimized ad and landing page content for SUD centers.

Billing & Payments

• Stripe Subscription Billing: Integrated Stripe for recurring billing, multi-tier pricing, automated invoicing, and secure payment management.

• Google Billing Integration: Connected to google billing for google ads

• Usage-Based Billing: Implemented real-time API usage tracking, visual consumption indicators, upgrade prompts, and automated notifications as clients approach their limits.

DevOps, Monitoring & Reliability

• Local Environment: Built a full setup for rapid local dev, including subdomain routing, seeded databases, and automated scripts for onboarding new devs.

• End-to-End Testing with Playwright: Set up 15+ scenario E2E tests in CI/CD covering all critical user flows, with visual regression and mobile viewport coverage.

How we did it

Next.js App Router
JavaScript
TypeScript
React
Prisma
Vercel
Planetscale
Tailwind CSS
ChatGPT
Claude