Описание

MusicStore - это веб-приложение, разработанное с использованием React, предоставляющее возможность пользователям просматривать и покупать музыкальные альбомы. Проект создан в качестве учебной и практической задачи, чтобы продемонстрировать навыки разработки фронтенда с использованием React и связанных технологий.

Основные функции и компоненты проекта

Структура данных альбомов

• Альбом содержит следующие поля:
  • id;
  • название;
  • группу;
  • дату выхода;
  • описание;
  • обложку;
  • жанр;
  • список треков.
• Трек содержит следующие поля:
  • id;
  • название;
  • длительность.

Модальное окно просмотра альбома

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

Модальное окно корзины

• Содержит список выбранных пользователем товаров для покупки.
• Пользователи могут просматривать, добавлять и удалять товары из корзины.
• Отображается общая стоимость выбранных товаров.
• Имеет плавную анимацию открытия и закрытия.
• Для совершения покупки требуется авторизоваться.

Фильтрация товаров

• Фильтрация альбомов по жанру музыки.
• Сортировка альбомов по дате их выпуска (от самых новых к старым или наоборот).
• Поиск альбомов по названию альбома или группе.

Страница "О нас"

• Представляет краткую информацию о компании, ее сотрудниках и успехах.

Страница "Контакты"

• Включает в себя данные для связи с компанией, такие как адрес, номер телефона, адрес электронной почты и ссылки на социальные сети.
• Для отображения местоположения компании используется Яндекс Карты.
• На странице имеется форма для обратной связи, которая позволяет пользователям отправлять обращения, вопросы или сообщения.
• Содержит поля для ввода имени, адреса электронной почты, текста сообщения.

Страница "Кабинет"

• Содержит обязательную авторизацию пользователя.
• Авторизованные пользователи могут просматривать свой профиль. Профиль содержит информацию о пользователе, такую как имя, адрес электронной почты, номер телефона и другие данные.
• Авторизованные пользователи могут также редактировать свой профиль.
• Вкладки "Мои отложенные" и "Мои заказы" становятся доступными после авторизации.
• Авторизованные пользователи могут добавлять товары в список "Отложенные товары", чтобы сохранить их для будущей покупки, а также просматривать историю своих покупок, включая детали каждой покупки, дату и сумму.

Технологии:

• HTML, CSS, SASS, JavaScript, React, TypeScript
• React Router
• React Icons
• React Yandex Maps
• React Bootstrap (Carousel)
• React Transition
• React Helmet
• React Toastify
• React CountUp
• Axios
• Formik
• Yup
• Redux
• classnames
• gh-pages

Иллюстрации

Главная страница

Сортировка и фильтрация

Модальное окно просмотра товара

Модальное окно покупки товара

Страница "О нас"

Страница "Контакты"

Авторизация

Редактирование профиля

Регистрация

Отложенные товары и история заказов

Замечание: Проект MusicStore React создан исключительно в качестве учебного пет-проекта и не имеет целей стать коммерческим или использоваться для продажи реальных музыкальных товаров.