krylovDev/production

production project

Файловая структура: Feature-Sliced Design

1. Shared — переиспользуемый код, не имеющий отношения к специфике приложения/бизнеса.
2. Entities (сущности) — бизнес-сущности (например, User, Product или Order).
3. Features (фичи) — взаимодействия с пользователем, действия, которые несут бизнес-ценность для пользователя.
4. Widgets (виджеты) — композиционный слой для соединения сущностей и фич в самостоятельные блоки.
5. Pages (страницы) — композиционный слой для сборки полноценных страниц из сущностей, фич и виджетов.
6. Processes — сложные сценарии, покрывающие несколько страниц (например, аутентификация).
7. App — настройки, стили и провайдеры для всего приложения.

Этапы разработки:

Webpack

• Подключен webpack. Настроен tsconfig.json
• Декомпозиция webpack.config.ts
• Настроен webpack-dev-server. Настроены переменные окружения для сборки
• Добавлены пакеты react, react-dom. Настроен webpack для scss, css-modules.
• Добавлен react-router-dom 6. Добавлен Code-splitting. React.lazy, React.Suspense
• Настроены глобальные стили + dark theme, настроены абсолютные импорты через webpack

Routes, Styles, linting, Jest

• Настроен конфиг для router
• Добавлен webpack SVGr для svg, file-loader для jpeg,gif,png и т.п.
• Добавлен Sidebar, Navbar, ThemeSwitcher
• Добавлен i18n. Define plugin. Добавлен LangSwitcher
• Добавлен react-refresh-webpack-plugin для отображения изменений в Реакт компонентах без перезагрузки страницы и hot-module-replacement-plugin для стилей и т.п.
• Настроен ESLint. Создан .eslintrc.js
• Настроен Stylelint. Создан .stylelintrc.json
• Настроен Jest. Создан jest.config.ts
• Добавлен страница NotFoundPage и Loader (Spinner)

Storybook, RTL, Bundle analyzer, Error Boundary, UI tests

• Добавлен ErrorBoundary, компонент ошибки PageError
• Установлен webpack-bundle-analyzer для отслеживания размера бандла
• Установлен react-testing-library. Написаны тесты на Button,Sidebar
• Установлен Storybook. Написана stories на каждую страницу и компонент
• Установлен Loki для скриншотного тестирования в связке со Storybook
• Настроен Github Actions pipeline. Автоматические тесты при pull-request или push в master. Добавлены скриншотные тесты.
• Добавлены размеры M, L, XL для Button. Обновлён Storybook. Ссылки перенесены в Sidebar. Добавлены иконки для ссылок.
• Установлен reg-cli для более удобного сравнения скриншотов для тестирования

Database, Redux

• Добавлен Redux Toolkit.
• Установлен json-server для имитации работы cервера.

Авторизация. Husky. Input. Работа с текстом. Lazy modal. Reducers, slices, async thunk

• Добавлен Lazy Modal, Кастомный Input
• Добавлен husky pre-push. В конфиг husky добавлена проверка линтеров.
• Добавлена форма авторизации. UserSlice. Авторизация через redux-toolkit.

Async reducers. Тесты. Instance API. TS strict mode. Модуль профиля

• Добавлен Reducer Manager и DynamicModuleLoader, чтобы в runtime добавлять и удалять новые редьюсеры
• Создан класс TestAsyncThunk для тестирования
• Добавлен Instance API для запросов

Модуль профиля. Avatar. Редактирование и сохранение. Приватные роуты

• Добавлены кастомные компоненты Input, Select, Avatar.
• Дополнены Select'ы для Country и Currency.
• Создана Страница пользователя

Статьи, комментарии. Нормализация данных. Блочная структура. Union типы. Skeleton. Protected Routes

• Добавлена страница статей, а также для каждой отдельной статьи.
• Добавлены компоненты для наполнения статьи: Текст, Код, Изображение
• Добавлен компонент для загрузки Skeleton
• Реализовано отображение комментариев из базы данных на странице статьи
• Добавлен articleDetailsCommentsSlice с применением createEntityAdapter для нормализации данных

Профили, Infinite Scroll, Intersection API, Отправка комментариев, профили пользователей.

• Добавлена возможность оставлять комментарии. Доступны сущности профилей. Редактирование только своего профиля.
• Добавлен кастомный компонент Card. Реализовано отображение статьи.