A Branded Client Portal with Full Stripe Integration
How we built a production client portal for Blueprint Consulting — with project management, invoicing, file sharing, messaging, and Stripe payments wired end-to-end.
Stripe
Payment Integration
Real-time
Notifications
Built-in
File Sharing
Mobile-first
Responsive
The Challenge
Consulting clients needed a single place to see project status, view and pay invoices, share files, and communicate — without relying on scattered emails and manual follow-ups. Existing solutions were either too generic, too expensive, or didn't match our brand.
What We Built
- Project dashboard — status tracking per client with milestone updates
- Invoice management — create, send, and track invoices with line items
- Stripe payment integration — checkout sessions, webhooks, auto-status updates
- File sharing — upload and download project files with drag-and-drop
- Messaging — client-to-consultant communication log with timestamps
- Real-time notification badges — unread counts update live via Supabase Realtime
- Mobile responsive — full functionality on any device
The Stack
Next.js 14 App Router
Server components, API routes, and edge-ready deployment
Supabase
Database, auth, realtime subscriptions, and file storage — all in one
Stripe
Checkout sessions, webhooks, and automatic payment status sync
Resend
Transactional invoice emails with branded templates
Netlify
Zero-downtime deploys with serverless function support
TypeScript
End-to-end type safety from database to UI
Stripe Integration Deep Dive
The trickiest part was getting Stripe webhooks to correctly update invoice status in Supabase. The key: database status fields must match exact casing constraints, and the webhook handler needs both the Stripe key and Supabase service role key as environment variables.
We documented this so future builds don't hit the same wall. The webhook endpoint handles checkout.session.completed events, maps the Stripe session to the correct invoice via metadata, and updates the payment status in real time.
Key Learnings
- Supabase Realtime for live notification badges — no polling needed, just subscribe to changes
- Stripe webhook endpoint must be explicitly registered in the Stripe dashboard for each environment
- Mobile-first approach saved significant time on the responsive pass
- Serverless functions on Netlify handle webhook verification cleanly with built-in crypto support
- Row-level security in Supabase ensures clients can only see their own data — zero API-level filtering needed