Istota projektu: aplikacja internetowa, w której lekarze mogą prowadzić interaktywne karty stomatologiczne pacjentów (kotów i psów)
Projekt interfejsu oraz wszystkie elementy szczęk są już w pełni gotowe w Figma (wektory SVG z podziałem na poszczególne zęby)
Wymagana funkcjonalność:
Autoryzacja i panel użytkownika: Rejestracja lekarzy, zapisywanie profilu oraz historii stworzonych przez nich kart
Interaktywna mapa dentystyczna (główny moduł): Renderowanie SVG-szczęki, klikalność każdego zęba, wybór patologii z menu, dynamiczna zmiana koloru zęba na schemacie oraz generowanie raportu tekstowego
Eksport danych: Generowanie wypełnionej karty oraz raportu w PDF do druku lub wysłania do klienta
Monetyzacja i billing:
Marketing: system kodów promocyjnych na zniżki przy płatności oraz prosta program poleceń (bonusy za zaproszonego kolegę)
W figma make jest "referencja" tego, co mniej więcej trzeba stworzyć, wszystkie szczegóły opowiem w wiadomościach
Ogólna architektura
Stos: React 18 + TypeScript + Vite 6, Tailwind CSS v4, Supabase (PostgreSQL + Edge Functions), Hono (serwer Deno), komponenty Radix UI / ShadCN.
Wzorzec: Centralized state w useAppInitialization → prop drilling przez App.tsx → AppContent (router) → strony/komponenty.
Naigacja: Routing oparty na haszach (maszyna stanów sekcji, bez react-router dla głównych sekcji).
Tryb demo: Pełnoprawny fallback bez backendu — demo-api.tsx z danymi mock oraz symulacją opóźnień.
Kluczowa funkcjonalność:
Pacjenci
- tworzenie/usuwanie pacjenta
- edycja
- Wybór aktywnego pacjenta przez PatientSelector w nagłówku
- Widok w formie tabeli oraz kart
- Zakładki: przegląd, notatki, wizyty, stomatologia
Przypomnienia
- Tworzenie/edycja/usuwanie
- Drag & drop reorganizacja (react-dnd)
- Priorytety i statusy
- Codzienny widget na dashboardzie
Karty stomatologiczne
- Psów — standardowy system numeracji
- Kotów — system Triadan z anatomicznie brakującymi zębami
- Edycja statusu zęba w 1-2 kliknięcia
- ToothEditor — notatki oraz procedury dla każdego zęba
- MassEditor — masowa edycja
- PerioModule — moduł periodontologiczny
- Autozapisywanie
- Zoom/pan kontrolki (ZoomControls)
- Generowanie raportów PDF
- Wyszukiwanie
- Globalne wyszukiwanie (useGlobalSearch) z modalnym oknem
- Zapis historii wyszukiwania
- Skróty klawiszowe
3 motywy: jasny, ciemny, pastelowy
2 języki: UA / EN
3 rozmiary interfejsu: kompaktowy, normalny, duży
Responsywność dla wszystkich typów urządzeń (PC/Mobile/Tablet)
Nie mam nic przeciwko używaniu gotowych rozwiązań, bibliotek, szablonów open-source oraz narzędzi AI (Cursor, v0, vibe coding itp.)