queue-med/CLAUDE.md

QueueMed — Salle d'attente virtuelle pour cabinets médicaux

Architecture

• Frontend: React 19, Vite 6, Tailwind CSS 4, shadcn/ui, wouter, Framer Motion, Recharts, Socket.io-client
• Backend: Express 4, tRPC 11, Socket.io 4, Drizzle ORM
• Database: MySQL 8
• Auth: JWT + session cookie (simple email/password login, no OAuth)
• QR Code: qrcode npm package with rotating anti-cheat tokens
• Deploy: Docker + docker-compose, Nginx Proxy Manager for HTTPS

Theme — MEDICAL LIGHT

• Primary: #10b981 (emerald-500) and #06b6d4 (cyan-500)
• Background: white / #f0fdf4 (green-50) / #ecfeff (cyan-50)
• Cards: white with subtle shadow, glass-morphism (backdrop-blur, bg-white/70)
• Accents: #0d9488 (teal-600) for CTAs, #f97316 (orange-500) for alerts
• Feel: clean, hygienic, medical — light green/cyan, translucent panels, rounded corners
• Font: Inter (Google Fonts)

Database Schema (see docs_ref/schema.ts)

5 tables: users, subscriptions, clinics, queueEntries, analyticsEvents

Key Routes

Route	Page	Access
/	Landing page (hero, features, pricing, testimonials)	Public
/login	Login page	Public
/dashboard	Doctor dashboard (KPIs, clinic list, quick actions)	Auth
/dashboard/clinics	Manage clinics (CRUD, QR code, settings)	Auth
/dashboard/queue/:clinicId	Real-time queue management	Auth
/dashboard/analytics	Charts, CSV export, AI recommendations	Auth
/dashboard/subscription	Subscription plans, trial, blocking	Auth
/display/:clinicId	Display screen for tablet/monitor	Public
/queue/:token	Patient interface (live position, alerts)	Public
/ticket/:entryId	Printable ticket	Public

Project Structure

/home/ubuntu/queue-med-deploy/
├── client/
│   ├── src/
│   │   ├── main.tsx          # React entry + wouter router
│   │   ├── App.tsx            # Layout shell
│   │   ├── lib/
│   │   │   └── trpc.ts       # tRPC client setup
│   │   ├── components/
│   │   │   └── ui/           # shadcn/ui components
│   │   ├── _core/
│   │   │   └── hooks/
│   │   │       └── useAuth.ts
│   │   └── pages/
│   │       ├── Home.tsx       # Landing
│   │       ├── Login.tsx
│   │       ├── Dashboard.tsx
│   │       ├── DoctorClinics.tsx
│   │       ├── QueueManagement.tsx
│   │       ├── Analytics.tsx
│   │       ├── PatientQueue.tsx
│   │       ├── DisplayScreen.tsx
│   │       ├── SubscriptionPage.tsx
│   │       ├── PrintTicket.tsx
│   │       ├── Onboarding.tsx
│   │       ├── Help.tsx
│   │       └── QrPoster.tsx
│   └── index.html
├── server/
│   ├── _core/
│   │   ├── index.ts           # Express + Socket.io server
│   │   ├── trpc.ts            # tRPC setup
│   │   └── context.ts         # Auth context
│   ├── routers.ts             # All tRPC procedures
│   ├── db.ts                  # Drizzle helpers
│   ├── schema.ts              # Drizzle schema
│   └── auth.ts                # JWT auth logic
├── shared/
│   └── types.ts               # Shared types
├── drizzle.config.ts
├── vite.config.ts
├── tsconfig.json
├── package.json
├── Dockerfile
├── docker-compose.yml
└── .dockerignore

Environment Variables

• DATABASE_URL — MySQL connection string
• JWT_SECRET — Secret for JWT signing
• PORT — Server port (default 5000)
• NODE_ENV — production/development

Socket.io Rooms

• clinic:{clinicId} — Doctor + display screen
• patient:{patientToken} — Individual patient
• display:{clinicId} — Display screen only

Commands

• pnpm dev — Start dev server
• pnpm build — Production build
• pnpm db:push — Push Drizzle migrations
• pnpm start — Start production server

CRITICAL NOTES

• Use existing pages in src_ref/ as reference for UI patterns and tRPC calls
• The QR token rotation system is anti-cheat: tokens expire on schedule
• Subscription middleware blocks sensitive procedures when expired
• Socket.io is initialized in server/_core/index.ts and exposed globally