Homework Task | Hands On Task

Module 1

Section 1

Create a page that does the following

• Have a title
• Have a heading1 with "Create Playlist" text
• Have a form which accepts title and deccription on the playlist
• When the form submitted, show a popup with alert() with some text
• Create a div that contains this following items on the internet :
  • Pictures
  • A text for Title
  • A text for Artist
  • A text for Albums
  • A button that does nothing
  • This div should have borders outside, margins, and padding

Section 2

• Create a new directory that duplicate the previous homework
• Refactor the code to add some call to get a track info. You can get the data here.
• Try to call above endpoint with a GET method, and console.log() the response
• Do alert() when there is an error

Section 3

• Initialize an empty React App (from CRA)
• Install Axios on that React App
• Set up Spotify API (client ID)
• Push the code to github. Repo name : generasi-gigih-homework. Add release and tag format.

Module 2

Section 1

• Create a page in React which contains the following data. The layout will be similar to the previous exercise without the form part only.
• Create all of them in App.js in one component
• Download the data here and put that in your react

Section 2

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

Section 3

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

Module 3

Section 1

• Have a link that when clicked, it redirects to Spotify Auth API.
• Read it more here in the Implicit Grant 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
• Place it above the Tracks Table
• Have a Search button, when the button is clicked, it calls Spotify Search API. Later on, show the results on the Tracks Table.

Section 2

• Use the uri as the identifier
• build the component using hooks
• add features select and deselect songs

Section 3

Create a “create playlist” form with the following fields

• Title, minimum 10 characters
• Description, minimum 20 characters
• 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

Module 4

Section 1

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

Section 2

• 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

Section 3

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

Module 5

Section 1

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

Section 2

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

Section 3

• Add typescript to your app
• Convert some component to Typescript.

Module 6

Section 1

• Write a test for Tracks component
• (Optional) Write a test for Search API function. Use the mock server, and fire the request to the mock server instead

Section 3

• Build your app
• Fix any warnings
• Deploy to vercel. Make sure that your app is accessible