Melodies App Front End

Melodies App

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

About The Project
- Technologies
- User Stories and Wireframes
Getting Started
- Prerequisites
- Installation
Roadmap
Contributers
Acknowledgements

About The Project

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.

Technologies

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

User Stories and Wireframes

link to User Stories

link to Wireframes

Screenshot of the App

Getting Started

How to run the app

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/

Roadmap

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.

xloli20 / melodiesappfrontend Goto Github PK