graeme-code/jamming

Codecademy React Course Final Project

jamming's Issues

Summary (Feature Request)

Rubric Score

Criteria 1: Objective

• Score Level: 4/4 (Exceeds Expectations)
• Comment(s): Your objective is a great one. It is always great to be able to listen to something before saving it to a playlist, so being able to do this is a great UX improvement. Nice work!

Criteria 2: Background

• Score Level: 3/4 (Meets Expectations)
• Comment(s): Your background section is good. It provides a detailed explanation of the pain point this feature is addressing. You also gave a good summary of the overall functionality of the feature within the app.

Criteria 3: Technical Design

• Score Level: 3/4 (Meets Expectations)
• Comment(s): You did well with your technical design section. You described how you would retrieve this data from the Spotify API and what parts of your existing Spotify API code you would need to modify. You also did well describing what components of the app would need to be modified in order to accommodate this new "play preview" feature. Good work!

Criteria 4: Caveats

• Score Level: 4/4 (Exceeds Expectations)
• Comment(s): You did a good job thinking about the potential caveats of this feature. You proposed a better UI for this preview functionality in the form of a button rather than a link. You also covered the edge case where no preview url will exist for a particular track and described how you would alter the UI to accommodate this. Good job!

Overall Score: 14/16

Overall, you did a great job with this feature request. You chose a feature that would greatly improve the UX of the app and explained the necessity for this feature clearly and concisely. You also did well in detailing the specific aspects of the technical implementation and what caveats you might encounter with your initial implementation. Nicely done!

Summary

Rubric Score

Criteria 1: CRA Project Creation & Structure

• Score Level: 4/4 (Exceeds Expectations)
• Comment(s): Your file structure is good. You made a CRA app and all of the components are properly located inside of folders, with the file paths working as well. Nice work!

Criteria 2: Data Flow

• Score Level: 3/4 (Meets Expectations)
• Comment(s): You met most of the requirements for data flow within the app. You did well working with Spotify and showed good understanding of how it worked. Your search functionality was well done and your playlist manipulation was also great. Nice work!

Criteria 3: Syntax

• Score Level: 3/4 (Meets Expectations)
• Comment(s): You hit upon all of the syntax requirements here. You used className when applying classes and used JSX instead of pure HTML. You added a reset.css properly and keys to each of the tracks in your track list. Lastly, you wrote elegant code for adding and removing the tracks, though you need to be careful of mutating state directly. You pushed a new track into the playlistTracks property on state, but it being an array means that you were modifying state directly. You should create a copy of the array first, then modify it and set it back to state. Other than that, nice work!

Criteria 4: DRY Code/Style

• Score Level: 3/4 (Meets Expectations)
• Comment(s): You did well keeping your code "DRY." One place that you could have improved this is in your Spotify file. Here, you could have separated out the beginning of the API urls into a variable. This would allow you to change the base url of the API for all endpoints that used it by writing once, instead of updating each method separately. Good job otherwise.

Overall Score: 13/16

Overall, you did a great job with this project. You implemented all of the features of the project and wrote "DRY" code. Your data flow through the app was great and you did a good job working with the Spotify API. A lot of learners experience trouble when working with Spotify, so it is great to see that you were able to get it. Awesome work!