Weather Jukebox - intro

Our project will retrieve the users location (via geolocation or user input) and give music suggestions based on the current weather.

The app takes weather info from OpenWeatherMap's API, gets song info from Deezer's API and finally plays music using a player from Deezer.

Awesome, how do I try it out?

No configuration is needed on the user side - just press the hamburger menu in the top left corner, create an account, log in and get Jukebox'd!

The app is deployed using Firebase and can be found here.

Screengrabs from the app:

The front page. Location can be entered via the text box or retrieved automatically via the location button.

A song result for someone in Dallas. Add will put the song in the user's list of liked songs. Dislike will blacklist the song, to ensure it is not suggested again. Reroll will re-render so that a new song is generated.

The pages in the user section. Note that the user can play their previously liked tracks and also manage history, liked tracks and disliked tracks. The history can be cleared, if the user wishes to do this.

The menu changes dependning on wether the user is currently signed in or not. This is a Firebase feature.

Login, signup and "forgot my password" pages. If a user forgets his/her password, they can enter their email address and have a reset link sent to them.

About the actual work

• What we have done
• A welcome page where the user can type in their location or have it decided by geolocation and then press "get jukebox'd" to get a music suggestion.
• A 'user' section where the user can se their saved and disliked ("blacklisted") tracks. The user can also remove tracks from either of the lists. The section consists of two views/pages.
• A loading screen, present while fetching data from the Deezer API.
• A 'jukebox' page, that plays music for the user and displays information about weather and genre. The user has the ability to add the song to their favourites list or add it to a blacklist to ensure that this particular song is not suggested again.
• Users are able to play liked tracks again.
• Users are able to create an account and log in via Firebase.
• User data is stored using Firebase.
• Our project file structure (images are ignored)
• The "public" folder
• 404.html - automatically generated by Firebase.
• index.html - the foundation on which the app rests.
• The "src" folder
• App.css - empty css file.
• App.js - acts as router for the app.
• data/WeatherModel.js - this handles all of the logic for the app, such as generating songs, communicating with API's and such.
• data/GenreMatches.js - Contains info about genres matched to weather id's.
• Fonts/LemonMilk.otf - a nice font we use in the app.
• firebase/auth.js - js file for authenticating to Firebase during login, logout, account creation and resetting forgotten passwords.
• firebase/firebase.js - Initializes Firebase and downloads user data from the realtime database.
• index.css - empty css file.
• index.js - browser router.
• Jukebox/Jukebox.css - css file for the Jukebox view.
• Jukebox/Jukebox.js - Handles everything for the Jukebox view.
• Jukebox/loading.svg - Pacman for when the app is loading.
• User_all/User_all.css - handles css for the User_all view
• User_all/User_all.js - favourites and blacklist view for the user page.
• User_main/User_main.css - css for the User_main view.
• User_main/User_main.js - main view for the user page.
• User_main/User_login.css - css for the User_login view.
• User_login/User_login.js - main view for the login screen.Note that similar files are available for signup and "forgot password".
• Welcome/Welcome.css - handles css for the front page.
• Welcome/Welcome.js - this is the first page that the user is presented with when using the app.