Jammming
React JS Development, User Interface Design, CSS, HTML
Jammming is a simple front-end React application that helps you quickly add playlists to your Spotify account. Who thought creating playlists could be this easy?
Jammming is a simple front-end React application that helps you quickly add playlists to your Spotify account.
Under the Hood
Jammming connects with a user’s Spotify account using an implicit grant authorization flow. There are six major React components that serve as the backbone of the application. The Track component configures the UI and logic for individual Spotify tracks. Individual tracks are then aggregated using a TrackList component, which is displayed in the render method of the SearchResults component.
The SearchBar component fetches the Spotify API and helps populate SearchResults with relevant tracks. Tracks can then be added to the Playlist component and easily pushed to the user’s Spotify account. Finally, the App component constructs the final user interface by rendering the SearchBar, SearchResults, and Playlist components.
Improving User Experience
Spotify’s implicit grant flow requires the user to type in a search query, leave the Jammming application for Spotify account authorization, and then return when authorization is complete. This process requires the user to enter their search query twice and makes the application harder to use.
To simplify the user’s experience, I created a Feature Request that provided a background to the problem and technical details to fix it. With research and testing, I designed a better authorization flow that makes Jammming easy to use.
First, I added a Modal component that renders only if the cookie “loggedIn” is false. When the user connects to Spotify through the full-screen Modal window, they are redirected to Spotify to authorize their account and Jammming updates the “loggedIn” cookie to be true.
If “loggedIn” is true, Modal returns null and App renders as normal. A new TopBar component will also confirm for the user that their Jammming application is successfully connected with Spotify.
A Note on Development
The concept and framework for Jammming were first created by Codecademy. Completing this project is part of their Web Development career path. The Feature Request, Feature Request components, and Modal wireframe are unique to me.
