Каталог книжок із кошиком
Адаптивний прототип книгарні з каталогом, модальним вікном товару, кошиком і простим сценарієм покупки.
РольFrontend розробка в командному проєкті
ТипПрототип e-commerce каталогу
ЛокаціяНавчальний проєкт
ФокусРеалізація каталогу книжок із фільтрацією, модальним вікном товару, кошиком і сповіщеннями.
СтекHTML, CSS, JavaScript, Vite, API, LocalStorage
Тривалість1 тиж.
Коротко про проєкт
- Тип проєкту
- Прототип e-commerce каталогу
- Ціль
- Створити простий каталог книжок із фільтрацією, деталями товару, кошиком і базовим сценарієм покупки.
- Ключові функції
- Каталог книжок
- Фільтрація категорій
- Модальне вікно товару
- Кошик
- Wishlist
- Сповіщення
- Моя роль
- Frontend розробка в командному проєкті
- Стек
- HTML
- CSS
- JavaScript
- Vite
- API
- LocalStorage
- Результат
- Адаптивний прототип книгарні з базовим shopping flow і інтерактивними станами інтерфейсу.
Проблема
Користувачу потрібен швидкий спосіб переглянути книжки, звузити список за категоріями, відкрити деталі товару і додати вибрані позиції до кошика без складного процесу.
Рішення
Проєкт поєднує каталог книжок, фільтрацію, модальне вікно товару, кошик, wishlist і короткі системні повідомлення. Інтерфейс зроблений як адаптивний вигляд книгарні з базовим сценарієм покупки.
Ефект
У результаті вийшов робочий прототип книгарні, який показує шлях від перегляду книжок до додавання товару в кошик і підтвердження дії.
Що ми зробили
- Брали участь у командній frontend-розробці застосунку
- Реалізували перегляд каталогу і фільтрацію категорій
- Додали взаємодію з модальним вікном товару і деталями
- Реалізували стани кошика та wishlist через LocalStorage
- Інтегрували UI з даними, що надходять з API
- Забезпечили адаптивність ключових секцій
- Додали повідомлення після дій із кошиком і покупкою
- Допомогли інтегрувати командні модулі в єдиний user flow
Каталог книжок
Головна секція з hero, категоріями і списком книжок.
Адаптивність
Desktop і mobile вигляди, які показують адаптивність інтерфейсу.
Відгуки і події
Секції з відгуками клієнтів і подіями книгарні.
Секція локації
Контактний блок з адресою, контактними даними і мапою.
Модальне вікно товару
Вигляд деталей книжки з ціною, кількістю і діями покупки.
Деталі товару
Розкриті секції інформації про книжку, доставку і повернення.
Сповіщення кошика
Повідомлення після додавання товару до кошика і завершення покупки.
Потрібен сайт, який спрощує контакт із клієнтами?
Підготую зрозумілий сайт із простим шляхом до заявки, бронювання або розмови.