Light

gillkyle / synthetic Goto Github PK

View Code? Open in Web Editor NEW

15.0 1.0 1.0 21.01 MB

Spotify integration and song analytics visualization

Home Page: https://synthetic.netlify.com

License: MIT License

HTML 1.44% CSS 12.61% JavaScript 85.95%

react spotify-api javascript-client data-visualization jamstack

synthetic's Introduction

Synthetic

A client-side React app for discovering music

Setup

Clone this repo to your desktop and run npm install or yarn install to install all the dependencies.

Deployment

Run npm run build or yarn build to create the build folder for deploys

You can run the build files on a static server by first installing serve

npm install -g serve

and then running:

npm install -g serve
serve -s build

Built With

React - UI and state management
Spotify Web API - API data
Yarn - dependency management

synthetic's People

Contributors

Stargazers

Watchers

Forkers

msshw

synthetic's Issues

Playlist description

Save object in the state with all the filtered selections in a calculation to save in the playlist description

Genre list (max options)

Max selections isn't configured correctly, hacky fix is temporarily making it so only 3 genres can be selected, but you can't remove genres after you get to 3

Cut off genres after you add more than 5 while processing the request? Give a warning if they add more? Maybe not the best fix but might work for now.

Broken loading

Adding genres without logging in (params.access_token is null) gets stuck in infinite loading

Conditionally render genres section?
Add in the playlist selector and make the whole library the last option?

Null song previews

Songs are put into the queue that don't have a 30 sec preview. Poor UX to have so many.

Maybe cut out songs from the object that have a null value?

Genre filter

Turn off the radio button for genres and it'll submit a bad request

No-op unmounted state

Debug error when calculating with the api call

Maybe just get rid of the player tracking and time stamps for simplicity

Curated playlist selection

Make some sort of arrow based selection carousel to choose a playlist to query from.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.