A Music App Allows Users To Listen, Explore And Search For Their Music !
Go to the app »
Melodies App Back End
·
API URL
Table of Contents
Melodies is a music app that allows the user to listen, explore and search for their music (the data will be fetched from a third-party API). And the user can click on a (heart icon) to store her/his favorite song so s/he can reach it easily. Also, there's a (plus icon) with a dropdown list so the user can add the song to one of her/his pre-created playlists. and if s/he doesn't have there's a button to redirect them to add playlist page. Also, the users can add their own custom song by filling the form if it's not in the API. The user also can delete/unfavorite, edit their song/playlist.
Here are the technologies we used building this app.
- React
- JS
- Axios
- React Bootstrap
- Material UI
- Material Kit React Creative Tim
- React Icons
- HTML
- CSS
- SCSS
- JSS
link to User Stories
link to Wireframes
- Go to https://cors-anywhere.herokuapp.com/corsdemo and press : Request temporary access to the demo server.
- Create env variable to store the API URL.
$ nano .env.local
- then add this to the .env.local file.
REACT_APP_Back_END_URL=https://cors-anywhere.herokuapp.com/http://melodieswebapp-env.eba-kgzwebax.us-east-2.elasticbeanstalk.com/
- Open the app from https://pages.git.generalassemb.ly/xloli20/MelodiesAppFrontEnd/
We begon with brain storming to define the main idea of the project and exploring APIs to find an appropriate one to use it on our app.Then we listing the user stories .Then we jumped to design our wireframes and relational database using (ERD) model. We choose the Deezer API to use it in our app and we implement it in the front end and implement the search functionality for it.Therafter we started with the websit's backend that illustes the Models, then adding the routes in Controllers and test them in Postman and if it is done successfully, add it to the front end React App. And at the end we design the pages using outsource template (Material Kit React Creative Tim), SCSS, CSS, and Bootstrap.