A multi-tenant B2B SaaS that runs an entire web agency in production, built and deployed end-to-end on Replit: 5 user roles, 8-tab project workspace, real-time chat, multi-currency invoicing, hours packages, retainers, profit-sharing.

heyWebTeam Portal is the operational platform that powers a working web design agency in production every day. It's a multi-tenant SaaS where five distinct user roles share one database with completely different views and permissions:

Admin - full agency oversight

Account Manager - client-facing operations and onboarding

Project Manager - delivery and team coordination, with profit-sharing

Team Member - assigned tasks and hour tracking

Client - their own projects, content and invoices

Each role gets a tailored dashboard, role-aware queries and a different navigation experience. Same codebase, fully partitioned data, agency-level multi-tenancy on top.

Running a web design agency means orchestrating sales, project delivery, finance, communication and content production across dozens of moving parts. Off-the-shelf tools (Notion, Stripe, Slack, ClickUp, Hubspot) cover one slice each, but the seams between them eat hours every week, expose data inconsistencies and create onboarding friction for clients.

I wanted one platform that owned the entire workflow, from "request early access" through quote negotiation, project execution, hour-by-hour tracking, branded invoicing and final delivery, with proper multi-tenant access so partners, team members and clients all log in and see only what's theirs.

A React + Vite + TypeScript frontend, Express + Drizzle ORM + PostgreSQL backend, deployed and run on Replit in production.

Portal is developed and deployed entirely on Replit. The whole engineering surface — IDE, database, secrets, deployments, custom domain — lives in one workspace.

Replit-managed PostgreSQL for the 40+ table schema, accessed via Drizzle ORM through Replit's environment variables

Replit Secrets for every credential the app touches: database connection string, AES-256-GCM encryption keys for the encrypted login-info module, Resend API key, GIPHY API key, scrypt salt secrets

Reserved VM Deployment for production, chosen specifically because the real-time chat module uses persistent WebSocket connections that don't survive Replit Autoscale's ephemeral instances

Custom domain mapping for the agency's branded portal URL

Replit's collaborative IDE for live debugging sessions when issues surface

Early in production, the WebSocket chat layer kept dropping connections every few minutes despite working perfectly in dev. Root cause: Autoscale was recycling instances behind the load balancer, killing in-flight WebSocket connections. Migrated the deployment from Autoscale to Reserved VM and the chat layer stabilised. Lesson: stateful real-time features on Replit need Reserved VM, not Autoscale.

Project Workspace with eight dedicated tabs: Overview (with AI-generated project summary), Tasks (drag-and-drop board with labels, priorities, custom fields, attachments), Content (Tiptap rich editor with section template library), Files, Chats, Milestones, Activity log, Login Info (AES-256-GCM encrypted credentials with per-credential reveal)

Adaptive Request Wizard that morphs based on type (Task / Project / Retainer), category (Development / Design / Marketing) and whether the client has pre-paid hours

Quote Negotiation Flow with quote notes, freelancer estimates and PM profit-sharing logic

Hours Packages System for retainer clients: monthly allocations, hour entries, team assignments, dashboards on both sides

Packages Storefront: self-service catalog of fixed deliverables, hour blocks and retainers

Real-time Chat: Tiptap mini-editor, emoji picker, GIPHY integration, file attachments, WebSocket sync, per-message read receipts

Multi-currency Invoicing with auto-generation from approved quotes, customizable line items, server-side PDF rendering via PDFKit

Branded Email Notifications via Resend for invitations, requests, quotes, assignments, chat messages, invoices and status changes

Whitelabeling per client (logo, name, brand colours, custom embeds with smart icon detection)

Project Templates with prebuilt milestones, tasks and content items for repeat engagements

Session-based auth with Scrypt password hashing and Postgres-backed session store

Drizzle ORM managing 40+ tables (users, agencies, requests, quotes, projects, tasks, hour packages, invoices, payouts, activity logs and more)

WebSocket real-time messaging

AES-256-GCM encryption for stored credentials

Code-split lazy-loaded routes for fast initial loads

Server-rendered branded HTML emails

Multer-handled file uploads, per-task and per-project storage

The cover shows the journey users actually take: branded login screen, sign in with their role, drop into a dashboard scoped to what they're allowed to see and do.

One unified wizard handles every request the agency takes in. Steps adapt based on type, category and whether the client has pre-paid hours, so no one fills out fields they don't need to. Quotes come back faster because the data is right the first time.

Clients draft their own pages using Tiptap with a curated library of section templates (Hero, About, Services, CTA, Testimonials), then hand off to the team for design and build.

The result is a single platform that runs an entire agency from first inquiry to shipped site, in production every day. It's the proof point I lean on with every prospect: this is what I can build for you, end to end, on the same stack you'd ship a product on.

These are only a few screenshots from the platform. There's a lot more I haven't shown here: chat with read receipts, hour tracking, multi-currency invoicing with PDF rendering, finance dashboards, referrals, team management, and the rest of the eight-tab project workspace, all running in production. Happy to hop on a call and walk you through the rest live if you'd like to see more.

Tools tags React · Vite · TypeScript · Express · Drizzle ORM · PostgreSQL · Replit · Tailwind CSS · shadcn/ui · Tiptap · WebSocket · Resend · PDFKit · UI/UX Design · Web Development · Full-Stack Development

Industry SaaS / B2B Software