Skip to content

Latest commit

 

History

History
94 lines (66 loc) · 6.36 KB

README.md

File metadata and controls

94 lines (66 loc) · 6.36 KB

Vees My

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

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

Next.js 15 React 19 Zustand TypeScript 5 Module SCSS Feature-Sliced Design GIT ESLint 9 stylelint TailwindCSS Figma

⠀

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

⠀

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

Архитектура

  • Необходимо оставлять комментарии к сложному функционалу;
  • Папки с компонентами, как и сами компоненты, должны быть в 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
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 - Многократно-переиспользуемые компоненты и функции.