gregorynimmo93 / jamming Goto Github PK

Removing the tracks from the search list and adding them back once the user removed them from their New Playlist, is a great idea! It made your application very easy to interact with from the user side. Great job!

Objective Section (4/4):

• The overall goal of the feature request is summarized from the user’s perspective in no more than 2-3 complete sentences.

Background (4/4):

• Detailed explanation of why the feature request is important
• Overview of all essential functionality.

Technical Design (4/4):

• Specify details of how it will be implemented
• Identify new components or modifications to existing components
• Could've included mockups displaying how app will look.

Caveats (2/4):

• No alternative implementation approaches are explained along with their tradeoffs.
• No drawbacks or complications/corner cases are documented.

Total: 14/16

https://github.com/AvatarGreggles/codeAcademy/blob/f9b0dc41833dcd255f0a193f59d7d14e461282a7/src/Components/App/App.js#L81-L87

We can take advantage of ES6's property/value shorthand. You can use this syntax whenever the key and value share the same name. It is considered better practice and your code will look cleaner.

search(term){ 
  
   Spotify.search(term) 
   .then(searchResults => this.setState({ 
     searchResults
   })); 
 } 

Rubric Score

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

• Score Level: 4
• Comment(s): Your folder and files' structure for this Jammming project was consistent and organized well throughout. This made a great experience to navigate through your code and maximized legibility of the code base. I would suggest working on indentation, there are parts in your program where it is a little off. It is important to always keep a good structure in your code, and indentation helps yourself and other developers to read, modify, understand and maintain the program. Having a good structure and organization also, makes your code look cleaner and neat.

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

• Score Level: 4
• Comment(s): All your functions worked as expected! I was able to search for tracks, remove tracks, add tracks, rename the playlist and save it to Spotify 👍 It was great to see that you added more functionality and this made your applicationto be more user friendly. GREAT WORK!

Criteria 3: Proper JavaScript and JSX Syntax and Formatting

• Score Level: 4
• Comment(s): Great job by changing all Class(es) to className. Your HTML was effectively converted to JSX, and good job on adding a key to each track. Remember to use ES6's property/value shorthand, and to be aware of Class vs Functional components options when writing your own code and also when reading somebody else's.

Criteria 4: Implementation Adheres to DRY Principles

• Score Level: 4
• Comment(s): It was great to see that you used map, find, and filter functions in your program, they make your functions to be written simply and not convoluted. As a future goal, try to find places where you can refactor your code. For example, you can save as variables many of the URLs used in Spotify.js

Overall Score: 16/16

The project was implemented successfully. Congratulations 😁👍

https://github.com/AvatarGreggles/codeAcademy/blob/f9b0dc41833dcd255f0a193f59d7d14e461282a7/src/util/Spotify.js#L1-L6

Great job usingletwhen you need to reassign the variable and const when you don`t need to, throughout your program 👏

https://github.com/AvatarGreggles/codeAcademy/blob/f9b0dc41833dcd255f0a193f59d7d14e461282a7/src/Components/SearchResults/SearchResults.js#L5-L15

React Components can be declared both as classes and as functions. Functional components are simpler to define but they lack certain features currently available only to class components, and I suggest you use them unless you need state. You can find more info here!

const SearchResults = (props) => {
  return(
    <div className="SearchResults">
      <h2>Results</h2>
      <TrackList tracks={props.searchResults}
                 onAdd={props.onAdd}
                 isRemoval={false}/>
    </div>
  )
}