Inspiration
The inspiration for our project stemmed from a mild, first-world frustration with modern weather websites. Sure, one glance at the temperature can tell you a lot about the weather, but there are so many other factors that we commonly ignore which can also affect our day. What if it's unbearably humid? Or, what if there's an on-and-off chance of rain throughout the day and you don't know how to prepare? These questions and more led us to develop a web application that not only provides you with your typical hourly forecast, but also processes that data into more meaningful and digestible information about your day.
What it does
Our application first retrieves an hourly forecast from OpenWeatherMap's One-Call API. It displays the forecast for the next 12 hours on the left side of the webpage, and it also processes the raw weather data into simpler chunks. Each chunk contains highlights about the weather for a three-hour interval, and dynamically provides advice on how to best prepare for the day.
How we built it
We used ReactJS and the React-Bootstrap library for the frontend of our application. For the backend, we used Node.js, Axios for API requests, and OpenWeatherMap's APIs.
Challenges we ran into
The most difficult portion of our project was processing the data from each API call. This was the first time that any of us have worked with APIs, so finding the right data, refining it, using it efficiently, and displaying it was a hurdle in our workload. In addition to this, we had to complete lots of research on how to prepare for different types of severe weather conditions which also occupied a large portion of our time.
Accomplishments that we're proud of and what we learned
We are very proud that we started this project with little knowledge about APIs, and in the end, we were able to manipulate the API data however we liked. We are also proud of the sleek, single-page design of our application and its overall aesthetic.
What's next for Smart Day
Given the time constraints, we were not able to fulfill some of our goals. The next steps for our project includes reverse geocoding the user's location to display their city/region, allowing the user to select their location from a database, and displaying a larger variety of tips for different weather conditions.
Built With
- axios
- css3
- html5
- javascript
- jquery
- node.js
- openweathermap
- react
- react-bootstrap


Log in or sign up for Devpost to join the conversation.