8.2 KiB
Родословное дерево семьи (Family Tree)
Современное веб-приложение для построения, визуализации и ведения семейного родословного дерева.
Возможности
- Адаптивный интерфейс для ПК, планшетов и смартфонов
- Современный минималистичный дизайн
- Светлая и тёмная темы
- Высокая производительность на больших деревьях (1000+ человек)
Функционал
1. Управление персонами
Для каждого человека хранятся:
- Имя, Фамилия, Отчество
- Пол
- Дата рождения / Дата смерти
- Фотография
- Биография
- Место рождения
- Контакты
- Заметки
2. Родственные связи
- Родители и дети
- Супруги, несколько браков
- Братья и сёстры
- Приёмные родители и усыновлённые дети
3. Визуализация дерева
- Автоматическое построение родословной
- Масштабирование колесом мыши
- Перемещение перетаскиванием (pan & zoom)
- Сворачивание / раскрытие ветвей
- Фотографии участников на узлах
- Цветовое выделение мужчин и женщин
- Отрисовка линий родства
4. Поиск
- По имени и фамилии
- Быстрый переход к найденному человеку
5. Карточка человека
Модальное окно с фото, полными данными, биографией, списком родственников и галереей фотографий.
6. Импорт и экспорт
- JSON
- CSV
- GEDCOM
7. Администрирование
- Добавление, редактирование, удаление людей
- Управление связями через визуальный интерфейс
Технологии
Frontend: React, TypeScript, Tailwind CSS, React Flow / D3.js (визуализация дерева)
Backend: Node.js, Express, PostgreSQL
Дополнительно: авторизация, роли (администратор / редактор / просмотр), автосохранение, история изменений, резервное копирование, печать дерева в PDF, генерация страницы рода с гербом и историей семьи.
Структура проекта
family-tree/
├── frontend/ # React + TypeScript + Tailwind
│ ├── src/
│ │ ├── components/ # UI-компоненты
│ │ ├── features/tree/ # Визуализация дерева (React Flow)
│ │ ├── api/ # Клиент REST API
│ │ ├── store/ # Состояние приложения
│ │ └── types/ # Общие типы
│ └── package.json
├── backend/ # Node.js + Express
│ ├── src/
│ │ ├── routes/ # REST-эндпоинты
│ │ ├── controllers/
│ │ ├── models/
│ │ ├── middleware/ # auth, roles
│ │ └── db/ # подключение к PostgreSQL
│ └── package.json
├── db/
│ ├── schema.sql # SQL-схема базы данных
│ └── seed.sql # тестовые данные
├── landing/
│ └── index.html # лендинг Heritage (статичный, готов к открытию)
├── preview/
│ └── index.html # автономное HTML-превью приложения-дерева
├── design/ # исходный макет (Heritage Landing.dc.html + скриншоты)
├── docker-compose.yml
└── README.md
Дизайн-система Heritage
Единый визуальный язык лендинга и приложения:
| Назначение | Цвет |
|---|---|
| Фон (кремовый) | #F3ECDD |
| Тёмный (чернила) | #231B12 |
| Акцент (терракота) | #7E3B2D |
| Золото | #A9854C / #C9A05E |
| Мужчины (в дереве) | #3F6F6F |
| Женщины (в дереве) | #9C5A6F |
Шрифты: Playfair Display (заголовки), Spectral (текст), Manrope (метки).
Лендинг landing/index.html собран из макета design/Heritage Landing.dc.html
(формат конструктора x-dc преобразован в обычный статичный HTML). Кнопки «Открыть дерево»
ведут в приложение preview/index.html, а логотип приложения — обратно на лендинг.
Запуск через Docker
git clone https://git1.servaki.online/german/Heritage.git
cd Heritage
docker compose up --build
После запуска:
- Frontend: http://localhost:3000
- Backend API: http://localhost:4000 (проверка:
GET /api/health) - PostgreSQL: localhost:5432
Схема БД и тестовые данные применяются автоматически при первом старте контейнера db.
Демо-пользователи
| Роль | Пароль | |
|---|---|---|
| Администратор | admin@example.com | password |
| Редактор | editor@example.com | password |
| Наблюдатель | viewer@example.com | password |
Запуск без Docker (разработка)
# 1. База
createdb family_tree
psql -d family_tree -f db/schema.sql
psql -d family_tree -f db/seed.sql
# 2. Backend
cd backend && cp .env.example .env && npm install && npm run dev
# 3. Frontend
cd frontend && npm install && npm run dev
REST API (основное)
| Метод | Путь | Доступ | Назначение |
|---|---|---|---|
| POST | /api/auth/login |
все | Вход, возвращает JWT |
| GET | /api/persons/tree |
авторизован | Всё дерево |
| GET | /api/persons/search?q= |
авторизован | Поиск по имени/фамилии |
| GET | /api/persons/:id |
авторизован | Карточка + родственники + медиа |
| POST | /api/persons |
admin, editor | Создать |
| PUT | /api/persons/:id |
admin, editor | Изменить |
| DELETE | /api/persons/:id |
admin | Удалить |
| POST | /api/relations/parent-child |
admin, editor | Связь родитель→ребёнок |
| POST | /api/relations/union |
admin, editor | Брак/партнёрство |
| GET | /api/relations/history |
авторизован | История изменений |
| GET | /api/io/export/{json,csv,gedcom} |
авторизован | Экспорт |
| POST | /api/io/import/json |
admin, editor | Импорт |
Превью (важно)
Автономный файл preview/index.html открывается в браузере без сборки и сервера.
Реализовано: дерево с pan/zoom, светлая/тёмная тема, поиск, карточки персон, цвета по полу,
импорт/экспорт JSON/CSV/GEDCOM, печать в PDF, добавление/редактирование/удаление,
переключение ориентации дерева, стили и цвета связей («лучей»), «примагниченные» линии
при наведении, поля контекста и ссылки на подробный ресурс в карточке.