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

# Иллюстрации

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

![Главная страница](https://media.giphy.com/media/to1rnY8vRmKdPreqiO/giphy.gif 'Главная страница')

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

![Сортировка и фильтрация](https://media.giphy.com/media/SHdYpqWAZa0kSAZxqo/giphy.gif 'Сортировка и фильтрация')

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

![Главная страница](https://i.imgur.com/fYEFwVu.jpg 'Главная страница')

![Плеер](https://i.imgur.com/IXEcbQm.jpg 'Плеер')