Echo

Music player web app

Personal project

2018

The idea of Echo is to let users explore previews of the top 100 songs of each country. The actual concern with Echo is to set functionalities like letting users save their favorite songs along with the name of the singer and the song's title to later search for the full version.

scroll

THE TECH BEHIND THE WEBSITE

The goal was to create a music streaming app like Spotify and Deezer but I also had a huge prefrence to the way Soundcloud translated the songs into visual waves in their players' UI. Now with that idea in mind I problem was finding an API that will provide me with the songs and also find a solution to transform the songs into visual waves in the player ui section. The first solution was using a Deezer api to get 30 second previews of the songs, on the other hand this data coming from the api had to be shared with different components of the app, therefore using Redux and the middlewear Redux-thunk is a good solution, because the middlewear handles actions that need an api call to be made and dispatch it depending on the results of the api. To translate the songs to visual waves and set an authentification system for users, the library WavesurferJs was implemented for songs to visuals translition and Firebase was used as a solution for the authentification, backend, and deployment needs.
  • ReactJs
  • Firebase
  • Redux
  • Sass
  • Axios
  • WavesurferJs
  • Pose

A MOBILE FRIENDLY APPROACH

In todays digital age, users expect every website to have a mobile version. So companies and developers must try to produce the same if not better experience for users interacting with their site on a mobile device. This project helped me understand how a professional team translates a desktop site into a mobile device.