Веб-разработка. Разработка с нуля. Пожелания и особенности: разработать полноценное одностраничное приложение (SPA), используя обязательный стек технологий и покрыв его тестами. 1. Основные требования к проекту Ваш проект должен быть реализован с использованием следующего стека технологий: 1. TypeScript: Весь код приложения (логика, компоненты, стейт-менеджмент) должен быть написан на TypeScript 2. React: Пользовательский интерфейс должен быть построен на React. Используйте функциональные компоненты и хуки. 3. Redux Toolkit: Для управления состоянием приложения необходимо использовать Redux, настоятельно рекомендуется применять Redux Toolkit как современный стандарт для работы с Redux. Это включает в себя создание слайсов (slices), использование createAsyncThunk для асинхронных запросов и селекторов для получения данных в компонентах. 4. React Router: В приложении должна быть реализована клиентская маршрутизация с помощью библиотеки react-router-dom. Проект должен содержать как минимум 3-4 уникальные страницы (например, главная, страница элемента, форма создания/редактирования, страница “о проекте“). 2. Технические требования Взаимодействие с API: Приложение должно получать данные из базы данных. В качестве сервера можно или реализовать бэкенд самостоятельно (в качестве базы данных можно выбрать sqlite) или использовать сервисы Firebase/Supabase (есть бесплатный тариф достаточный для реализации проекта). Необходимо реализовать как минимум операции чтения данных (GET), создания (POST), обновления (PUT/PATCH) и удаления (DELETE). Реализация API должна соответствовать REST API. Асинхронные операции: Все асинхронные запросы к API должны обрабатываться через Redux с использованием createAsyncThunk. Состояние запросов (загрузка, успех, ошибка) должно корректно обрабатываться и отражаться в интерфейсе (например, показом прелоадера или сообщения об ошибке). Стилизация: Вы можете использовать CSS/SCSS Modules для стилизации. Приложение должно быть адаптивным и корректно отображаться как на десктопных, так и на мобильных устройствах. Качество кода: Код должен быть хорошо структурирован, разделен на логические модули и компоненты. Понятные названия переменных и функций, а также следование принципам чистого кода обязательны. Наличие ESLint и Prettier для поддержания единого стиля кода будет плюсом. Деплой: Готовый проект должен быть развернут на любом бесплатном хостинге (например, GitHub Pages) и быть доступен по публичной ссылке. 3. Тестирование Важной частью задания является написание тестов для вашего приложения.Необходимо реализовать все три следующих вида тестов: 1. Unit-тесты, проверить корректность работы изолированных частей логики, функций, редьюсеров, хуков: Инструменты: Jest, React Testing Library. Требование: Написать тесты для нескольких ключевых редьюсеров (проверка изменения стейта на разные экшены) и как минимум для 2-3 сложных функций вашего приложения. 2. Компонентные (скриншотные) тесты, проверить, что компоненты отображаются корректно и их внешний вид не изменился после внесения правок:Инструменты: Storybook для визуализации компонентов в изоляции + аддон для скриншот-тестирования (например, storyshots или Loki). Требование: Для 3-4 основных переиспользуемых компонентов (например, Button, Input, Card) создать “истории“ в Storybook. Для этих же компонентов настроить скриншот-тестирование, которое будет создавать и сравнивать снимки их внешнего вида. 3. End-to-end (E2E) тесты, проверить ключевые пользовательские сценарии от начала до конца, имитируя действия реального пользователя в браузере: Инструменты: Cypress, Playwright. Требование: Написать 1-2 E2E-теста для самых важных сценариев вашего приложения (например: “пользователь заходит на главную, использует поиск, переходит на страницу товара и видит его описание“ или “пользователь добавляет товар в корзину и проверяет, что он там появился“). 4. В качестве результата необходимо предоставить: 1. README.md файл в корне репозитория, в котором должны быть описаны:Краткое описание проекта. Инструкция по запуску проекта локально (npm install, npm start и т.д.). Инструкция по запуску тестов (npm test, npm run storybook, npm run cypress:open и т.д.). Краткое описание архитектуры и принятых решений (например, почему выбрали ту или иную библиотеку, структура проекта). 5. проверка корректности выполнения задачи Корректное использование TypeScript: типизация пропсов, состояния, асинхронных экшенов и т.д. Архитектура React-компонентов: грамотное разделение на контейнерные и презентационные компоненты, переиспользование. Управление состоянием: правильная настройка Redux Toolkit, работа с асинхронными операциями, использование селекторов. Наличие и качество тестов (unit, скриншотные, E2E): тесты должны быть осмысленными и проверять ключевой функционал. Маршрутизация: корректная работа навигации между страницами. UI/UX и адаптивность: приложением удобно пользоваться, оно адекватно выглядит на разных разрешениях экрана. Качество кода и репозитория: структура проекта, читаемость кода, наличие полного README.md. Работоспособность приложения: отсутствие критических ошибок, работоспособность основного функционала, корректная работа API. Реализация сложной функциональности.