WeatherHub

Part 1 - Video & Introduction

Check out the introductory video above, or at: https://youtu.be/10CjxOJ3qoU

Overview

WeatherHub is a revolutionary app that simplifies your weather forecasts into one streamlined dashboard, so you can focus on what’s most important to you. With the click of a button, you can quickly access weather forecasts and alerts at your fingertips. Additionally, you can analyze historical trends and view upcoming air quality and flood risk forecasts calculated with machine learning.

Features

WeatherHub simplifies the user experience while offering a variety of advanced features. The dashboard allows you to...

• Easily view current weather conditions, forecasts, and alerts
• Freely switch between any date and location worldwide
• Personalize your experience with theme and language preferences
• Navigate historical data on various time scales
• Visualize and compare weather trends between locations

Design & Implementation Process

The design process started with conducting user interviews, from which the wireframes were developed to model the interface and user flows. Then, interactive prototypes were created on Figma and assessed with user testing. Finally, the app was implemented with JavaScript.

The app utilizes many technologies, including React, Next.js, Chart.js, Chakra UI, Google Translate, JavaScript, JSX, Figma, asynchronous programming, and functional programming.

What’s next?

• New ways to search for locations and dates
• New locations worldwide with Geocoding APIs

• Push notifications for important weather alerts

• Additional user customization and saved locations

• Advanced algorithms for analyzing weather data

Part 2 - Screenshots and Functionality

Part 3 - Project Prototypes & Repository

You can freely explore the interactive prototypes here:

Light Theme: 

https://www.figma.com/proto/9WeX35tr0RdaE4Tilsq11f/WeatherHub?page-id=307%3A279&node-id=337%3A405&scaling=contain&hotspot-hints=0&hide-ui=1

Dark Theme:

https://www.figma.com/proto/ksNJseBbiZM2cubfQinBrk/WeatherHub-Dark-Theme?page-id=307%3A279&node-id=337%3A405&scaling=contain&hotspot-hints=0&hide-ui=1

Access to the project repository is allowed for @sunburntcat at:

https://github.com/MatveyDidenko/weatherHackathon

Developers’ Notes

When building our application, our goal was to show the data for all the dates dynamically with our UI. However, we faced complications with our functionality, particularly due to the extended loading times when fetching the data from the API using JavaScript. Although we successfully built a UI and processed the API data, we are still working on improving the connection between the two components. However, we recognize that the goal of this hackathon was to design a UI to accurately and effectively show the data contained in forecasts.txt. As a result, we decided to present our UI with the given data to show our work, and will continue to improve and expand the UI to work with more dynamic data in the future.