WeatherWear

Inspiration

beep beep beep beep beep… You hit your alarm, open the weather app… 56 degrees. You roll out of bed, feeling disoriented, and head over to your closet, just as confused as to what clothes are appropriate for the weather today. We designed WeatherWear to streamline your morning routine. Gone are the days of deciphering what you should wear in 56-degree weather and running out of the house 15 minutes later than you wanted to. Gone are the days of dressing for the chilly morning and dripping sweat by 2pm. WeatherWear will help you decide what clothes you want to wear, anywhere.

What it does

Given an individual’s current zip code, the web app takes the current temperature from Open Weather API, and WeatherWear will generate a variety of weather-appropriate outfits for the user to wear!

How we built it

The WeatherWear website was built on HTML, CSS, JavaScript, and Bootstrap to present a minimalist interface that is straightforward in presenting its functionality and easy for users to use
We incorporated JavaScript with our HTML/CSS to take inputs for the user and then display their name, location, and the temperature.
The website remembers user’s information in their local storage to allow easy and repeat access
Open Weather API provides up-to-date weather information each time user visits the website
We created a database using Google Cloud Firebase to support the outfit database
Data from open source APIs and secured Database was administered with REST API
Randomization function was also implemented to provide users with more choices of outfit sets
Our website is currently hosted by Domain.com under “weatherwear.tech”

Challenges we ran into

We initially had issues connecting the information in our Firebase database to our web app. This prevented us from generating images of weather-appropriate outfits. However, after much persistence, testing, and help from mentors we managed to successfully link our website and database together!
We also struggled with the JavaScript of the submit form and storing the user inputs when the user did not enter a proper value, but we were able to resolve this issue through careful debugging.

Accomplishments that we're proud of

We are really proud of taking this project from a mere idea to an actual web application that will continue to be in progress as we add new features. The process took a lot of learning, with all of us trying and figuring out new things together. We’re proud to have learned how to use Firebase, an entirely new tool for all of us, and to have integrated the database we created. Additionally we love the interactive and responsive front-end design we were able to create in such a short time-frame through HTML, CSS, and JavaScript. Last but not least, with a hybrid team that is both in-person and virtual, we are super proud of the team collaboration and open-communication that took place amongst four strangers over the last 36 hours.

What we learned

We learned to brainstorm, plan, and ultimately bring our ideas to life as a team! Despite any challenges we had, we learned to support each other with encouragement and by switching off on tasks. We all kept an open mind and explored new programming languages and tools. We also had a hybrid team with both in-person and virtual members, so we learned to communicate effectively and ensure that everyone is included. Finally, we learned to have fun with our project and celebrate each other’s achievements!

What's next for WeatherWear

Provide the user with customized outfits based on the preferences they can select—for example, gender, fashion style, events, and whether they feel cooler or hotter than the average person
Allow users to input a username and password to create an account so that their data can be saved for future visits to the site
Implement a feature where users can add images of their own clothes to the database so the output of the app are clothing items they can actually wear
Update algorithm to take into account the change in temperature throughout the day, if it’s going to rain/snow, and how long the user intends to stay outside
Use AI to learn what the user likes and curate the outfits accordingly
Use Twilio to send daily notifications at their preferred time