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
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.
- 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