https://github.com/vlaek/soundboard-react
React, TypeScript, Redux, YandexMusic Design
https://github.com/vlaek/soundboard-react
axios css-modules react redux scss typescript yandexmusic-design
Last synced: 23 days ago
JSON representation
React, TypeScript, Redux, YandexMusic Design
- Host: GitHub
- URL: https://github.com/vlaek/soundboard-react
- Owner: Vlaek
- Created: 2023-09-19T16:25:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-02T04:58:56.000Z (over 2 years ago)
- Last Synced: 2025-02-07T03:42:14.735Z (12 months ago)
- Topics: axios, css-modules, react, redux, scss, typescript, yandexmusic-design
- Language: TypeScript
- Homepage: https://vlaek.github.io/Soundboard-React/
- Size: 6.65 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Описание
[**Soundboard**](https://vlaek.github.io/Soundboard-React/) - веб-приложение, разработанное с использованием React, предоставляющее возможность пользователям прослушивать треки. Проект создан в качестве учебной и практической задачи, чтобы продемонстрировать навыки разработки фронтенда с использованием React и связанных технологий.
## Используемые сервисы
- Дизайна взят с Яндекс Музыки
- Данные о треках хранятся в mockAPI
- Звуковые дорожки взяты из игры The Witcher 3
# Основные функции и компоненты проекта
## Фильтрация и сортировка
- Фильтрация по разделам:
- Раздел "Главное" содержит все треки
- Раздел "Коллекция" содержит треки, которые понравились пользователю
- Раздел "Для детей" исключает непригодные для детей треки
- Фильтрация по исполнителям
- Фильтрация по поиску
- Сортировка по названию, исполнителю (в обе стороны)
## Функциональность плеера
- Пауза / возобновление проигрывания
- Переключение треков (в обе стороны)
- Перемотка трека на 5 секунд (в обе стороны)
- Изменение громкости
- Режим повтора одного трека
- Режим проигрывания треков в случайном порядке
- Добавление в "Коллекцию"
- Выключение плеера
## Рекламные баннеры
- Два случайных баннера моих пет-проектов
# Технологии
- HTML, CSS, SASS, JavaScript, React, TypeScript
- React Icons
- React Select
- React Transition Group
- React Loading Skeleton
- Redux
- Axios
- classnames
- gh-pages
# Иллюстрации
## Главная страница

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

## Мобильная версия

