Weather Application

ThatoThato
4 min read

The Planning

When I started working on this project, I had only amateur experience using the JavaScript programming language. Before that, I had basic experience with front-end development technologies such as HTML and CSS. I had managed to create my first to-do list application, thanks to numerous Google searches recommending it as the "best beginner coding project." I spent countless days trying to understand the process of creating a web application from scratch.

Creating a to-do list application was an ideal recommendation as it did not require me to use a lot of code, and I did not need to know too much about the programming languages I was using.

When I first started working on this project, I wasn't sure where to begin. To gain insight into different ways developers plan their projects, I spent some time on YouTube. For the first time, I started using wireframes, which I had never used before when working on the to-do list application.

Styling

Styling web applications proved to be a challenging yet intricate part of building this project. I learned that any front-end developer needs to have a certain level of creativity to create a UI that is pleasing to the clients. CSS flexbox was a very effective method for styling the web application, as I needed to create three different cards in a column that displayed the necessary information while maintaining a neat and simplistic layout that didn't make it difficult for the client to find everything on the screen.

I learned about various open-source resources that provide a plethora of things to make your application visually appealing. Resources such as Unsplash offer background imagery that can enhance the overall look of your application.

APIs

This was my first time using an API on my application to retrieve data from a third-party source that I could add to my application. I found the process to not be as tedious as I had previously assumed. I made use of an API from Open Weather App, which took a couple of hours to set up as my API key had to be activated, but once it was, I could start retrieving various amounts of data regarding the weather in different parts of the world. The challenge now was to figure out how to display different weather information on the individual cards I created.

This sparked a new idea for the design of the website because I had to decide if I was going to find a way for users to easily add and remove weather information on the places they search for, instead of the weather information popping up on all three cards. It was either this or removing two of the windows and making use of only one weather card while finding a way to make it look appealing to the user. Changing the design would take up more of my time, but it may be necessary.

PLOT TWIST!

So, get this: I just finished building a weather web application and was all set to host it on Github pages. But then, I realized something was just not right - I wasn't feeling the design at all. At first, I was going for a minimalistic vibe, but somehow, it morphed into a Frankenstein's monster of features that just made the whole thing sluggish and buggy. Changing the background was supposed to be cool, but it turned out to be a total dud. So, what did I do, you ask? I had to take drastic action!

New Plan

Picture this: I was knee-deep in creating this grandiose weather web application, and I thought it was the bee's knees - until I took a step back and realized that it had lost its mojo. The design was all over the place, and the fancy features that I thought were the icing on the cake were causing more harm than good.

But don't you worry, my friend, because I'm not one to give up so easily! I had a lightbulb moment - why not switch gears and create a weather widget instead? It'll be a small but mighty app, dedicated solely to giving users the weather info they need, no muss, no fuss.

So, I got down to business, diving into new HTML, CSS, and React JS concepts that I had no prior knowledge of. And that's when I discovered Tailwind CSS - it's like a superhero version of CSS, and I'm ready to put it to the test.

I also stumbled upon Electron JS, a cross-platform desktop application builder that could be a real game-changer for this project. I also found out about Tauri which is said to be the predicted successor for electron - will it be the hero we need for our widget project? Only time will tell, my friend.

0
Subscribe to my newsletter

Read articles from Thato directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Thato
Thato

I’m a self taught junior developer from South Africa in the Gauteng province. I’m currently learning C programming.