Dossier

A white-label client portal that lets service businesses manage projects, deliverables, invoices, and communication - all in one branded hub powered by AI.

Comment

Inspiration

Freelancers and small agencies juggle too many tools — Notion for projects, Stripe for invoices, email for client updates, Dropbox for deliverables. Clients get lost in the chaos, constantly asking "what's the status?" We wanted one branded portal where service businesses manage everything and clients self-serve — no more back-and-forth.

What it does

Dossier is a white-label client portal for service businesses. Agencies, freelancers, and consultants get a branded hub where they manage projects (Kanban + timeline views), track milestones and deliverables with file uploads, send invoices with Stripe payments, communicate via real-time project chat, and invite clients to a dedicated portal. AI-powered project summaries let providers generate polished client updates in one click. Role-based access ensures clients only see what they should.

How we built it

  • Next.js 15 with App Router and React Server Components for a fast, SEO-friendly frontend
  • Prisma ORM with Amazon RDS PostgreSQL — 15 models covering orgs, projects, invoices, messages, and more
  • NextAuth v5 with password, OTP (email verification), and Google OAuth
  • Stripe for subscription billing (Pro/Agency/Enterprise tiers) and invoice payments
  • Anthropic Claude for AI-generated project summaries and client updates
  • Amazon S3 with presigned URLs for secure file uploads/downloads
  • Resend for transactional emails (OTP codes, client invitations)
  • shadcn/ui + Tailwind CSS + Framer Motion for a polished, responsive UI
  • Deployed on Vercel with edge middleware for auth and role-based routing

Challenges we ran into

  • Designing a permission system that cleanly separates provider (owner/admin/member) and client views without duplicating routes — solved with middleware-level role routing and a shared action layer with permission guards.
  • Configuring Amazon RDS PostgreSQL for serverless access from Vercel's edge functions — connection pooling and SSL configuration required careful tuning to avoid exhausting connections under cold starts.
  • Balancing multi-tenancy (organization-scoped data) with the simplicity needed for a hackathon — we used org-level isolation throughout the data layer without going full row-level security.

Accomplishments that we're proud of

  • 47 routes with a fully functional app end-to-end — auth, dashboard KPIs, project management, invoicing, file uploads, AI summaries, client portal, team management, and billing all working in production.
  • The client portal experience: clients log in and immediately see their projects, deliverables, invoices, and messages — zero learning curve.
  • AI project update generation that pulls real milestone/deliverable data and produces professional client-facing summaries.
  • Clean architecture: server actions for mutations, API routes for webhooks, services layer for external integrations, validators for input sanitization.

What we learned

  • React Server Components + Server Actions dramatically reduce client bundle size and simplify data fetching compared to traditional API-first approaches.
  • Amazon RDS PostgreSQL's connection pooling configuration is essential for serverless deployments — direct connections get exhausted fast on Vercel.
  • Building a genuinely useful multi-role app (provider vs. client) requires thinking about permissions from day one, not bolting them on later.
  • shadcn/ui components saved massive time on UI while still allowing full customization.

What's next for Dossier

  • Real-time notifications via WebSockets (project updates, new messages, invoice paid)
  • Custom domains so agencies can serve the portal on portal.theiragency.com
  • Template library for common project types (web redesign, brand identity, marketing campaign)
  • Client-side approvals — clients can approve/reject deliverables directly in the portal
  • Zapier/webhook integrations to connect with existing CRM and PM tools
  • Mobile app (React Native) for on-the-go project updates

Built With

Share this project:

Updates