Forecast is a project I put together after learning the basics of GraphQL. This application was the perfect way to improve my understanding of making queries and managing larger sets of data. In this project, I utilized OpenWeatherMap API to gather the weather data and injected this data based on the user's zip code input.

PersonalReactRepositoryView Site
Forecast Application Work in Progress

Project Purpose and Goal

As the main purpose of this project was to improve my comprehension of GraphQL and APIs in general, I spend a good amount of time making sure I was using the best practices of state management and data manipulation. Besides this, I also wanted to make this a weather application that I would enjoy using, meaning it had to be visually pleasing and allow the user to see their weather status at a quick glance.

Web Stack and Explanation

For this project I used React, but many different Javascript libraries could've been used, and even vanilla Javascript could have been easily implemented. I chose to use React because of its ease of use and the ability to smoothly manipulate states without having to re-render the pages.

GraphQL was mainly chosen because I wanted to improve my abilities with it, but also because their server performance is extremely fast, and I knew there wouldn't be any wait time. To publish the application, I hosted it through Netlify, because its easy, free and how I've hosted many of my projects.

Problems and Thought Process

I normally work through coding projects and logic by creating lists like above. Here I've written down some necessary elements that my program needs to find a solution for. I also note a few complications that arose once my app was up and running.

In this case, I noticed that it would grow tedious for a user to have to enter and re-enter their zip code over and over, so I saved their first entry to Localhost. Another small problem was making the proper icon render, as the data I was pulling had no quick numerical reference for the icons, I was forced to have the icons render based on the object that described the weather.

Forecast image with differing weather information

Future Improvements

I still have a few features I would love to implement with this project. I'd really like to update the background images so that they display based on what the weather status currently is, so that the application has the feel of the weather they're currently experiencing. I also have plans to create secondary zip-codes, so the user can click back and forth between two locations and compare the weather.