Интернет-магазин книг 📚

FrontEndBooks — интернет-магазин по продаже книг для фронтенд-разработчиков.

Демо 🔗

Стек

• React.js
• Redux Toolkip
• Redux Thunk
• React Router
• Tailwind CSS
• React Content Loader
• PHP + MySQL (для json-сервера)

Функционал

• Переход по страницам сайта: карточка товара, избранное, корзина;
• Сортировка списка книг по темам;
• Избранное: добавление и хранение списка книг;
• Корзина: добавление, хранение и расчет стоимости;
• Анимированные прелоадеры на время загрузки страниц;
• Адаптивная верстка;
• ...

Для навигации по сайту и сортировке применяется React Router. Сортировка работает через GET-параметры.

"Корзина" и "Избранное" используют localStorage. Раздел "Избранное" содержит в хранилище только массив id книг и при переходе на страницу полная информация подгружается через API. В хранилище корзины находятся данные о количестве книг и сумме покупки, краткая информация по каждому товару.

API

Под проект создал JSON-сервер. Собрал данные по книгам, создал базу данных и запустил на своем сайте.

Категории книг (темы): GET https://mchlv.ru/apis/booksshop/categories

Все книги: GET https://mchlv.ru/apis/booksshop/books

Книги в категории: GET https://mchlv.ru/apis/booksshop/books/1

Книга: GET https://mchlv.ru/apis/booksshop/book/2

Запуск

Действия стандартные для запуска create-react-app:

npm start

Запускает приложение в режиме разработки.

npm run build

Формирует production-версию приложения и выгружает файлы в папку build.