AgencyFlow — Agency Management OS

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Inspiration

Business: I have watched creative and marketing agencies drown in a sea of disconnected tools — one app for CRM, another for content calendars, a third for invoicing, a fourth for team chat, and spreadsheets holding everything together with duct tape. A mid-size agency I know lost a $50K client because a deliverable approval slipped through the cracks between Slack, email, and a shared Google Drive folder. That was the breaking point. The idea was simple but ambitious: build a single, unified operating system for agencies where client management, content planning, team collaboration, finance, and client portals all live in one place and actually talk to each other.

Tech: Every existing "agency tool" is either a narrow point solution (a content scheduler that doesn't know your client names) or an over-engineered enterprise ERP. We wanted to prove that a modern web stack — React, TypeScript, and a managed PostgreSQL backend — could deliver enterprise-grade workflow orchestration without the enterprise complexity. The challenge was not building features, but building connections.

---

What it does

Business: AgencyFlow replaces the agency's entire tool stack. It handles:

• Client Management — Full CRM with leads, proposals, contracts, invoices, and a white-label client portal where clients view deliverables, approve content, and communicate directly with the team.
• Content Calendar — Plan and schedule campaigns across all clients and platforms (Instagram, LinkedIn, Google Ads, email) in a single unified calendar.
• Team Collaboration — Real-time messaging channels, Kanban task boards, time tracking, workload analytics, and capacity planning so you know who's available and who's overloaded before you promise a deadline.
• Finance Analytics — Live revenue and expense tracking, service-catalog-linked invoice line items, monthly P&L dashboards, and agency balance summaries.
• Deliverables & Approvals — Centralised digital asset library, version-controlled deliverables with client approval workflows, and content revision tracking with threaded comments.

Tech: The platform is built on a role-aware architecture where an agency owner, team member, and client see three completely different views of the same underlying data. Every module is connected through foreign-key relationships — a content calendar event links to a client record, which links to the assigned employee's capacity, which feeds into the workload analytics, which rolls up into the finance dashboard. All secured by Supabase Row Level Security policies at the database level.

---

How we built it

Business: We started with the agency workflow, not the feature list. We mapped the full lifecycle of a client engagement — from first lead touch to final invoice — and built each module to serve that journey. Content calendar events generate deliverables. Deliverable approvals trigger time logging. Time entries update workload analytics. Workload informs capacity planning. Capacity planning prevents over-promising. Every piece serves a real business process.

Tech:

Layer	Technology	Why
Frontend	React 18 + TypeScript + Vite	Type-safe, fast, modular
UI	Tailwind CSS + shadcn/ui	Rapid, accessible, consistent
State	React Query + Zustand	Server state cached, client state minimal
Backend	Supabase (PostgreSQL)	Managed DB, real-time, RLS, no backend server needed
Auth	Supabase Auth	Email/password + role-based access control
Security	Row Level Security (RLS) policies	Every query inherently scoped to the user's role and agency
Real-time	Supabase subscriptions	Live updates across messaging, task boards, and approvals

Key architectural decisions:

• Atomic design for component modularity — pages compose from organisms, organisms from molecules, molecules from atoms.
• RLS policies at the database level so queries are secure by default, not by frontend trust.
• Service catalog → invoice line items linkage so billing is always tied to actual deliverables with no manual reconciliation.
• Content revision tracking with threaded comments so client feedback loops are auditable and versioned.

---

Challenges we ran into

Business: The "everything connected" problem. When a client approves a deliverable, it needs to update the project status, notify the team channel, log time against the employee's capacity, and eventually show up on the invoice. Designing this event chain without circular dependencies was harder than building any single feature. We also had to model a realistic agency financial story — revenue growth, rising ad spend, contractor costs — so the demo data told a coherent 5-month narrative, not just random numbers.

Tech:

• Enum schema drift — We hit "enum value does not exist" errors repeatedly because the database constraints evolved faster than our seed scripts. Fixing it meant carefully aligning every enum field (deliverable statuses, transaction categories, employment types, content types) across schema, code, and 300+ rows of seed data.
• Real-time subscription scope — Making sure a team message only appears in the right channel for the right agency members, while a client message only appears in their portal, required precise RLS policy design.
• Capacity planning accuracy — Calculating real-time utilisation rates from task estimates, actual hours logged, and weekly capacity meant reconciling three different time dimensions. A single query bug showed a team member at 96% utilisation one day and 30% the next.
• File organisation at scale — Building a foldered digital asset library with MD5 hashing for deduplication tracking meant designing a schema that could handle hundreds of assets across multiple clients without performance degradation.

---

Accomplishments that we're proud of

Business: We built a platform that genuinely feels like it could run a real agency tomorrow. The demo data tells a story — PixelCraft Agency managing three active clients, six employees, forty content calendar events, thirteen deliverables in various approval stages, forty-five financial transactions, and fifty-six analytics data points. When you log in as the agency owner, you don't see a demo. You see a business.

Tech:

• Role-based UX — Three completely different interfaces (admin, team member, client) rendered from the same data layer.
• Interconnected data model — Every table links to every relevant other table. No orphaned records. No manual reconciliation.
• Real-time everything — Team channels, task boards, and content approvals update live without page refreshes.
• Full seed dataset — 300+ rows of coherent, realistic demo data that validates the platform actually works end-to-end.
• Production-quality code — TypeScript throughout, lint-passing, atomic component design, and RLS-secured at the database layer.

---

What we learned

Business: Real workflow beats feature lists. Agencies don't need more tools — they need connected tools. A content calendar is useless if it doesn't link to the client record, the assigned team member's workload, and the final invoice. Every feature must serve a real workflow, not check a box. We also learned that demo data is a product feature. An empty dashboard looks like a prototype. A dashboard with a coherent story looks like a real operating system.

Tech:

• Context-aware interfaces remove massive UX friction. Building three distinct experiences from the same data layer taught us the power of letting each user only see what matters to them.
• Seed data as architecture validation — Writing 300+ rows of interconnected SQL forced us to discover schema gaps and constraint misalignments that unit tests would have missed.
• Supabase RLS is powerful but unforgiving — One misconfigured policy can expose an entire agency's data. Getting it right required treating security as a first-class design concern, not an afterthought.
• React Query + Zustand is the right split — Server state belongs in React Query (cached, synced, invalidated). Client state belongs in Zustand (minimal, local, fast). Mixing them causes bugs.

---

What's next for AgencyFlow — Agency Management OS

Business:

• Stripe Connect integration — Client payments directly through the platform with automated reconciliation against invoice line items.
• White-label client portal — Let agencies brand the client-facing portal with their own colours, logos, and domain.
• AI-powered content suggestions — Generate social media captions, email sequences, and ad copy based on each client's brand voice and past performance.
• Agency benchmarking — Compare your revenue per client, utilisation rate, and profit margins against anonymised industry benchmarks.

Tech:

• LLM integration — Connect to a large language model via Supabase Edge Functions for on-demand content generation and client communication drafting.
• Mobile app — React Native companion for field teams and on-the-go client approvals.
• Advanced analytics engine — Pre-aggregated materialised views for financial dashboards to handle agency-scale data without slow queries.
• Webhook & API — Let agencies connect AgencyFlow to their existing tools (QuickBooks, HubSpot, Asana) without replacing them entirely.

Built With

• auth
• date-fns
• edge-functions)
• lucide-react
• react
• react-hook-form
• react-query
• react-router
• realtime
• recharts
• row-level-security-(rls)
• shadcn/ui
• supabase-(postgresql
• tailwind-css
• typescript
• vite
• zustand