Skip to content

Latest commit

 

History

History
117 lines (82 loc) · 4.71 KB

README.md

File metadata and controls

117 lines (82 loc) · 4.71 KB
Raw

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