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 підписами колбеків, той самий патерн що й в інших проєктах портфоліо.

RodTree — interactive family tree builder
RodTree — інтерактивний конструктор сімейного дерева — Kirill Udruhov