Warm-Heart
Warm Heart — це інтернет-магазин, розроблений з використанням сучасних технологій веб-розробки, таких як React, RTK, CSS модулі, Swiper.js, Animate.css і React-Loading-Skeleton. Сайт забезпечує зручну платформу для покупок з багатьма корисними функціями.
Основні особливості:
Адаптивна верстка: сайт повністю відповідає макету і чудово відображається на різних пристроях.
Слайдер: за допомогою Swiper.js на головній сторінці реалізовано слайдер, що дозволяє ефективно презентувати товари.
Пагінація: використовуючи запити до сервера через JSON Server, сторінки поділяються на окремі частини для зручності навігації по великій кількості товарів.
Карточки товарів: кожен товар представлений у вигляді картки з основними характеристиками, ціною та можливістю додавання до кошика.
Кошик: користувач може додавати товари до кошика і переглядати їх у будь-який момент.
Останні переглянуті товари: сайт відстежує останні переглянуті товари та надає їх користувачеві для швидкого доступу.
Пошук: є вбудована система пошуку, що дозволяє швидко знаходити товари за заданими критеріями.
Технології:
React: для створення динамічних та реактивних компонентів.
RTK (Redux Toolkit): для централізованого управління станом додатку, спрощуючи роботу з даними.
CSS Модулі: для стилізації компонентів, що дозволяє уникнути конфліктів класів і робить стилі локальними.
Swiper.js: для створення красивого і функціонального слайдера на головній сторінці.
Animate.css: для додавання анімацій, що робить взаємодію з сайтом більш живою і динамічною.
React-Loading-Skeleton: для відображення skeleton-екранів під час завантаження даних, покращуючи користувацький досвід.
Основні особливості:
Адаптивна верстка: сайт повністю відповідає макету і чудово відображається на різних пристроях.
Слайдер: за допомогою Swiper.js на головній сторінці реалізовано слайдер, що дозволяє ефективно презентувати товари.
Пагінація: використовуючи запити до сервера через JSON Server, сторінки поділяються на окремі частини для зручності навігації по великій кількості товарів.
Карточки товарів: кожен товар представлений у вигляді картки з основними характеристиками, ціною та можливістю додавання до кошика.
Кошик: користувач може додавати товари до кошика і переглядати їх у будь-який момент.
Останні переглянуті товари: сайт відстежує останні переглянуті товари та надає їх користувачеві для швидкого доступу.
Пошук: є вбудована система пошуку, що дозволяє швидко знаходити товари за заданими критеріями.
Технології:
React: для створення динамічних та реактивних компонентів.
RTK (Redux Toolkit): для централізованого управління станом додатку, спрощуючи роботу з даними.
CSS Модулі: для стилізації компонентів, що дозволяє уникнути конфліктів класів і робить стилі локальними.
Swiper.js: для створення красивого і функціонального слайдера на головній сторінці.
Animate.css: для додавання анімацій, що робить взаємодію з сайтом більш живою і динамічною.
React-Loading-Skeleton: для відображення skeleton-екранів під час завантаження даних, покращуючи користувацький досвід.