神刀安全网

Audio insights derived from your Spotify library using React and Redux

Audio Insights (Live Demo)

Audio insights derived from your Spotify library using React and Redux

Overview

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.

Audio insights derived from your Spotify library using React and Redux

Audio insights derived from your Spotify library using React and Redux

Audio insights derived from your Spotify library using React and Redux

Audio insights derived from your Spotify library using React and Redux

Technologies Used

Running locally

  1. Clone this repository
  2. Create a new Spotify API app
  3. Add http://localhost:3001/spotifylogincallback as a Redirect URI for your newly created app (don’t forget to press save)
  4. Copy configExmple.js to config.js (gitignored)
  5. Update the newly copied config.js with your Spotify API app’s Client ID
  6. Run the following commands in the app’s root directory then open http://localhost:3001
npm install npm run dev 

Building the production version

  1. Update config.js with your production config values
  2. Run the following commands in the app’s root directory then check the /dist folder
npm install npm run build 

Good times!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Audio insights derived from your Spotify library using React and Redux

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址