Jammming

CodeCademy Intensive Course

Tags: Build Front-End Web Applications from Scratch

Index

1. Features

Below is a list of the website's features:

* Spotify Login — 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 --> https://developer.spotify.com/web-api/tutorial/ to register your application.
* Search by Song, Album, or Artist — 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 --> https://developer.spotify.com/web-api/endpoint-reference/ ).
* Populate Results List — Jammming displays the list of returned tracks from the user's query.
* Add Song to a Custom Playlist — users can add a track to their playlist by selecting a + sign on the right side of the track's display container.
* Remove Song from Custom Playlist — users can remove a track from their playlist by selecting a - sign on the right side of the track's display container.
* Change Playlist Title — users can change the title of their custom playlist.
* Save Playlist to Account — users can save their custom playlist by clicking a button called SAVE TO SPOTIFY.

2. Requirements

* What components does the application need?

App.js
- SearchBar.js
- SearchResults.js
  - TrackList.js
    - Track.js
- Playlist.js
  - TrackList.js
    - Track.js
- Spotify.js

* How will the application handle state?

State will be handled by the App.js component. State flow SearchResults:

The Spotify.js component will be envoked by App.js and the information will be "state'd" in the same
App.js "props" the information to SearchResults.js
SearchResults.js "props" the information to TrackList.js
TrackList.js "props" the information to Track.js

State flow Playlist:

The Spotify.js component will be envoked by App.js and the information will be "state'd" in the same
App.js "props" the information to Playlist.js
Playlist.js "props" the information to TrackList.js
TrackList.js "props" the information to Track.js

The following link explains a lot in terms of the state of a component: How to handle state in React. The missing FAQ.

* What methods does the application need?

App.js
- .addTrack
- .removeTrack
- .updatePlaylistName
- .savePlaylist
- .search
SearchBar.js
- .search
- .handleSearch
SearchResults.js
TrackList.js
Track.js
- .addTrack
- .removeTrack
- .renderAction
Playlist.js
- .handleNameChange
Spotify.js
- .getAccessToken
- .search
- .savePlaylist

* How does the application hook up to the Spotify API?

Spotify: Authorization Guide
Spotify Endpoint: Search for an item

Via implicit grant flow.

* How does the application save a playlist to a user's profile?

Spotify: Working with Playlists
Spotify Endpoint: Create a Playlist

3. ToDo

Release for approval

4. Lessons learned

React children that will be used by two or more React parents (see Tracklist.js: it will be used by SearchResults.js and Playlist.js)
State and props in React components
Add and remove different things trough props/state
Handle API requests (was a tough one...)

mattrudin / jammming