RodTree — інтерактивний конструктор сімейного дерева
Про проєкт
- Клієнт Власний SaaS
- Рік 2026 → сьогодні
- Категорія SaaS / Генеалогія
- Стек Next.js 16 (App Router), React 19, TypeScript, Tailwind v4, Prisma 7 + Postgres (@prisma/adapter-pg), NextAuth v5 (JWT, Google + Credentials), React Flow, next-intl, WayForPay, npm workspaces monorepo
Опис проєкту
RodTree — власний SaaS для побудови, збереження та шерингу інтерактивних сімейних дерев, який я спроєктував і реалізував з нуля до продакшну. Користувачі додають предків, нащадків і події життя; дерево рендериться плавним, масштабованим canvas-ом на React Flow з кастомними нодами для людей, шлюбів і поколінних ліній. Інтерфейс локалізовано англійською та російською, безкоштовний акаунт дозволяє побудувати дерево на кілька поколінь до переходу на платний тариф.
Архітектура: монорепо на npm-workspaces з Next.js 16 App Router застосунком у apps/web і спільними packages/* з графовою логікою та i18n-рядками. Сховище — Prisma 7 поверх Postgres через @prisma/adapter-pg; авторизація — NextAuth v5, стратегія JWT, провайдери Google і Credentials. Мутації йдуть через типізовані server actions у src/lib/actions/, які автентифікуються через auth() і повертають стандартний для проєкту конверт {data} / {error} / {success} — клієнт ніколи не спілкується з Prisma напряму.
Цікаві місця: кастомні типи нод React Flow, які складають зв'язки parent/child/spouse у читабельний поколінний layout; автозбережувальний редактор, що батчить граф-дельти перед скиданням; і роутинг під /[locale]/, де next-intl обробляє префіксні локалі без дублювання всього дерева під двома кореневими точками. Платежі — WayForPay із HMAC-MD5 підписами колбеків, той самий патерн що й в інших проєктах портфоліо.
