This application allows a user to play a music video from YouTube and see the chords for the song in sync with the music, using the Riffstation API.
"autoprefixer": "^7.2.5",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"mocha": "^5.0.0",
"polished": "^1.9.0",
"postcss-loader": "^2.0.10",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-slick": "^0.16.0",
"react-youtube": "^7.5.0",
"style-loader": "^0.19.1",
"styled-components": "^3.0.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
To install dependencies, run npm install.
To run in a local environment with file watching and live reloading, run npm run watch
Below are the enhancements I would have made if I had more time for the project.
- Custom video controls
- Error handling when a search yields no results from Riffstation
- Better mobile experience
- Left handed chord diagrams
- Ability to rotate chord diagrams depending on users preference
- Ability to enter a playlist id
- Add more unit tests