Задание: HTML-верстальщик. Верстка проекта на React с использованием REST API (Дистанционная работа)
https://www.figma.com/design/DLDaAngxw6AWIuuyclyOCH/FuelTime-–-Основной-сайт?node-id=34-413&node-type=canvas&t=yT7n5ZjJpZ1d8ICr-0
Раздел: Финал
Цель проекта:
Реализовать верстку веб-приложения на основе дизайна, разработанного в Figma, с использованием React для фронтенда и REST API для взаимодействия с бэкендом. Приложение должно иметь версии для ПК и мобильных устройств.
Исходные данные:
2.1. Дизайн проекта, реализованный в Figma.
2.2. Спецификация REST API (предоставляется бэкенд-разработчиками).
2.3. Дизайн для двух версий: ПК и мобильные устройства.
Технические требования:
3.1. Фронтенд:
Использование React для разработки пользовательского интерфейса.
Версия React: 18.x
Обязательное использование React Router для маршрутизации.
Использование Axios для взаимодействия с REST API.
3.2. Верстка:
Pixel-perfect соответствие дизайну из Figma.
Реализация двух версий интерфейса: для ПК и мобильных устройств.
Использование CSS-препроцессора (например, SASS или LESS) для стилизации.
3.3. Взаимодействие с бэкендом:
Реализация взаимодействия с REST API с использованием Axios.
Обработка ошибок и отображение соответствующих уведомлений пользователю.
Интеграция с существующей системой авторизации и регистрации на бэкенде.
Функциональные требования:
4.1. Реализация маршрутизации с использованием React Router:
Настройка маршрутов для всех страниц приложения.
Реализация защищенных маршрутов для авторизованных пользователей.
4.2. Интеграция с существующей системой авторизации:
Требования к адаптивности:
5.1. Разработка отдельных версий интерфейса для ПК и мобильных устройств.
5.2. Корректное отображение на различных размерах экранов в рамках каждой версии.
5.3. Плавное переключение между версиями при изменении размера окна браузера.
Требования к производительности:
6.1. Время загрузки главной страницы не более 2 секунд.
6.2. Оптимизация загрузки ресурсов для мобильных устройств.
Требования к безопасности:
7.1. Реализация защиты от XSS-атак.
7.2. Безопасное хранение токенов авторизации cookies.
Требования к тестированию:
8.1. Написание unit-тестов для ключевых компонентов.
8.2. Проведение кросс-браузерного тестирования
8.3. Тестирование на различных мобильных устройствах и планшетах.
Требования к документации:
9.1. Создание README файла с инструкциями по установке и запуску проекта.
9.2. Документирование структуры проекта, ключевых компонентов и функций.
Критерии приемки:
11.1. Соответствие дизайну из Figma для обеих версий (ПК и мобильные устройства).
11.2. Корректная работа всех функциональных требований.
11.3. Успешное взаимодействие с REST API через Axios.
11.4. Правильная работа маршрутизации и защищенных маршрутов.
11.5. Корректная интеграция с системой авторизации бэкенда.
11.6. Отсутствие критических ошибок и багов.
11.7. Корректное отображение и функционирование на целевых устройствах и браузерах.
