Технологии

• React
• TypeScript
• SCSS
• Redux Toolkit
• RTK query
• jest / testing-library
• i18next
• webpack
• и т.д.

---

Deploy на сайте

Проект и сервер развернуты на двух сайтах. Логин для входа: user, пароль: 123.

• Frontend: zhannews
• Backend серер: backendForArticle

Репозиторий сервера здесь

---

Скрипты

• npm run start:dev:webpack - Запуск webpack dev server + backend
• npm run start:dev:vite - Запуск vite + backend
• npm run start:server - Запуск backend сервера
• npm run build:prod - Сборка в prod режиме со ссылкой на задеполенный сервер

---

Архитектура

Архитектура проекта сделана с помощью методологии Feature-Sliced Design

Проект состоит из 6 слоев:

• app
• pages
• widgets
• features
• entities
• shared

---

Тесты

npm run unit - Запуск тестов

Проект состоит из обычных unit тестов и тестов на компоненты с testing-library на jest.

• Test Suites: 26 passed, 26 total
• Tests: 69 passed, 69 total

---

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

В качестве сборщика проекта используется webpack c конфигурацией ниже:

• /config/build - конфигурация webpack (loader, plugins, resolver, devServer)
• /config/jest - конфигурация среды jest

---

Интернационализация

Используется библиотека i18next для интернационализации. Файлы с переводами хранятся здесь. Сайт поддерживает русский и английский.

---

Обработка данных

Данные с сервера обрабатываются с помощью Redux Toolkit, также нормализация с EntityAdapter. Пример слайса и пример async thunk

Запросы на сервер отправляются с помощью RTK query

Для асинхронного подключения и удаления редюсера после монтирования или размонтирования используется DynamicReducer

---

features

• articleRating
• articleRecommendation
• addCommentForm
• articleTypes
• articleViews
• langSwitch
• themeSwitch
• articleSortListBox
• authentication
• avatarDropdown
• editableProfile
• notificationTrigger
• scrollToTopTrigger
• settingsFeatures

---

entities

• Article
• User
• Comment
• Profile
• Country
• Feature
• Currency
• Notification
• Rating