О!Клиника — Интерактивный брендбук

Живой цифровой брендбук клиники «О!Клиника» (oclinica.ru). Формат: Living Styleguide — полноценное веб-приложение, где дизайнеры видят все UI-компоненты, блоки и страницы в реальном виде, а также могут создавать и сохранять экспериментальные элементы.

---

Стек технологий

Слой	Технология
Frontend	Next.js (App Router)
Backend	NestJS
База данных	PostgreSQL
ORM	Prisma
Стилизация	CSS Modules / Tailwind CSS
Шрифт	Fira Sans (Google Fonts)

---

Структура монорепозитория

oclinica-brandbook/
├── apps/
│   ├── web/          # Next.js — фронтенд брендбука
│   └── api/          # NestJS — REST API
├── packages/
│   └── tokens/       # Дизайн-токены (цвета, типографика) — shared
├── docs/             # Проектная документация
│   ├── BRANDBOOK_SCOPE.md
│   ├── SPRINTS.md
│   └── decisions/    # ADR — Architecture Decision Records
├── .env.example
├── docker-compose.yml
└── README.md

---

Быстрый старт (локальная разработка)

Требования

• Node.js >= 20
• pnpm >= 9
• Docker (для PostgreSQL)

1. Клонировать репозиторий

git clone <repo-url>
cd oclinica-brandbook

2. Установить зависимости

pnpm install

3. Настроить окружение

cp .env.example .env
# Отредактировать .env — указать DATABASE_URL и другие переменные

4. Запустить PostgreSQL через Docker

docker-compose up -d

5. Применить миграции Prisma

cd apps/api
pnpm prisma migrate dev
pnpm prisma db seed  # опционально — тестовые данные

6. Запустить проект

# Из корня монорепозитория
pnpm dev
# web: http://localhost:3000
# api: http://localhost:3001

---

Переменные окружения

Создайте .env в корне на основе .env.example:

# База данных
DATABASE_URL="postgresql://user:password@localhost:5432/brandbook"

# API
API_PORT=3001
API_URL=http://localhost:3001

# Web
NEXT_PUBLIC_API_URL=http://localhost:3001

---

Git-workflow

Ветки

Ветка	Назначение
main	Стабильный production-ready код
develop	Интеграционная ветка, основа для спринтов
sprint/N	Ветка текущего спринта (например sprint/2)
feature/xxx	Конкретная фича или компонент
fix/xxx	Исправление бага

Процесс работы

main ← develop ← sprint/N ← feature/component-name

1. Новую задачу начинаем с ветки от sprint/N:

   git checkout develop
   git checkout -b feature/hero-block
   

2. Коммитим по конвенции (см. ниже)
3. Открываем PR в sprint/N (или напрямую в develop для мелких правок)
4. В конце спринта sprint/N мержится в develop
5. После тестирования develop мержится в main и деплоится

Конвенция коммитов (Conventional Commits)

<type>(<scope>): <описание на русском или английском>

feat(colors): добавлена цветовая палитра primary
fix(button): исправлен hover-стейт для ghost-кнопки
docs(readme): обновлена инструкция по запуску
refactor(card): вынесен компонент DoctorCard
style(typography): выровнены размеры заголовков
chore(deps): обновлена версия Prisma

Типы: feat, fix, docs, style, refactor, test, chore

---

Деплой

Production (сервер)

# На сервере
pnpm build
pnpm start

Docker (опционально)

docker-compose -f docker-compose.prod.yml up -d

Подробности деплоя — в docs/deployment.md (создаётся в ходе разработки)

---

Структура базы данных (схема Prisma)

Основные модели:

• Component — экспериментальный компонент (name, html, css, status, author)
• Page — экспериментальная страница (name, blocks[], status)
• Block — блок страницы (name, componentId, order)

---

Документация

Файл	Содержание
docs/BRANDBOOK_SCOPE.md	Полный состав брендбука
docs/SPRINTS.md	План спринтов
docs/decisions/	Архитектурные решения (ADR)

---

Команда

Роль	Участник
Дизайн + контент	О!Клиника
Разработка	совместно с ИИ

---

Проект разрабатывается итеративно. Документация обновляется в ходе спринтов.