Описание

Soundboard - веб-приложение, разработанное с использованием 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

Иллюстрации

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

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

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