Інтернет-магазин мобільних телефонів
Сучасний та функціональний e-commerce додаток каталогу мобільних телефонів, розроблений відповідно до професійного макету Figma. Проєкт орієнтований на створення швидкого, інтерактивного та повністю адаптивного інтерфейсу (Mobile-first).
Ключовий функціонал проєкту:
• Повноцінний каталог товарів із пагінацією для зручної навігації.
• Гнучке сортування (за ціною, новизною, за алфавітом) та фільтрація за категоріями.
• Живий пошук товарів за назвою.
• Сторінка деталей продукту з повною інформацією, галереєю зображень (перемикання фото) та блоком рекомендованих товарів.
• Функціонал кошика: додавання/видалення товарів, керування кількістю, динамічний підрахунок загальної вартості.
• Розділ «Улюблене»: додавання товарів у вибране зі збереженням стану між сесіями користувача (Persistent state).
Технологічний стек:
• React (компонентна архітектура, хуки)
• TypeScript (строга типізація даних)
• React Router DOM (реалізація багатосторінкової навігації)
• SCSS / Bulma CSS (адаптивна pixel-perfect верстка за методологією BEM)
• Vite (швидка збірка додатка)
• Cypress (тестування працездатності інтерфейсу)
• ESLint / Prettier (чистота та форматування коду)
У ході розробки було успешно вирішено складні завдання з керування глобальним станом додатка (кошик, обране), оптимізації логіки фільтрації великих масивів даних та забезпечення ідеального відображення на смартфонах, планшетах і десктопах.
#react #typescript #frontend #scss #ecommerce #web-programming #verstka #figma
Ключовий функціонал проєкту:
• Повноцінний каталог товарів із пагінацією для зручної навігації.
• Гнучке сортування (за ціною, новизною, за алфавітом) та фільтрація за категоріями.
• Живий пошук товарів за назвою.
• Сторінка деталей продукту з повною інформацією, галереєю зображень (перемикання фото) та блоком рекомендованих товарів.
• Функціонал кошика: додавання/видалення товарів, керування кількістю, динамічний підрахунок загальної вартості.
• Розділ «Улюблене»: додавання товарів у вибране зі збереженням стану між сесіями користувача (Persistent state).
Технологічний стек:
• React (компонентна архітектура, хуки)
• TypeScript (строга типізація даних)
• React Router DOM (реалізація багатосторінкової навігації)
• SCSS / Bulma CSS (адаптивна pixel-perfect верстка за методологією BEM)
• Vite (швидка збірка додатка)
• Cypress (тестування працездатності інтерфейсу)
• ESLint / Prettier (чистота та форматування коду)
У ході розробки було успешно вирішено складні завдання з керування глобальним станом додатка (кошик, обране), оптимізації логіки фільтрації великих масивів даних та забезпечення ідеального відображення на смартфонах, планшетах і десктопах.
#react #typescript #frontend #scss #ecommerce #web-programming #verstka #figma