E-commerce

Полноценное Single Page Application (SPA), имитирующее работу интернет-магазина. Приложение взаимодействует с реальным REST API (FakeAPI Platzi) и реализует полный цикл пользовательского опыта: от поиска товара до оформления корзины.

Ключевые особенности UX/UI

Я уделил особое внимание удобству использования и сохранению состояния пользователя:

• Синхронизация с URL: Фильтры, поисковые запросы и категории записываются в query-параметры. Ссылкой на конкретную выборку товаров можно поделиться, и она откроется в том же состоянии.
• Infinite Scroll: Реализована пагинация через бесконечную прокрутку для плавного просмотра каталога.
• Персистентность: Состояние корзины сохраняется в LocalStorage, данные не теряются при перезагрузке страницы.
• Сложные UI-компоненты: Реализован кастомный MultiDropdown, позволяющий выбирать несколько параметров фильтрации одновременно.

Техническая реализация

Проект демонстрирует углубленное понимание инструментов разработки и архитектуры React-приложений.

1. Кастомная сборка (No CRA/Vite) Проект написан без использования бойлерплейтов. Среда разработки настроена вручную на Webpack + Babel:

• Настроены Alias (абсолютные импорты);
• Поддержка SCSS Modules для изоляции стилей;
• Интеграция TypeScript и SourceMaps;
• Линтинг кода по строгим правилам Airbnb.

2. Управление состоянием (MobX) Использована реактивная архитектура на базе MobX 6.

• RootStore паттерн: Единая точка входа, объединяющая доменные сторы (ProductsStore, CategoriesStore) и UI-сторы (CartStore).
• Разделение логики: Бизнес-логика вынесена из компонентов в сторы, что делает UI чистым и легким для тестирования.

3. Компонентная база Приложение разбито на переиспользуемые common компоненты (Button, Typography, Input) и специфичные local модули. Это позволяет легко масштабировать проект и добавлять новые страницы.