Bookshop — React Single Page Application (SPA)

Современное фронтенд-приложение интернет-магазина книг, построенное на базе компонентного подхода React.js и интегрированное с внешним REST API. Проект демонстрирует навыки проектирования сложных интерфейсов, управления состоянием на стороне клиента и глубокой кастомной настройки инструментов сборки.

🛠 Технологический стек

• Core: JavaScript (ES6+), React.js (Hooks, LocalStorage)
• Стилизация: HTML5, CSS3 / Sass (SCSS), методология БЭМ (Блок-Элемент-Модификатор)
• Интеграция: REST API (Google Books API), URLSearchParams
• Сборка и инструменты: Webpack 5, Webpack Dev Server, Babel, npm

🌟 Ключевой функционал и особенности архитектуры

1. Архитектура SPA & Динамический контент:
   • Реализовано полноценное одностраничное приложение без перезагрузок страниц при навигации по категориям или фильтрации контента.
2. Интеграция с Google Books API:
   • Настроена живая асинхронная подгрузка данных с серверов Google.
   • Динамическое формирование поисковых запросов и фильтров категорий с использованием встроенного интерфейса URLSearchParams.
3. Ленивая загрузка (Lazy Loading / Pagination):
   • Оптимизирована производительность приложения: при первой загрузке запрашивается сетка из 6 книг.
   • Добавлена кнопка «Load more», подгружающая последующие порции данных по 6 элементов (асинхронный добор без потери текущего стейта).
4. Интерактивный Slider-Карусель:
   • Кастомный баннерный слайдер на главной странице. Автоматическая смена слайдов по интервалу (каждые 5 секунд) с поддержкой ручного переключения через индикаторы (dots).
5. Модуль Корзины (Cart System):
   • Динамический подсчет общей стоимости и количества товаров в режиме реального времени.
   • Реализовано сквозное обновление статусных бейджей на кнопках и иконке шапки профиля.
   • Persistence (Постоянство данных): Синхронизация состояния корзины с localStorage браузера — выбранные товары сохраняются при обновлении или закрытии вкладки.
6. Профессиональный Webpack Setup:
   • Сборка настроена вручную (без CRA). Реализовано разделение кода, минификация JS (Terser), оптимизация и экстракция CSS стилей в отдельные файлы для ускорения рендеринга страницы.

📦 Инструкция по развертыванию

1. Клонировать репозиторий:

   git clone [https://github.com/Maygdan/Bookshop.git](https://github.com/Maygdan/Bookshop.git)