WxWatcher

Inspiration

With the onset of global warming, the US has had much more variable weather recently than in the past. This means large daily temperature ranges, fast-approaching natural disasters, and overall more dangerous and unpredictable weather. Areas that are usually dry have seen increases in hurricane and tornado activity, while areas that expect scattered storms have seen drought. These unexpected conditions can change rapidly, especially in places like Maryland, and it has become significantly more important for safety and decision-making to have quick access to informative weather data. Many widely used weather apps and channels either give basic numbers and expect you to be able to make decisions with them or give complex maps and jargon that are hard to understand and interpret for the big picture. Our inspiration came from these problems, and in order to solve them, we combined widely used weather statistics with real-time crowdsourced subjective user data on the effects of local weather so that people can actually create the link between basic numbers and the real personalized effects. This will give users an idea of what the exact conditions are at any given time, and how dangerous those conditions can be. The site allowed users to reach a level of assurance that no other app can give, and this is essential to protecting the safety of our infrastructure, agriculture, and most of all, our families and loved ones.

What it does

WxWatcher displays commonly understood weather statistics and alerts, combined with a platform to send and receive updates on real-time conditions and real-time weather effects for your local area. The home page displays the temperature, wind speed, and how clear the skies are for your current time and location as well as each hour for 6 hours past. Additionally, we have real-time alerts (Tornado Warning, Severe Thunderstorm Warning, etc.) that give the name of the approaching storm and the time frame for which it is expected to last.

Next, we have a “Critical Updates” page that serves as a forum for users to send short messages and updates about inclement weather conditions they are facing right now and the negative effects that are being caused by them. As users in your area post messages, the messages will show up based on the distance away and time of the post, in order to notify you about these conditions and effects. You, the user, can set a threshold for the maximum radius around your location which you want to receive data from. We also established a credential system, where, based on the number of posts with a certain number of likes you have, your public ranking icon on each post can level up to show others that you are more trustworthy. If a storm heading towards you had a tornado that was visible, you could see other users talking about it to warn you to take shelter now. This helps improve communication, improve trust in meteorologists and the National Weather Service, and most importantly can save people.

WxWatcher displays weather data in an ingestible format and lets people know about what's happening to other people. First, the home page contains weather data itself with the current temperature/wind speed, forecasted temperature/wind speed up to 6 hours, and the current alerts for where the user lives (Tornado Warning, Severe Thunderstorm Warning, etc.)

Lastly, it has a "reports" page where you can self-report with a click of a single button whether it’s drizzling or flooding for quick and effective data transmission.

How we built it

The goal of this application was to design it in a way that it could be taken and using S3 and an EV3 instance it could be public for people to use. Thus, the backend was designed using Docker, in order to make setup on S3 incredibly easy and to resolve dependency issues within our team. The docker-compose.yml helped us construct a mysql base image and an image that the python scripts could run off of. Once the MySQL base image was set up, we connected to the database using SQLAlchemy, a library that makes writing SQL Objects, connecting tables, and managing data incredibly simple. We started off by brain storming the tables we want, a table for users and a table for forum posts. After we listed off relevant fields for the user table (website identifier, username, password, trust level, likes, reports, and posts) and the posts (post id, author id, message, likes, and reports) we designed the tables and connected the posts table to the user table via the author_id to website_identifier (now a foreign key).

In addition to making a database in which we could store and load data, the goal was to also create an API that we could send GET and POST requests with in order to obtain relevant data about users and posts and send data. The API was designed to be connected to a scoped session of an instance of the database and was able to efficiently query and send data when necessary. It also made connecting the frontend and backend incredibly easy as now in the flask app for the website, we could send GET and POST requests instead of having to instantiate an instance of the database in the app (an expensive task). The API also read from the NWS weather data in order to provide real time data on the location collected via the IP of the user.

Finally, the connection between the API, database, and frontend was Flask. As a framework, Flask perfectly fit our needs as we were able to utilize the API and database (which were written in Python) and it was relatively inexpensive to use for backend. Flask helped us manage login info and processed all the form data on the website. Our flask application was the bridge between the frontend and the API which allowed easy access and deposit to our database!

For the frontend, we coded all the HTML and CSS ourselves as we wanted a lot of flexibility. Before coding it, we designed the application in Figma. It allowed us to discuss what we wanted the website to look like and it gave us the ability to take CSS from objects we designed in Figma. Ultimately, after coming to a consensus about the aesthetic of the website and all the tabs, we decided on having a home page (displaying all the NWS weather data), a login and signup page which put user data into the database, a forums page where users can interact with each other and sort posts by distance along with seeing reliability of users, and a reports page on which users could report weather phenomena close to them. Ultimately, the app was managed on Flask and provides a pleasant user experience with its easy to use UI along with strong, reliable database connection.

Challenges we ran into

Trying to come up with a unique and useful idea was our first challenge, since we wanted to reach out to people no matter their background with a unique idea while not having an idea that is too niche to affect most people.

Another challenge we ran into were relying on APIs that ended up having a certain pricing meaning they weren’t free. We had to implement workarounds, like our own self-reporting feature about what the weather is doing outside and not being able to display a map of all the self-reports but rather having a webpage for it to workaround these issues of relying on said APIs.

We also faced a time crunch towards the end of the hackathon, having to vastly adjust our sleep schedules for us to be able to finish the functionality of the website. We had to pull all-nighters to get the website up and running, but the website and the code definitely show how much time we put into this project.

Accomplishments that we're proud of

First of all, getting the database to work was challenging for us. We were running into multiple dependency issues, so we looked towards Docker for solving that challenge and that helped one part of the problem. We were also having issues with the implementation of the database in terms of connecting it to our website, so solving this issue overcame a big roadblock during this hackathon.

We’re also proud of the overall design of the website, as we put a lot of thought into it using Figma so that we could get a gist of what we wanted the website to look like. We are all beginners at HTML & CSS, so designing the website was a challenge for us as a whole but a major accomplishment at the end, with the website having a slick and easy-to-read design.

We’re also proud of coming up with this idea in the first place, because this would be useful for everyone regardless of who they are or what they know, and this idea also has the potential to save lives by letting citizens know if there is a danger coming towards them or even over them at that moment.

What we learned

A lot of us became a lot more familiar with HTML/CSS, having not used it much before. Learning more about HTML & CSS wll help us in the future and helped us during this hackathon, because learning as we went helped us better understand the codebase in general and improved teamwork and collaboration, by understanding our fellow teammates’ code.

We also learned a lot about Flask, being the foundation for our backend and holding up the dynamic part of the website. Flask and Jinja templating were incredibly useful in the making of our website, and learning more about Flask and HTML/CSS has opened up a whole new world for all of us in web design.

What's next for WxWatcher

Could implement background machine learning system where in a respective category (ex. snow storm), collects all reported tweets for snowstorm (positive - liked; negative = complained) and using machine learning, figure out the highest weighted phrases that contribute to misinformation (ex. for snow storm, could be “high heat”) Overtime, we could have a well trained enough model that filters out unreliable misinformation before it pops up on users’ UI Use BERT text vectorizer, with neural network