masakudamatsu / jammming Goto Github PK

users can add a track to their playlist by selecting a + sign on the right side of the track’s display container.

users can change the title of their custom playlist.

users can save their custom playlist by clicking a button called SAVE TO SPOTIFY.

Jammming displays the list of returned tracks from the user’s query.

users can remove a track from their playlist by selecting a - sign on the right side of the track’s display container.

Rubric Score

Criteria 1: Objective Section

• Score Level: 4 (exceeds expectations)
• Comment(s): Short but clear, good

Criteria 2: Background Section

• Score Level: 4
• Comment(s): Explains the background well and explains why this feature is needed, no issues here

Criteria 3: Technical Design Section

• Score Level: 4
• Comment(s): Technical design is very well thought out, even explaining specifically which libraries and icons it will use, great!

Criteria 4: Caveats Section

• Score Level: 3 (meets expectations)
• Comment(s): Caveats are well done and consider possible issues thoroughly. One big caveat to any web application is error handling which should be discussed a bit. Adding music playback adds some issues if the music does not load successfully, for example.

Overall Score: 15/16

Overall this is very excellently done. The technical design specifically is very well considered and planned. Great Job! Keep up the good work and happy coding!

Criteria 1: App Creation, Folder Structure, and File Paths

• _Score Level: 4/4
• _Comment(s): You had all the right files and folder. Good job.

Criteria 2: Correct Implementation of User Flows (e.g. Searching, Token Generation, Save Playlist, etc.)

• _Score Level: 4/4
• _Comment(s): Nice job conquering this part of the project! You used requests correctly and made the right API calls to the Spotify API.

Criteria 3: Proper JavaScript and JSX Syntax and Formatting

• _Score Level: 4/4
• _Comment(s): You show a clear understanding of the React fundamentals. Great job using props, binding methods, passing props, rendering children and more. Your indentation was off in a few places. Make sure you lookout for that and fix it where you see it.

Criteria 4: Implementation Adheres to DRY Principles

• _Score Level: 4/4
• _Comment(s): You reused components properly.

Overall Score: 16/16

You did a great job on your project. Nice job using requests in your Spotify.js file and having the patience to figure out the hard parts. In your component files you did a great job using off you understand how to use React. Great job updating state, binding methods, using props, rendering children and more. Lastly, great job getting your project hosted with Surge. All in all, you showed that you put a lot of effort in this project and you did a really good job.

Use Window.sessionStorage. See https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage for detail.

the first time a user searches for a song, album, or artist, Spotify will ask them to log in or set up a new account. You will need to follow the steps in the Spotify Developer Guide to register your application.

a user can type the name of a song, artist, or album into the search bar and click the SEARCH button. The app will request song data about the user’s input from the Spotify library (find Spotify endpoints here).