Skip to content

React Playlist - Single Page Application (SPA) where you can save all your favorite songs with a rating. For my own learning curve, I chose to make this project in two different ways. One made with class-based components, the other made with Redux State management. Both projects have their own unique styling made with SCSS

Notifications You must be signed in to change notification settings

schippersdennis/MusicPlaylist-React-Redux--SPA

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 

Repository files navigation

React-Playlist

React Playlist - Single Page Application (SPA) where you can save all your favorite songs with a rating. For my own learning curve, I chose to make this project in two different ways. One made with class-based components, the other made with Redux State management. Both projects have their own unique styling made with SCSS

Requirements

In order to meet the requirements of the (imaginary) employer, we expect your SPA to meet the following core functionalities:

  • As a user I would like to enter the following information about my song: title, artist, genre, rating (dropdown menu is not required).
  • As a user I want to be able to click on one button so that my entered song will be added to my playlist.
  • As a user I want to be able to see my songs in an overview (my playlist), where all entered data is visible.

Other conditions

  • You are completely free to build your components yourself: Stateful and / or Smart versus Dumb, or with Class components, or Functional Components (with the UseState Hook) ...
  • Sort the songs by name (a-z or z-a) or artist (a-z or z-a), sort by stars (5-1 or 1-5)
  • Delete button: delete songs from the state
  • Filter songs by genre (select which genres you want) in the UI you see either a dropdown with which you can select 1 genre, or you can create a checkbox per genre, if that checkbox is checked: show the genre (this can also be several or none. to be) stars (sort which results with x stars you want to see) in the UI you see either a dropdown with which you can select 1 rating, or you make a checkbox per rating, if that checkbox is checked: show all songs of that rating (this can be so there are also several or none)
  • React - Routing (/ Navigation): adding a navbar or menu with a link and page "About us", containing a short story about yourself and this project (max 10 sentences)
  • React REDUX

Project One - React class-based components

Assignment: React Playlist - Single Page Application (SPA) made with class-based components

playlist class


Project Two - React-Redux

Assignment: React Playlist - Single Page Application (SPA) made with React Redux

playlist redux

About

React Playlist - Single Page Application (SPA) where you can save all your favorite songs with a rating. For my own learning curve, I chose to make this project in two different ways. One made with class-based components, the other made with Redux State management. Both projects have their own unique styling made with SCSS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published