{"id":15371102,"url":"https://github.com/jch254/audio-insights","last_synced_at":"2025-04-15T14:03:12.996Z","repository":{"id":74458362,"uuid":"59031508","full_name":"jch254/audio-insights","owner":"jch254","description":"Audio insights derived from your Spotify library using React and Redux-saga","archived":false,"fork":false,"pushed_at":"2023-07-22T02:51:25.000Z","size":268,"stargazers_count":65,"open_issues_count":17,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T20:51:18.679Z","etag":null,"topics":["immutablejs","music","react","redux","redux-saga","spotify-api"],"latest_commit_sha":null,"homepage":"https://audio-insights.603.nz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jch254.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-17T14:49:36.000Z","updated_at":"2024-06-05T04:36:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"9e7e9b9f-17c5-454e-b22d-4afba9c82e3f","html_url":"https://github.com/jch254/audio-insights","commit_stats":{"total_commits":75,"total_committers":2,"mean_commits":37.5,"dds":"0.013333333333333308","last_synced_commit":"c10b0ca33b0fb7017bf70272f17c1c613c34afb3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Faudio-insights","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Faudio-insights/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Faudio-insights/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jch254%2Faudio-insights/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jch254","download_url":"https://codeload.github.com/jch254/audio-insights/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249085456,"owners_count":21210267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["immutablejs","music","react","redux","redux-saga","spotify-api"],"created_at":"2024-10-01T13:45:25.775Z","updated_at":"2025-04-15T14:03:12.981Z","avatar_url":"https://github.com/jch254.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Audio Insights](https://audio-insights.603.nz)\n\nI built this web app teach myself about front-end development with\n[React](https://facebook.github.io/react/) and [Redux](http://redux.js.org).\nFor a long while I've yearned for an enjoyable, fast and understandable way to create\nUIs for APIs that I build. I've experimented with various other frameworks/tools\nbut none resonated with me like the React/Redux combo. The community around these\ntechnologies is outstanding.\n\nThis app connects to the [Spotify API](https://developer.spotify.com/web-api/) using the Implicit\nGrant Flow to authenticate. I'm a hobby musician with a deep interest in music and music production.\nI thought it'd be an interesting project to present the data available from the Spotify API in\nvarious ways.\n\nI aimed to keep things simple, avoid reinventing the wheel and embrace essentialism (use as little\nas possible). Using a component library ([Rebass](http://jxnblk.com/rebass/)) proved invaluable. I\nwas able to concentrate on 'business logic' yet still create something presentable. I also focused\non using React and Redux best practices and making the app as responsive as possible.\nThis project was written with a functional mindset with help from Immutable.js and Reselect for efficient client-side data manipulation.\n\n![Mosaic](https://img.jch254.com/Mosaic.png)\n\n![Modal](https://img.jch254.com/Modal.png)\n\n![Recommended](https://img.jch254.com/Recommended.png)\n\n![Artists](https://img.jch254.com/Artists.png)\n\n## Main Technologies Used\n\n* [React](https://facebook.github.io/react/) (ft. various packages)\n* [Redux](https://github.com/reactjs/redux/) (ft. various middleware)\n* [Redux Saga](https://github.com/yelouafi/redux-saga/)\n* [Immutable](https://github.com/facebook/immutable-js/)\n* [Rebass](https://github.com/jxnblk/rebass)\n* [Webpack](https://github.com/webpack/webpack)\n* [Node.js](https://github.com/nodejs/node)\n\n**SPOTIFY_CLIENT_ID, SPOTIFY_SCOPES and SPOTIFY_CALLBACK_URI environment variable must be set before `yarn run` commands below.**\n\nE.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`\n\n## Running locally\n\n1. Create a new [Spotify API app](https://developer.spotify.com/my-applications)\n1. Add http://localhost:3001/spotifylogincallback as a Redirect URI for your newly created app (don't forget to press save)\n1. Run the following commands in the app's root directory then open http://localhost:3001\n\n```\nyarn install\nyarn run dev\n```\n\n## Building the production version\n\n1. Run the following commands in the app's root directory then check the /dist folder\n\n```\nyarn install\nyarn run build\n```\n\n## Deployment/Infrastructure\n\nRefer to the [/infrastructure](../master/infrastructure) directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjch254%2Faudio-insights","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjch254%2Faudio-insights","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjch254%2Faudio-insights/lists"}