Frontend-разработчик

Проект: База данных электромобилей с каталогом, фильтрацией и возможностью сравнения моделей.

Основные обязанности и решения:

Разработка логики фильтрации и каталога:
- Реализовал фильтрацию каталога электромобилей, которая включала сортировку по различным параметрам (цена, мощность, дальность поездки и т.д). Для хранения состояний фильтров и сортировки применял Redux с Redux Toolkit (RTK), что упростило создание и управление глобальным состоянием. Для асинхронной загрузки данных с сервера разработал сервис с использованием Redux Thunk и REST API с запросами через axios.
- Улучшил UX через индикаторы загрузки, которые представляют собой уведомления для отслеживания состояний асинхронных операций. Таким образом обеспечил более точную обратную связь с пользователем.
- Работа с большими объёмами данных привела к снижению производительности при фильтрации и сортировке. Поэтому для оптимизации фильтрации применил кеширование данных на уровне клиента с помощью localStorage и механизмы мемоизации через reselect, что ускорило работу фильтров при повторных запросах.

Создание компонентов интерфейса:
- Разработал интерактивные UI-компоненты для каталога электромобилей, списка сравнения и детализированных страниц с описанием моделей. Для создания типизированных компонентов на основе React применял TypeScript. Для адаптивности вёрстки использовал CCS Grid, Flexbox. Для стилизации использовал SCSS, что позволило легко поддерживать переменные, вложенность, повысило удобство разработки.
- Обеспечил построение одинаково удобного интерфейса на разных устройствах и разрешениях экрана, включая мобильные устройства до 320px. Для этого разработал адаптивную систему компонентов с использованием медиазапросов. Также интегрировал макеты из Figma, следуя гайдлайнам дизайн-системы и UI-kit.
- Разработка велась на TypeScript для повышения надежности и предсказуемости кода, что способствовало снижению количества ошибок и повышению читаемости кода.

Функционал сравнения автомобилей:
- Разработал окно, в котором отображались выбранные к сравнению авто. Чтобы обеспечить сохранение результатов выбора даже после перезагрузки страницы, использовал комбинацию работы Redux с LocalStorage (с использованием middleware). Это привело к улучшению пользовательского опыта при работе со списком сравнения.
- Из окна можно перейти на страницу сравнения авто, где из стора подгружались добавленные к сравнению электромобили. Так же из окна можно очистить список, но после удаления появляется tooltip, который позволяет вернуть состояние списка к последнему. Реализовал это с помощью отдельного значения в сторе и хука, который управлял этой функциональностью и очисткой временного списка после отсчёта времени.

Страница сравнения автомобилей:
- Реализовал механизм для сравнения нескольких автомобилей одновременно (5 максимум, т.к. аналитика показала, что больше не сравнивают), добавил функциональность менять авто местами в сравнении и удалять их из сравнения. Для управления список использовал Redux RTK.
- Обновление данных о характеристиках происходило динамически без перезагрузки страницы через запросы. Данные были представлены в виде таблицы, где выделялся лучший результат.
- При разработке возникла сложность с частыми перерендерами при изменении списка сравнения, ухудшилась производительность приложения. При проведении рефакторинга, я применил мемоизацию компонентов через HOC React.memo, использовал useCallback для сохранения ссылок на функции (как пропсы) при перерендерах и useMemo для мемоизации результатов вычислений на клиенте, что оптимизировало состояние и предотвратило ненужные перерендеры, улучшилась производительность.

Участвовал в код-ревью и процессе рефакторинга компонентов, логики приложения.

Стек технологий:
JavaScript, TypeScript, React, Redux, RTK, REST API, Webpack, HTML, CSS, SASS, Git, Figma

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