This project is an example React JS web app that connects to Spotify and retrieves the albums for a given artist, retrieves the album details and tracks for a selected album, and plays an audio preview for a selected track.
It is a simplified example. Typically you would add a data architecture such as Redux for managing state in a more complete way instead of only at the top-level component, and add URL routing with something like React Router.
This project was bootstrapped with Create React App. This setup a basic React template as well as all of the Node modules and configuration for Webpack, Babel, and other build tooling, so it is a great way to hit the ground running with a new app.
I have intentionally excluded my Spotify developer account's Client ID and Client Secret from the source code. You'll need to create your own developer account (it's free) and add your application to that account.
You will then need to add your own Client ID and Client Secret to a file you create under src/constants named config.js:
export const CLIENT_ID = 'your-client-id-here';
export const CLIENT_SECRET = 'your-client-secret-here';
This project uses JSX for its HTML output, and JavaScript ES2015, if you aren't familiar with some of the syntax.
The React Developer Tools Chrome extension can be very useful for troubleshooting and reviewing each component's props, state, and structure.
