ClinicOS — Omnichannel Clinic Operations & Patient Concierge

One place for a clinic to book patients and talk to them — across WhatsApp, email, and a concierge calendar.

Concierge booking · WhatsApp + email channels · admin analytics dashboard
_{Built solo, end-to-end — frontend + database + auth + channel integrations.}

---

What it is

Clinics juggle bookings across phone, WhatsApp, and email, with no single view. ClinicOS pulls that together:

• Concierge booking — a calendar-driven flow for scheduling and managing patient appointments.
• WhatsApp — connect the clinic's WhatsApp by scanning a QR code (the familiar WhatsApp Web pattern), so conversations live alongside bookings.
• Email — connect a clinic inbox via secure Gmail OAuth.
• Admin dashboard — operational overview and analytics (powered by Recharts).

---

Architecture

flowchart TD
    subgraph APP["React + Vite Frontend (shadcn/ui)"]
        IDX["Landing / Auth"]
        BOOK["Concierge Booking<br/>(calendar)"]
        INT["Integrations<br/>Connect WhatsApp · Connect Email"]
        ADMIN["Admin Dashboard<br/>+ analytics (Recharts)"]
    end

    subgraph SUPA["Supabase"]
        DB[("Postgres<br/>+ Row-Level Security")]
        AUTH["Auth (JWT)"]
        subgraph FN["Edge Functions (Deno)"]
            WA["whatsapp-qr<br/>QR pairing session"]
            EM["email-oauth<br/>Gmail OAuth handshake"]
        end
    end

    WAEXT["WhatsApp"]
    GMAIL["Gmail API"]

    IDX --> AUTH
    BOOK --> DB
    INT --> WA --> WAEXT
    INT --> EM --> GMAIL
    ADMIN --> DB
    AUTH --> DB
    WA --> DB
    EM --> DB

Loading

---

Features

Area	What it does
Concierge booking	Calendar-based appointment scheduling and management
WhatsApp connect	QR-code pairing (whatsapp-qr edge function) to link the clinic's WhatsApp
Email connect	Gmail OAuth handshake (email-oauth edge function) for a connected clinic inbox
Admin dashboard	Operational metrics and analytics with Recharts
Auth & roles	Supabase Auth with Row-Level Security across all tables

---

Stack

Frontend — React 18, Vite, TypeScript, shadcn/ui + Radix, Tailwind CSS, TanStack Query, React Router, Recharts, date-fns Backend — Supabase: Postgres with Row-Level Security, Auth, and Deno Edge Functions (WhatsApp QR pairing, Gmail OAuth) Tooling — 10 SQL migrations, ESLint, TypeScript strict

---

Project structure

clinic-os/
├── src/
│   ├── pages/            # Index, Auth, ConciergeBooking, ConnectWhatsApp,
│   │                     # ConnectEmail, Integrations, Dashboard, AdminDashboard
│   ├── components/       # UI + feature components
│   └── integrations/
│       └── supabase/     # typed client (env-configured)
└── supabase/
    ├── functions/        # whatsapp-qr, email-oauth
    └── migrations/       # 10 schema migrations

---

Running locally

Prerequisites

• Node.js 18+ and npm
• A Supabase project
• A Google Cloud OAuth client (for the Gmail integration)

Setup

npm install

# Configure environment
cp .env.example .env
# set VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID

npm run dev          # http://localhost:8080

Apply migrations and deploy the edge functions with the Supabase CLI:

supabase db push
supabase functions deploy whatsapp-qr email-oauth

---

Security

• No secrets in the repo. The Supabase client reads from environment variables; .env is git-ignored and .env.example documents what's needed.
• The browser uses only the anon/publishable key, safe in client code because every table is protected by Row-Level Security.
• OAuth and channel-pairing secrets live only server-side inside the edge functions.

---

Built by Abdullah Javaid — AI Automation Engineer & Developer
github.com/binary-exe · abdullahjavaid.me@gmail.com · jobiqueue.com