Case Study

COOARD Salon & Barber Booking Platform Case Study

Full stack developer case study: Next.js website development plus Capacitor mobile application development for a multi-tenant salon platform with Stripe, Supabase RLS, and AI catalog automation.

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 full stack developer delivery: website development on Next.js 16 plus mobile application development via Capacitor for iOS and Android—built by AlrightTech as a multi-tenant salon app building platform with Stripe, Supabase RLS, and AI-assisted catalog automation. It combines App Router server rendering, strict middleware gating, RLS-first Postgres policies, Stripe webhooks with idempotency, and omnichannel notifications while preserving tenant isolation 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.

Full-stack delivery context

Delivered by AlrightTech as website development and mobile phone app development over 6+ years of production SaaS work. A full stack engineer team owned Next.js web surfaces, Capacitor iOS/Android builds, Stripe billing, and UI UX developer-grade booking flows—positioning COOARD as app building software for salon operators, not a one-off web dev project.

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
  • Website development
  • Mobile app development

Industry

Salon & booking SaaS

Stack

Next.js, Supabase, Stripe, App Router, Capacitor, Full stack developer

Outcomes

Multi-tenant RBAC, Subscriptions + top-ups, Agentic workflows, Website development, Mobile app development

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

AI software engineer case study: full stack developer website development for Medicaid voice/SMS intake—Next.js, Vapi, Twilio, OpenAI agents, and Supabase CRM.

View case study

Twinsting Case Study: Role-Aware Marketplace Architecture

Full stack engineer case study: Next.js 15 website development and Express API for a multi-role marketplace—web dev, app developers delivery, Stripe Connect, and realtime chat.

View case study

CPMS — Comprehensive Procurement Management System

Full stack engineer case study: enterprise website development on Next.js 15 with Prisma, Auth.js RBAC, backend developer workflows, and UI UX developer procurement surfaces.

View case study

Tuttle Case Study: AI Localization Platform Architecture

AI software engineer case study: full stack developer website development for AI video dubbing SaaS—React, Next.js, HeyGen, DeepL, Stripe, and metered AI localization.

View case study