Play Now

Play Now — это приложение для управления музыкальными треками и плейлистами. Оно предоставляет пользователю удобный интерфейс для просмотра треков и плейлистов, а также управления воспроизведением музыки.

Описание

Приложение состоит из трех основных экранов:

• Авторизация: Форма регистрации и логина.
• Треки: Отображает список треков с подробной информацией о каждом.
• Плейлисты: Представляет собой мозаику с карточками плейлистов.

Общие элементы приложения

• Меню: С левой стороны, содержит статичные и динамические пункты.
  • Треки: Переключить на список треков.
  • Плейлисты: Переключить на список плейлистов.
  • Добавить плейлист: Добавить новый плейлист.
  • Плейлисты: Переключает между списками треков плейлиста.
• Шапка:
  • Имя и аватар пользователя: В правом верхнем углу, доступно меню для выхода из сессии.
  • Форма поиска: Фильтрует треки.
  • Логотип приложения: Переход на начальную страницу при клике.
• Плеер музыки:
  • Информация о треке: Обложка альбома, наименование трека, исполнитель.
  • Кнопки управления:
    • Перемешать: Перемешивает треки.
    • Назад: Переключает на предыдущий трек.
    • Воспроизвести/Пауза: Переключает состояние воспроизведения.
    • Вперёд: Переключает на следующий трек.
    • На повтор: Включает/выключает повтор.
  • Полоса воспроизведения: Отображает текущее место и длительность трека, можно управлять ползунком для перемотки.
  • Громкость: Ползунок для управления громкостью.

Макет - Figma

Установить репозиторий

$ git clone https://github.com/ingerstep/play-now.git
$ cd react-player

Запуск с Docker

# миграции к БД автоматически применятся
$ docker compose up --build

Client - http://localhost:5173

Server - http://localhost:3000

Swagger - http://localhost:3000/api

Стандартная установка

После клонирования репозитория, нужно инициализировать backend часть приложения, далее frontend.

Backend

Репозиторий содержит серверную часть приложения c использованием NestJS - express, Swagger, TypeOrm и SQLite.

Директория - streaming_service_api.

Установка зависимостей и инициализация БД

$ npm install
$ npm run migration

Запуск приложения

# development
$ npm run start

Swagger

Для более удобной ориентации по апи в рамках проекта добавлен пакет "Swagger". После запуска бэке он будет доступен по адресу http://localhost:3000/api/

Frontend

Этот репозиторий содержит фронтенд часть приложения, использующего React - Vite + SWC, Redux и TypeScript. Он предоставляет интерфейс для управления музыкальными треками и плейлистами.

Директория - streaming_service.

Установка зависимостей

$ npm install

Запуск приложения

# development
$ npm run dev

Cборка

$ npm run build

Предварительный просмотр

$ npm run preview

Линтинг

$ npm run lint