zeldaababil19 / new-homework

new repo homework

Repo for Gigih2.0 - Homework

note: why the homework is started from module 2? because module 1 use sanbox.

1. Homework - Module 2 - Session 1 - Adding React to Web Project, JSX & Element

• Create a page in Reach which contains the following data. The layout will be similar to the previous exercise, without the form part only.

  • Images of the album
  • Song title
  • Song Artist
  • A button that says (Select)

• Create all of them in App.js in one component

• Download the data here and put that in your react app

2. Homework - Module 2 - Session 2 - Components and Props

From previous homework, convert the track elements (which contains song title, image, album, etc) into components. Move it outside main component.

3. Homework - Module 2 - Session 3 - List & Looping, Conditional Rendering

Now, we will create a table of tracks

• Download the data here. This contains array of tracks.
• Loop the data and create track components for each track listed.

4. Homework - Module 3 - Session 1 - State & Event Handling4

• Have a link that when clicked, it redirects to Spotify Auth API.

  • Read it more here in the Implicit Grand Flow section
  • For the scope, use playlist-modify-private
  • Set up the callback URL as localhost:3000 in the Spotify Dashboard
  • The callback will contains the Access Token, which you'll need for next request. Store that in a state

• Create a search song functionalities

  • Have a Search textbox button, when the button is clicked, it calls Spotify Search API. Later on, show the results on the Tracks Table created before.

5. Homework - Module 3 - Session 2 - Hooks

Add feature to select and deselect songs

• Use the uri as the key indentifier for looping
• Build this feature using Hooks
• When a song is selected, the button label should be "Deselect". When the song isn't selected, the button label should be "Select"
• When user searcher for another song, the selected songs should still be maintained in the list

6. Homework - Module 3 - Session 3 - Forms & Lifting State Up

• Create a "create playlist" form with the following fields

  • Title, minimum 10 characters

  • Description

  • A button to submit

  • When the button is clicked, create a new playlist with those title and description, with songs that were selected previously

  • Use Get Current User's Profile, Create a Playlist, and Add Items to a Playlist API to achieve this. Read more in the API Docs.

  • Playlist should be private and collaborative should be false

7. Homework - Module 4 - Session 1 - Redux

Move the access token state to redux store. The app should still behaves like it is before.

8. Homework - Module 4 - Session 2 - React Router

• Move the create playlist page URL to /create-playlist
• The Create Playlist page only accessible when user already login. If user haven't logged in, redirect to root URL (/)
• For the root URL (/)
  • If user haven't logged in, show the Login link
  • If user already logged in,redirect to Create Playlist page

9. Homework - Module 4 - Session 3 - Clean Code & ESLint

Fix any impure functions / mutable codes, and also fix the eslint problems (if any).

10. Homework - Module 5 - Session 1 - CSS Grid & Flexbox

Modify the existing components, to use Flexbox and Grid.

• At minimum there should be one components that use Flexbox, and a different component that use Grid.
• You can freely choose which components that will be changed.
  • Example:
  • Grid used for Track Tables
  • Flex used for song info (title, artist, etc)

Homework - Module 5 - Session 2 - UI Component Library

• Start using UI component library/just using CSS. You're free to choose any library/just using CSS.
• You can freely choose which components that will be changed
• Example: modify search input to material-ui