I built this web app teach myself about front-end development with React and Redux . For a long while I’ve yearned for an enjoyable, fast and understandable way to create front-ends for APIs that I build. I’ve experimented with various other frameworks/tools but none resonated with me like the React/Redux combo. The community around these technologies is outstanding, something I feel back-end technologies sometimes lack. I haven’t had this much fun writing code in a while!
This app connects to the Spotify API using the Implicit Grant Flow to authenticate. I’m a hobby musician with a deep interest in music and music production. I thought it’d be an interesting project to present the data available from the Spotify API in various ways.
I aimed to keep things simple, avoid reinventing the wheel and embrace essentialism (use as little as possible). Using a component library ( Rebass ) proved invaluable. I was able to concentrate on ‘business logic’ yet still create something presentable. I also focused on using React and Redux best practices and making the app as responsive as possible.
I’d be thankful for any feedback or suggestions. I look forward to applying the skills I’ve acquired building this app on future projects.
- Redux (ft. various middleware)
- Redux Saga
- React Router
- React Motion
- Few more tings…
- Clone this repository
- Create a new Spotify API app
- Add http://localhost:3001/spotifylogincallback as a Redirect URI for your newly created app (don’t forget to press save)
- Copy configExmple.js to config.js (gitignored)
- Update the newly copied config.js with your Spotify API app’s Client ID
- Run the following commands in the app’s root directory then open http://localhost:3001
npm install npm run dev
Building the production version
- Update config.js with your production config values
- Run the following commands in the app’s root directory then check the /dist folder
npm install npm run build