Запуск проекта (локально)

npm install
npm run start:dev

Запуск проекта (удалённо)

https://bespoke-mochi-054d72.netlify.app

Логин и пароль для авторизации - Admin

---

Скрипты

• npm run start - Запуск frontend проекта на webpack dev server
• npm run start:vite - Запуск frontend проекта на vite
• npm run start:dev - Запуск frontend проекта на webpack dev server + JSON server backend
• npm run start:dev:vite - Запуск frontend проекта на vite + JSON server backend
• npm run start:dev:server - Запуск JSON server backend сервера
• npm run build:prod - Сборка в prod режиме
• npm run build:dev - Сборка в dev режиме (не минимизирован)
• npm run lint:ts - Проверка ts файлов линтером
• npm run lint:ts:fix - Исправление ts файлов линтером
• npm run lint:scss - Проверка scss файлов style линтером
• npm run lint:scss:fix - Исправление scss файлов style линтером
• npm run test:unit - Запуск unit тестов с jest
• npm run test:ui - Запуск скриншотных тестов с loki (нужен Docker)
• npm run test:ui:ok - Подтверждение новых скриншотов
• npm run test:ui:ci - Запуск скриншотных тестов в CI
• npm run test:ui:report - Генерация полного отчета для скриншотных тестов
• npm run test:ui:json - Генерация json отчета для скриншотных тестов
• npm run test:ui:html - Генерация HTML отчета для скриншотных тестов
• npm run storybook - запуск Storybook
• npm run storybook:build - Сборка storybook билда
• npm run prepare - прекоммит хуки

---

Архитектура проекта

Проект написан в соответствии с методологией Feature Sliced Design

Ссылка на документацию - feature sliced design

---

Работа с переводами

В проекте используется библиотека i18next для работы с переводами. Файлы с переводами хранятся в public/locales.

Документация i18next - https://react.i18next.com/

---

Тесты

В проекте используются 4 вида тестов:

1. Обычные unit тесты на jest - npm run test:unit
2. Тесты на компоненты с React testing library -npm run test:unit
3. Скриншотное тестирование с loki npm run test:ui
4. e2e тестирование с Cypress npm run test:e2e

---

Линтинг

В проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.

Запуск линтеров

• npm run lint:ts - Проверка ts файлов линтером
• npm run lint:ts:fix - Исправление ts файлов линтером
• npm run lint:scss - Проверка scss файлов style линтером
• npm run lint:scss:fix - Исправление scss файлов style линтером

---

Storybook

В проекте для каждого компонента описываются стори-кейсы. Запросы на сервер мокаются с помощью storybook-addon-mock.

---

Конфигурация проекта

Для разработки проект содержит 2 конфига:

1. Webpack - ./config/build
2. Vite - vite.config.ts

Оба сборщика адаптированы под основные фичи приложения.

Вся конфигурация хранится в /config

• /config/babel - babel
• /config/build - конфигурация webpack
• /config/jest - конфигурация тестовой среды
• /config/storybook - конфигурация сторибука

В папке scripts находятся различные скрипты для рефакторинга\упрощения написания кода\генерации отчетов и тд.

---

CI pipeline и pre commit хуки

Конфигурация github actions находится в /.github/workflows. В ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.

В прекоммит хуках проверяем проект линтерами, конфиг в /.husky

---

Работа с данными

Взаимодействие с данными осуществляется с помощью redux toolkit. По возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter

Некоторые запросы на сервер отправляются с помощью RTK query.

Для асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется хук useDynamicReducerLoader

---

Сущности (entities)

• Article
• Comment
• Notification
• Profile
• Rating
• User

Фичи (features)

• AddCommentForm
• ArticleRating
• ArticleTypeTabs
• ArticleViewSwitcher
• AuthByUsername
• AvatarDropdown
• EditableProfileCard
• LanguageSwitcher
• NotificationButton
• ThemeSwitcher
• ToggleSidebar