https://github.com/vlaek/musicstore-react
React, TypeScript, Redux, Formik, Yup
https://github.com/vlaek/musicstore-react
css-modules formik-yup react redux scss typescript
Last synced: 7 months ago
JSON representation
React, TypeScript, Redux, Formik, Yup
- Host: GitHub
- URL: https://github.com/vlaek/musicstore-react
- Owner: Vlaek
- Created: 2023-07-27T17:40:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-09T03:35:10.000Z (over 1 year ago)
- Last Synced: 2025-02-28T02:24:14.113Z (11 months ago)
- Topics: css-modules, formik-yup, react, redux, scss, typescript
- Language: TypeScript
- Homepage: https://vlaek.github.io/MusicStore-React/
- Size: 19.5 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Описание
[**MusicStore**](https://vlaek.github.io/MusicStore-React/) - это веб-приложение, разработанное с использованием 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 создан исключительно в качестве учебного пет-проекта и не имеет целей стать коммерческим или использоваться для продажи реальных музыкальных товаров.