mari1647iv / music-player

Simple web music player from scratch with internal APIs interactions.

Music Player - React Web Application

Table of Contents

• About
  • Frontend Description
  • Backend Description
• Getting Started
  • Prerequisites
  • Installation
• Authors
• License

About

Simple web music player with the ability to see the song lyrics, artist info, and information about upcoming music events.

Features description & MVP: https://docs.google.com/document/d/1enQtu05d_Va8euEKDsHXV75I_egNgr_5gt9eRKrfQuE/edit?usp=sharing

Frontend Description

During the course project, we have implemented a simple web music player with some standard functionality, the ability to see the song lyrics, and artist info. As well the information about upcoming music events such as concerts and festivals could be found on the web service.

The application contains 3 pages:

• music list with the ability to search for desired music to listen
• music player where the user is able to navigate through the playing music stream, see the playing song’s lyrics and information about the artist
• upcoming events with events search form where the events could also be filtered by the desired artist

Backend Description

For the backend, we used Public APIs:

• Genius - song lyrics database
• TasteDive - artists database
• Songkick - music events database

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Download the project using

git clone https://github.com/mari1647iv/music-player.git

Install project dependecies using npm

npm i

Installation

Start the application:

npm start

,or build it for production:

npm build

Authors

Marina Ivanova, Innopolis University BS18-SE-01

• Github: @mari1647iv
• Email: [email protected]

Marina Nikolaeva, Innopolis University BS18-DS-02

• Github: @nmaria03
• Email: [email protected]

Project Link: https://github.com/mari1647iv/music-player

License

Distributed under the MIT License. See LICENSE.md for more information.

music-player's Issues

!component Header

• main Header
• main link Header

Depends on:

• Button

Jest tests

5 functions covered with tests
(c) Lecture 1 - Introduction

Filter events by date

!page MusicPlayer

• create route
• header
• song player
• artist info card
• song lyrics

Depends on:

• Player [size = "maximized"]
• Card [type="artist"]
• Header
• LyricsBlock

See Song Lyrics

See Music

Play the previous song

Set styled components

Play the next song

Set Routing

• Add React Router
• Add links to the routes:
  • main > player
  • main > events
  • player > main
  • payer > events
  • events > main

Depends on:

• Main page
• webpack.config
• Button

!component Player

States:

• minimized
• maximized

Depends on:

• Button

Proper Form Handling

!page Events

• create route
• header
• search form
• cards grid

Depends on:

• Input
• Button
• Card [type="event"]
• Header

Search music events

!component Button

Types:

• icon
• colorful

States:

• disabled
• default
• hover

Share the song

!component Card

Types:

• artist
• event

Fix audio and audio info retrieval

Pause Music

Navigate within the song progress bar

!page Main

• create route
• header
• search form
• audio list
• minimized player

Depends on:

• Player [size = "minimized"]
• AudioBlock
• Input
• Button
• Header

Play Music

!component Input

States:

• not filled
• hover = focused
• filled

See artist info

Store the currently playing song

Required:

• Global Store (Redux)

!component AudioBlock

States:

• default
• hovered
• choosed

Ideas:

• inherited from radio button

Depends on:

• Button

Repeat the song

Set up webpack.config

• init
• eslint
• prettier
• styled components
• react
• babel
• auto generate html
• dev server
• hot module replacement
• react router
• html requests

Ideas:

https://github.com/nekitboy/JS-beginer-course/commits/react-ecosystem

Initialize react app repo