ShopCart - Homework for training React

ShopCart — это современное e-commerce приложение, разработанное с использованием React и Context API. Оно позволяет пользователям просматривать товары, загруженные из публичного API, фильтровать их по категориям, добавлять в корзину, изменять количество и управлять содержимым корзины. Проект выполнен в рамках задания по созданию функционального интернет-магазина с акцентом на управление состоянием через Context API.

Описание

ShopCart — это учебный проект, дополняющий базовое приложение из Practice-1 добавлением корзины товаров. Приложение загружает данные из API Fake Store API, отображает товары с фильтрацией по категориям и предоставляет удобный интерфейс для управления корзиной. В проекте используется Context API для передачи состояния корзины между компонентами без необходимости пробрасывания props.

---

Функциональность

Список товаров

• Загрузка данных: Товары подгружаются из API https://fakestoreapi.com/products.
• Отображение: Каждый товар показан с названием, категорией, ценой и изображением.
• Фильтрация: Поддерживаются категории: "Все", "Men's Clothing", "Women's Clothing", "Electronics", "Jewelery".
• Спиннер: Во время загрузки отображается индикатор загрузки.
• Добавление в корзину: Кнопка "Add to cart" на каждом товаре. Если товар уже в корзине, отображаются кнопки "+" и "−" с текущим количеством.
• Удаление: Если количество товара равно 1, нажатие "−" убирает его из корзины.

Корзина товаров

• Добавление: Пользователи могут добавлять товары в корзину из списка.
• Управление:
  • Удаление отдельных товаров.
  • Изменение количества с помощью кнопок "+" и "−".
  • Очистка корзины кнопкой "Очистить корзину".
• Информация:
  • Список товаров в корзине с изображением, названием, количеством и стоимостью.
  • Общая сумма, обновляющаяся автоматически при изменении количества.

Context API

• Используется CartContext для хранения состояния корзины и функций управления (добавление, удаление, изменение количества).
• Данные доступны любому компоненту через Provider, без передачи props вручную.

---

Технологии

• React: Основной фреймворк для построения интерфейса.
• Context API: Управление состоянием корзины.
• Fetch API: Загрузка данных с внешнего API.
• CSS: Стилизация компонентов для чистого и современного дизайна.

---

Установка

Чтобы запустить проект локально, выполни следующие шаги:

1. Клонируй репозиторий:

   git clone https://github.com/your-username/shopcart.git