/reactjams

A music player built on React

Primary LanguageJavaScript

ReactJams

ReactJams is a digital music player, like Spotify, built using React.

Quick Start

Please use Node 10 or higher nvm use 10

git clone git@github.com:brooksmarka/reactjams.git (or fork the repo)

cd reactjams

npm i

npm start

Initialization

This project was initialized using Create React App. For further information, please refer to the most recent version of this Guide which contains information on how to perform common tasks.

User Stories and Acceptance Criteria

User Stories Acceptance Criteria
As a listener, I want to know the name and purpose of this site so that I can decide whether I want to continue interacting with it.
  • When I vist the site, I see the name of the site, a slogan, and a brief list of selling points.
As a listener, I want to see a list of albums so that I can choose one that appeals to me.
  • When I visit the site, I see a link to a Library page in the header.
  • I can click on the link for the Library page.
  • When I visit the Library page, I see a list of albums.
  • I see a cover image, title, and artist for each album.
As a listener, I want to see basic information about the album so that I can decide whether I am interested.
  • I immediately see an album cover image, the album's title, the artist's name, and some general release info.
As a listener, I want to see the songs on the album and be able to play/pause songs by clicking on them so that I can change tracks easily.
  • I see a list of the album's songs.
  • When I click on a song, it plays.
  • When I click on a playing song, it pauses.
  • When I hover over a song, it displays a "play" button in place of the song number.
  • The currently playing song displays a "pause" button in place of the song number.
  • A paused song displays a "play" button in place of the song number.
As a listener, I want to have a set of standard music controls so that I have complete control over my listening experience.
  • Regardless of scroll position, I see a "player bar" with controls for: Play/Pause, Previous Track, Next Track, Seek, and Volume.
  • The Play/Pause button shows a "play" icon if no song is currently playing.
  • The Play/Pause button shows a "pause" button if a song is playing.
  • The Previous Track and Next Track buttons only respond when a song is currently playing.
  • The Previous Track button plays the previous song on the album.
  • The Previous Track button doesn't respond if there is no previous song.
  • The Next Track button plays the next song on the album.
  • The Next Track button doesn't respond if there is no next song.
  • I see a time control slider that shows the current time of the song.
  • I can click and drag on the time control slider to change the current time.
  • I see a volume slider that shows the player's current volume.
  • I can click and drag on the volume slider to adjust the volume.