Vees My

Самое удобное приложение для записи результатов тренировок (:

• ✨🎨 Разработан дизайн в Figma
• Собственный UI Kit
• Серверный рендеринг и AppRouter
• Архитектурная методология Feature-Sliced Design
• 🤍🖤 Темная и светлая тема
• Полная типизация проекта

---

⠀

Продемонстрировать свои навыки, это не про «усложнить проект»... (всевозможные самописные утилиты, хуки, размазывание не переиспользуемого функционала по всей архитектуре, тесты на всё подряд). ~ Настоящее мастерство находится в простоте ^-^

⠀

📋✏️ Общие правила проекта

Архитектура

• Необходимо оставлять комментарии к сложному функционалу;
• Папки с компонентами, как и сами компоненты, должны быть в PascalCase. Утилиты, моки, типы и т.п. в kebab-case;
• Наименование .module.scss должно начинаться с маленькой буквы, а компонента .tsx с большой;
• Если в слайсе, кроме Name.tsx, index.ts и name.module.scss ничего нет, то не нужно создавать сегмент ui/;
• Серверные компоненты и типы экспортируем как обычно, через index.ts. Клиентские компоненты ('use client') экспортируем через client.ts;
• Наименование типов. Данные получаемые с сервера: Response. Данные отправляемые на сервер: Dto.

Git

• feature - Добавление нового функционала;
• fix - Исправление какой-либо программной ошибки;
• refactor - Изменения в коде, не исправляющие ошибок и не добавляющие новый функционал;
• test - Добавление новых тестов или исправление существующих;
• core - Любые другие изменения.

Пример названия ветки: feature/VEES-330-short-description. Пример сообщения коммита: VEES-330 | Short description

SCSS

• [custom-rules/restrict-apply] @apply запрещено использовать;
• [custom-rules/scss-import-name] Импорт стилей из .module.scss нужно называть styles.

Tailwind

• Добавлять пользовательские цвета нужно в /shared/theme.scss формата RGB! Далее нужно добавить этот цвет в /tailwind.config.ts.
  • Использовать переменную цвета нужно строго через theme('colors.base.{50-950}'). Через var(--color-base-{50-950}) использовать запрещено!

---

⠀

🎬📃 Скрипты

• yarn dev - Запуск в Development режиме;
• yarn build - Production сборка;
• yarn start - Запуск Production сборки;
• yarn lint - Проверка линтером.

---

⠀

📂⚡️ Архитектура проекта

! Сейчас большая часть компонентов - клиентские. Это связано с тем, что серверные компоненты не имеют доступа к хранилищу браузера. На этапе MVP мы всё храним в IndexedDB. В будущем, с появлением базы данных, мы перейдём на полноценный серверный рендеринг.

Проект написан в соответствии с архитектурной методологией Feature-Sliced Design и AppRouter Next.js 15.

• app - AppRouter;
• widgets - Большие, автономные блоки функциональности или пользовательского интерфейса;
• features - Повторно используемые реализации целых функций продукта;
• entities - Бизнес сущности;
• shared - Многократно-переиспользуемые компоненты и функции.