Суть проекта: веб-приложение, где врачи могут вести интерактивные стоматологические карты пациентов (кошек и собак)
Дизайн интерфейса и все элементы челюсти уже полностью готовы в Figma (векторные SVG с разделением по отдельным зубам)
Необходимый функционал:
Авторизация и кабинет пользователя: Регистрация врачей, сохранение профиля и истории созданных ими карточек
Интерактивная дентальная карта (главный модуль): Рендеринг SVG-челюсти, кликабельность каждого зуба, выбор патологий из меню, динамическое изменение цвета зуба на схеме и генерация текстового отчета
Экспорт данных: Генерация заполненной карты и отчета в PDF для печати или отправки клиенту
Монетизация и биллинг:
Подготовка к интеграции платежной системы
Модель подписки (ежемесячная/ежегодная оплата) и счетчик дней, оставшихся до конца действия доступа
Маркетинг: система промокодов на скидку при оплате и простая реферальная программа (бонусы за приглашенного коллегу)
В figma make есть "референс" того, что примерно нужно создать, все детали расскажу в сообщениях
Общая архитектура
Стек: React 18 + TypeScript + Vite 6, Tailwind CSS v4, Supabase (PostgreSQL + Edge Functions), Hono (Deno сервер), Radix UI / ShadCN компоненты.
Паттерн: Centralized state в useAppInitialization → prop drilling через App.tsx → AppContent (роутер) → страницы/компоненты.
Навигация: Hash-based routing (section state machine, без react-router для основных разделов).
Демо-режим: Полноценный fallback без бэкенда — demo-api.tsx с мок-данными и симуляцией задержек.
Ключевой функционал:
Пациенты
- создание/удаление пациента
- редактирование
- Выбор активного пациента через PatientSelector в хедере
- Просмотр в виде таблицы и карточек
- Вкладки: обзор, заметки, визиты, стоматология
Напоминания
- Создание/редактирование/удаление
- Drag & drop переупорядочение (react-dnd)
- Приоритеты и статусы
- Ежедневный виджет на dashboard
Стоматологические карты
- Собаки — стандартная система нумерации
- Коты — система Triadan с анатомически отсутствующими зубами
- Редактирование статуса зуба за 1-2 клика
- ToothEditor — заметки и процедуры по каждому зубу
- MassEditor — массовое редактирование
- PerioModule — пародонтологический модуль
- Автосохранение
- Zoom/pan контроли (ZoomControls)
- Генерация PDF-отчетов
- Поиск
- Глобальный поиск (useGlobalSearch) с модальным окном
- Сохранение истории поиска
- Горячие клавиши
3 темы: light, dark, pastel
2 языка: UA / EN
3 размера интерфейса: compact, normal, large
Адаптивность под все виды устройств (ПК/Мобильный/Планшет)
Не против использования готовых решений, библиотек, open-source шаблонов и AI-инструментов (Cursor, v0, вайбкодинг и т.д.)