Веб-сайт для аренды оборудования

Команда работала над созданием онлайн-платформы, которая позволяла пользователям арендовать строительное оборудование и технику, участвовать в обучающих курсах и оформлять заказы прямо на сайте. Решение объединяло удобный каталог инструментов, систему обратной связи и адаптивный интерфейс, обеспечивающий комфортное использование на любых устройствах.

Наша команда создавал интерфейс с нуля на React и взаимодействовала с дизайнерами и другими разработчиками для внедрения новых и улучшения существующих функций. Первоначально задача заключалась в написании модульных тестов, однако постепенно наши обязанности расширились. Мы стали участвовать в проектировании и реализации ключевых компонентов интерфейса.

Одним из самых интересных этапов стала разработка страницы о выбросах углерода. Мы воссоздали ее архитектуру, интерфейс и внутреннюю логику, применив стек React, Effector, React Router, React Hook Form и Styled-components. Работа требовала точной настройки состояния приложения и продуманного подхода к пользовательскому взаимодействию.

• Разработка клиентского интерфейса. Создание пользовательской части веб-приложения с использованием React. Реализованы адаптивные компоненты для каталога техники, страницы оформления заказа, формы бронирования обучающих курсов и обратной связи.
• Интеграция с серверной частью. Настроено взаимодействие с API для получения данных о товарах, курсах и заказах. Обеспечена корректная работа фильтров и динамическое обновление контента без перезагрузки страницы.
• Разработка страницы о выбросах углекислого газа. Спроектирована и реализована новая тематическая страница с уникальной структурой и логикой отображения данных. Использованы React Hook Form и Effector для управления состоянием и обработкой пользовательского ввода.
• Оптимизация навигации. Добавлена система «хлебных крошек», упрощающая ориентацию на сайте и переход между разделами.
• Тестирование и контроль качества. Написаны модульные тесты для ключевых компонентов. Реализована проверка функциональности пользовательских сценариев.
• Исправление ошибок и улучшение UX. Проведен анализ пользовательских сценариев, устранены визуальные и логические ошибки, повышена стабильность и отзывчивость интерфейса.

• Сложная логика страницы о выбросах углерода. Проблему решили поэтапным проектированием архитектуры компонента и использованием React Hook Form для валидации и обработки ввода.
• Неполная адаптивность интерфейса. Внесены правки в Styled-components, уточнены брейкпоинты и переработана сетка для корректного отображения на разных устройствах.
• Формирование динамических “хлебных крошек”. Настроена связка React Router с кастомным генератором маршрутов для корректного построения навигации.

В результате работы был реализован новый функциональный интерфейс, улучшена навигация по сайту, добавлена система "хлебных крошек" и обновлена галерея изображений для карточек товаров. Также были исправлены ошибки, повышена стабильность кода и покрытие тестами.