Skip to content

Vlaek/MusicStore-React

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

84 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Описание

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 создан исключительно в качестве учебного пет-проекта и не имеет целей стать коммерческим или использоваться для продажи реальных музыкальных товаров.