Music Detective is an interactive Web Application inspired from the blind test game.
Please find and join our website to try and give us some feedback about the website.
Demo : https://musicdetective.vercel.app/
Homepage
A full dynamic playlist choice
The play interface, you can guess song and get some autocompletion.
A full profil page, where you can find all you statistics
A admin page for modify playlist, update song..
The Frontend is developped with ReactJS as Javascript Framework. We used React Router Dom, Redux and JS-Cookies as library. The Music player is create with the library "React Player".
Note that we decided to use the less library possible to improve the performence of the app.
To design the app we firstly worked on Figma to imagine the general design we wanted, you can find the figma project here.
Note that the project is prototype and was modified during the coding part.
All The Website was design without framework, only using SCSS.
The Frontend is host with Vercel.
You can find the full frontend project here or click on the submodules at the top: https://github.com/alchambron/Frontend-Music-Detective
For the Back End we used Ruby on Rails as API. The database is on PostgreSQL. We used the gem "Yt", to fetch data easily on the backend and saved the song on base.
The Backend is host with Heroku.
You can find the full backend project here or click on the submodules at the top : https://github.com/alchambron/Backend-Music-Detective