Project essence: a web application where doctors can maintain interactive dental charts for patients (cats and dogs)
The interface design and all jaw elements are already fully prepared in Figma (vector SVG with separation by individual teeth)
Required functionality:
Authorization and user cabinet: Registration of doctors, saving profiles and the history of cards created by them
Interactive dental chart (main module): Rendering of SVG jaw, clickability of each tooth, selection of pathologies from the menu, dynamic color change of the tooth on the diagram, and generation of a text report
Data export: Generation of a filled chart and report in PDF for printing or sending to the client
Monetization and billing:
Marketing: a promo code system for discounts on payment and a simple referral program (bonuses for invited colleagues)
In Figma, there is a "reference" of what needs to be created approximately, I will explain all the details in messages
General architecture
Stack: React 18 + TypeScript + Vite 6, Tailwind CSS v4, Supabase (PostgreSQL + Edge Functions), Hono (Deno server), Radix UI / ShadCN components.
Pattern: Centralized state in useAppInitialization → prop drilling through App.tsx → AppContent (router) → pages/components.
Navigation: Hash-based routing (section state machine, without react-router for main sections).
Demo mode: Full fallback without backend — demo-api.tsx with mock data and simulation of delays.
Key functionality:
Patients
- creation/deletion of a patient
- editing
- Selection of the active patient through PatientSelector in the header
- Viewing in table and card format
- Tabs: overview, notes, visits, dentistry
Reminders
- Creation/editing/deletion
- Drag & drop reordering (react-dnd)
- Priorities and statuses
- Daily widget on the dashboard
Dental charts
- Dogs — standard numbering system
- Cats — Triadan system with anatomically absent teeth
- Editing tooth status in 1-2 clicks
- ToothEditor — notes and procedures for each tooth
- MassEditor — bulk editing
- PerioModule — periodontal module
- Auto-save
- Zoom/pan controls (ZoomControls)
- PDF report generation
- Search
- Global search (useGlobalSearch) with a modal window
- Saving search history
- Hotkeys
3 themes: light, dark, pastel
2 languages: UA / EN
3 interface sizes: compact, normal, large
Responsiveness for all types of devices (PC/Mobile/Tablet)
Open to using ready-made solutions, libraries, open-source templates, and AI tools (Cursor, v0, vibe coding, etc.)