Цифровой бренд бук клиники. Описание элементов сайта: цвета, шрифты, блоки, формы, страницы

6.2 KiB

Raw Permalink Blame History

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

Живой цифровой брендбук клиники «О!Клиника» (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

Новую задачу начинаем с ветки от sprint/N:
```
git checkout develop
git checkout -b feature/hero-block
```
Коммитим по конвенции (см. ниже)
Открываем PR в sprint/N (или напрямую в develop для мелких правок)
В конце спринта sprint/N мержится в develop
После тестирования 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)

Команда

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

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

6.2 KiB Raw Permalink Blame History