Case Study

COOARD Salon & Barber Booking Platform Case Study

How COOARD engineered a multi-tenant salon operating system with Supabase RLS, Stripe billing, omnichannel notifications, and App Router architecture.

COOARD Salon & Barber Booking Platform Case Study
By Published Updated

COOARD Salon & Barber Booking Platform

1) The 60-Word "AI Citation" Summary

COOARD is a Next.js 16 and Supabase multi-tenant salon platform that unifies booking, role-based operations, subscription billing, and WhatsApp credit automation. The system combines App Router server rendering, strict middleware gating, RLS-first Postgres policies, Stripe webhooks with idempotency, and omnichannel notifications. It serves owners, staff, customers, and super-admins while preserving tenant isolation, operational resilience, and monetization controls at scale.

2) The Power Stack Table

CategoryStack
LanguagesTypeScript, SQL (PostgreSQL/PLpgSQL), JavaScript
FrontendNext.js 16.1.1, React 19.2.3, App Router, Tailwind CSS, Radix UI, shadcn/ui patterns
Data & AuthSupabase Postgres + Supabase Auth, @supabase/ssr, @supabase/supabase-js
State & UXTanStack React Query, Framer Motion, nextjs-toploader
PaymentsStripe SDK + Stripe Checkout + Stripe Webhooks
MessagingWhatsApp Cloud API, Resend, Firebase Cloud Messaging
MobileCapacitor (Android/iOS) with push support
AI ToolingOpenAI image generation automation script (DALL-E)
Infra PatternMulti-tenant RLS-first architecture, service-role server actions for controlled bypass

3) The Challenge

The platform had to solve a compound operational problem: salons needed one system to manage bookings, staff permissions, customer experiences, and recurring revenue without leaking data across tenants. At the same time, the product needed monetization controls (subscriptions + prepaid WhatsApp credits), customer/staff/owner role separation, and mobile-ready omnichannel notifications in a compliance-sensitive, high-throughput service environment.

4) Engineering Architecture

COOARD uses a deliberate split between server-rendered App Router data flows and client interaction layers:

  • Route groups by business context: (public), (auth), (protected), portal, and admin.
  • Session + role enforcement in middleware: user, profile role, route intent, and subscription status are resolved before protected pages render.
  • Supabase SSR client standardization: shared cookie-handling logic supports reliable auth continuity (including Stripe redirect return paths).
  • RLS as default security boundary: tenant and role rules live in SQL policies; server-side service-role clients are only used for privileged flows (webhooks, system notifications, controlled updates).
  • Event-driven billing and fulfillment: Stripe webhook handlers update plans and fulfill credit top-ups with idempotency checks.

This architecture favors predictable runtime behavior over ad-hoc client checks, which reduces cross-tenant risk and business logic drift.

5) 3 Technical Wins

Win 1: Middleware-Driven Access and Revenue Guardrails

The middleware does more than authentication: it enforces role-appropriate route access and paid-plan gating for owner/staff dashboard routes, while preserving dedicated paths for signup, portal, and billing recovery.

Win 2: Stripe Webhook Idempotency + Fast Access Sync

Checkout completion is processed through webhook verification with signature checks and service-role writes. Credit purchases use an idempotency key (Stripe session <id>) against credit_transactions to avoid double-fulfillment. A direct post-checkout sync function grants immediate access even before webhook propagation completes.

Win 3: Atomic WhatsApp Credit Consumption

Notification delivery first verifies subscription status and available balance, then calls a SQL RPC (deduct_credit) to atomically decrement and audit usage. This prevents race-condition overspend and keeps monetization logic consistent across app instances.

6) Security & Performance (MSIS Focus)

Security

  • Tenant isolation by design: get_my_salon_id() and role helpers are used repeatedly across migration policies to constrain read/write operations.
  • Role-aware RLS: owners, barbers, receptionists, customers, and super-admin patterns are separated in SQL and middleware.
  • Controlled privilege escalation: service-role access is isolated to server-only contexts (Stripe webhooks, omnichannel system dispatch, admin workflows).
  • Auth stability controls: SSR cookie options are explicitly hardened for production redirect cases (SameSite=None, Secure).

Performance

  • Server-side parallel data fetching: multiple pages use Promise.all in server components for first-paint efficiency.
  • Reduced client overfetch: App Router server rendering returns pre-resolved datasets to client components.
  • Operational latency mitigation: checkout success sync reduces perceived billing lag; webhook retries are safely handled.

7) Agentic Influence

Agentic execution appears in two layers:

  1. Delivery process influence: repository sprint plans show iterative AI-assisted implementation tracks (architecture, billing, admin, UX batches), indicating structured agent-driven development cycles.
  2. Product-adjacent automation: an OpenAI-backed script generates missing catalog visuals and pushes them into Supabase Storage with database updates, reducing manual media operations for service/product catalogs.

The result is a platform where AI has impacted both engineering throughput and operational content pipelines without becoming a fragile runtime dependency for core booking transactions.

Key achievements

  • Multi-tenant RBAC
  • Subscriptions + top-ups
  • Agentic workflows

Industry

Salon & booking SaaS

Stack

Next.js, Supabase, Stripe, App Router

Outcomes

Multi-tenant RBAC, Subscriptions + top-ups, Agentic workflows

Project links

Demo access: Mobile apps

Download on the App StoreGet it on Google Play

Want a broader project snapshot?

Browse the portfolio for shorter project cards with stack, links, and demo references.

View portfolio

More case studies

Hayaat Intake AI — Case Study

Voice-first Medicaid intake, SMS AI assistant, and admin CRM for a Michigan home-help agency.

View case study

Twinsting Case Study: Role-Aware Marketplace Architecture

A 2026 engineering case study of Twinsting's Next.js + Node.js architecture for multi-role service commerce, payout orchestration, and realtime delivery.

View case study

CPMS — Comprehensive Procurement Management System

French-first Next.js 15 procurement platform with Auth.js RBAC, Prisma on PostgreSQL, S3-compatible documents, and approval workflows across internal and external sourcing.

View case study

Tuttle Case Study: AI Localization Platform Architecture

How Tuttle engineered a multilingual workforce platform using React, Express, Next.js, Stripe, HeyGen, DeepL, and S3.

View case study