Web Application that represents a music player using the API, , , , , , , , and other technologies. Made by Yohan Hmaiti

(For Learning Purpose Only, all personal tokens were removed including spotify dev ID and Firebase tokens!)

Summary

-This project was bootstrapped with Create React App.

-This app represents a music player using the spotify api with additional edits.

-The main technologies used are ReactJS, React Context API, JS, CSS, HTML, JSON, Firebase, material-UI, nodeJS...

-The app allows paying song in real time with the spotify app, for example stopping the song on your spotify app will also stop it here. Same foes for playing it and volume adjustment wise.

-This app doesn't allow sharing song in real time with friends nor having access to friends current listening or so..[actions are limited to the ones mentioned in the login oath page]

-The app allows importing the playlists the user has on spotify, his liked songs, discover weekly and allows a dynamic iteration through the songs and also enables the user to use the search bar as in spotify.

-The app allows the user to login with their spotify account through the spotify api in order for the app to gather information such as: playlists, last songs and so on...

-The app allows liking songs, following artists, sharing songs and so on...

• When the log in button is clicked, the user is redirected to a spotify page to connect based on the desired method and through oath, the user will also have the terms and conditions that this app has along with the spotify ones.

#NOTE:

This app was made for solely developing skills and advance learning of the tools mentioned, the app was disabled for privacy purposes (the spotify dev credential token was removed and the firebase hosting was disabled temporarily), if the program is used by anyone for any purpose they are responsible for the outcome on their own.

->next: I am hoping to work on a database for the app to allow the log in of several users at once and solidify the storing and manipulation of the users tokens after their login. In addition, to also be sure that I can deploy the website safely.

#Snippets:

=>first login page:

=>login page(sample using me as a test user) and reflects the specific terms and conditions while taking the user's oath adn agreement:

=> Then, the user lands automatically on the discover weekly page of his spotify account, the navigation is dynamic and the search bar also, the main commands of liking and navigating songs were implemented, along with the sidebar pannel that has albums and playlists, the only command not added was the download button and the friends viewing part...