Inspiration

During quarantine, it can be easy to listen to the same songs on repeat. However, we wanted a new way to generate similar music that we listened to in a smooth and simple way.

What it does

Melloweather makes a playlist based on your top artists and the weather near your current location. Alternatively, you can select "Surprise Me", and you will be given a playlist based on the weather of a random location in the world.

It makes finding new music fun!

How we built it

For the back-end, we used Express.js and Node.js, as well as data from the Spotify API, the MetaWeather API, and the PositionStack API for geolocation purposes. We also applied for authorization for our app on Spotify in order to approve user authentication. For the front-end, we used React.js with Axios to access data from the back-end server and the Framer Motion Library in order to create streamline animations throughout the web-app.

Challenges we ran into

User authorization was difficult to handle, especially the process of initializing and preserving the tokens to access the Spotify API to access personal information. Another challenge was connecting the front-end and the back-end with Axios because we built them independently. Lastly, deployment was an issue, because our team members were inexperienced with the process (however, it was a fun learning experience!)

Accomplishments that we're proud of

The UI is clean and minimalistic while preserving the primary functionalities of the web-app. We are proud of incorporating weather, user listen-history, and track valence (mood: happy/sad) to create a personalized and relatable playlist. We would actually listen to these recommended songs! :)

What we learned

We learned about the Spotify authentication process and token retrieval to access needed data. Furthermore, our front-end developers gained more experience using React.js to create a memorable UI. We also learned how to connect the back-end and the front-end as well as how to deploy our app via Heroku.

What's next for Melloweather

We plan on incorporating the Google Maps API so that the user can select any location on a map to the input. We also want to try customizing more moods that associate with the weather that will better suit the user's interest.

Built With

+ 22 more
Share this project:

Updates