OutWeather is a web application that helps users determine what to wear and what accessories to bring with them when they go outside. The app advises users of the weather conditions and suggest an ideal outfit so that they are prepared. We designed a clean and simple UI to make it easy to use. Users can enter their location, and the app will then proceed to display details on the weather, as well as a full outfit.
Download all necessary files:
$ pip3 install -r requirements.txt
After installing the packages, run the app locally:
$ python3 controller.py
Paste http://127.0.0.1:5000 into your browser and click the "Get Started" button. Enter your city on the second page to see your outfit. If you want a new outfit, simply click the red "New Outfit" button. Stay warm while looking cool 😎
Paulina Khew, Daniel Kim, and Ahmad Chaudhry created this project while participating at Hack the Valley. Paulina created the Flask app, Ahmad worked with the API from openweathermap.org, and Daniel was in charge of the UI/UX. We all worked on the HTML/CSS as well as the outfit suggestions that are generated using Python.
These are the people that made this project in alphabetical order:
@ahmadtc1 | @dannyhkim | @Paulinakhew |
---|---|---|
Hack the Valley is a 36 hour hackathon at the University of Toronto Scarborough Campus. Check out their menu at https://hackthevalley.io/.
Everything on this app was designed from scratch by @dannyhkim. He created the logo using Illustrator and then designed the user interface of the app using Figma. Our team then used HTML and CSS to make his vision come to life!
Although we have created a fully functioning app, there are many things we can build upon to improve the UX and additional features we can add. We hope to expand on the different types of clothing suggested, and give different outfits for men and women. If you have any suggestions, feel free to open up a GitHub issue for us! ❤️
The next page is where the app prompts you to enter your city.
The last page is where you receive your outfit suggestions! You can even reload the page using our button to get different suggestions.