https://github.com/jch254/audio-insights
Audio insights derived from your Spotify library using React and Redux-saga
https://github.com/jch254/audio-insights
immutablejs music react redux redux-saga spotify-api
Last synced: 11 months ago
JSON representation
Audio insights derived from your Spotify library using React and Redux-saga
- Host: GitHub
- URL: https://github.com/jch254/audio-insights
- Owner: jch254
- License: mit
- Created: 2016-05-17T14:49:36.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-07-22T02:51:25.000Z (over 2 years ago)
- Last Synced: 2025-03-28T20:51:18.679Z (12 months ago)
- Topics: immutablejs, music, react, redux, redux-saga, spotify-api
- Language: JavaScript
- Homepage: https://audio-insights.603.nz
- Size: 262 KB
- Stars: 65
- Watchers: 5
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Audio Insights](https://audio-insights.603.nz)
I built this web app teach myself about front-end development with
[React](https://facebook.github.io/react/) and [Redux](http://redux.js.org).
For a long while I've yearned for an enjoyable, fast and understandable way to create
UIs 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.
This app connects to the [Spotify API](https://developer.spotify.com/web-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](http://jxnblk.com/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.
This project was written with a functional mindset with help from Immutable.js and Reselect for efficient client-side data manipulation.
## Main Technologies Used
* [React](https://facebook.github.io/react/) (ft. various packages)
* [Redux](https://github.com/reactjs/redux/) (ft. various middleware)
* [Redux Saga](https://github.com/yelouafi/redux-saga/)
* [Immutable](https://github.com/facebook/immutable-js/)
* [Rebass](https://github.com/jxnblk/rebass)
* [Webpack](https://github.com/webpack/webpack)
* [Node.js](https://github.com/nodejs/node)
**SPOTIFY_CLIENT_ID, SPOTIFY_SCOPES and SPOTIFY_CALLBACK_URI environment variable must be set before `yarn run` commands below.**
E.g. `SPOTIFY_CLIENT_ID=YOUR_CLIENT_ID SPOTIFY_SCOPES="user-top-read playlist-modify-private" SPOTIFY_CALLBACK_URI="http://localhost:3001/spotifylogincallback" yarn run dev`
## Running locally
1. Create a new [Spotify API app](https://developer.spotify.com/my-applications)
1. Add http://localhost:3001/spotifylogincallback as a Redirect URI for your newly created app (don't forget to press save)
1. Run the following commands in the app's root directory then open http://localhost:3001
```
yarn install
yarn run dev
```
## Building the production version
1. Run the following commands in the app's root directory then check the /dist folder
```
yarn install
yarn run build
```
## Deployment/Infrastructure
Refer to the [/infrastructure](../master/infrastructure) directory.