/Soundboard-React

React, TypeScript, Redux, YandexMusic Design

Primary LanguageTypeScript

Описание

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

Иллюстрации

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

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

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

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

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

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