mood(x)

Inspiration

Inspiration came from building off each others ideas for a project idea. We first chose to tackle the productivity, beginner, and web dev tracks. After we decided our target audience was going to be college students. We began to brainstorm what a college student would like and want in their daily lives. We would list different aspects of our lives, and things we wished we had. Things mentioned were: habit tracker, sleep tracker, financial tracker, calorie tracker, study tool, mood journal, and playlist generator. After discussions, we found that a web app that can recommend us music through the weather would be useful and a unique idea. Weather is directly tied into our mood and we also pulled inspiration from Spotify Daylist. It is created by spotify to recommend songs based of what you have been listening to for that day.

What it does

Inputting a City will grab the current weather information of that city. Based on the weather condition for that city, a specific web page based on the weather condition will appear. On each of the weather conditions, the next page will show the location you inputted, the weather condition, a quote/helpful tip, songs based off the mood the weather gives, an animated character that changes based on the weather, and theme of website completely changing based on weather. More details of different genres to listen to based on the weather are captured below the main screen as you scroll.

How we built it

We built it using Figma, React, Javascript, Node.js, Vercel, NPM, spotifyAPI, openweatherAPI

Challenges we ran into

Getting github to commit correctly, ran into issues with private emails Struggled to get vercel to display website on domain, had to stick to local host instead Getting authentication to work correctly with spotifyAPI connecting API with front end interface Branching Debugging code

Accomplishments that we're proud of

Proof of concept of being able to use weatherAPI Designs created in Figma Overall work process and flow Communication Project Management

What we learned

We learned full-stack development, project planning, requirements gathering, agile practices, front end design with Figma, working with APIs, creating a web app, hosting a web app, learning new frameworks like React.

What's next for mood(x)

Built With

Submitted to

Hack K-State 2024

Created by

I worked on requirements gathering, project management, backend apis, implementing front end, and initial design

Justin Nguyen
requirements gathering, design, web design in figma, initial design

kiara mcmullen
I hatched the idea of a mood/playlist based off of the weather. Then, during the project process, I learned about all the technologies and APIs to understand the big picture. I helped develop the Spotify API process. It's the first time for everything!

Tony Cao