Live demo

How did you build it ?

I built this project alone for approximately 4 months, using Next.js and Material UI as my front end stack.

A good part of the day was spent on watching YouTube tutorials to build the kind of functionalities I wanted and brainstorming what features I wanted to add to the project. Then I’d spend around 4 to 5 hours per day writing code for each component. As a matter of fact I used Todoist to manage my task.

At first I thought about presenting the entire body of data on the left side, but I thought it was a better idea to divide the content into 3 tabs: Climate, Monthly averages and Basic forecast.

In order to reduce the amount of unneeded API calls, I used “useMemo” in React to cache the weather data of the location, so that the components on the left side won’t re-render itself whenever you interact with the site, unless you search for a new location.

I’d say the one of the hardest part of this project is to construct the monthly average temperature chart. It took me 2 weeks ( or maybe up to a month, I can’t remember ) to finish building it.

In a nutshell, here’s the step by step process to make it happen:

• I used Python and R to query the climate and temperature data of every location from .shp and .tif files.
• Then I add all the queries into CSV files. One for the climate data and one for the temperature data.
• Then I merge them all into one big CSV file using Python.
• Finally I converted the CSV file into a JSON file.
• Then I imported that same JSON file into my MongoDB.

Perhaps the most difficult technical challenge I’ve faced in the building process was to make the geolocation function.

• First I created an API which retrieves the coordinates of the user.
• Using the geonear function in MongoDB I searched for the nearest location to the exact location of the user. This step is to protect the users’ privacy as per GDPR.
• I used JWT to encrypt the location’s data and stored it on localStorage so that you won’t need another API call next time.

If I did something that broke the whole site, I’d revert back to old versions simply by discarding staged changes in Git. I had no idea how to use “git revert” in the past, so I’d delete the folder and the “git clone” older versions of my repository on GitHub.

All in all, I’d say this is still a relatively brief summary for the question.

You can learn more about the behind the scenes by reading my 4 part blog series describing where the concept of this app came from and the journey I took to make this final product.

How did you test your site ? And are there still bugs on your site ?

In the past, I hosted the site on my local computer (localhost:3000) to look for bugs on DevTools, but now that the site is up and running on Vercel, which is the company behind Next.js, I could just type “npm run dev” and test out my design ideas from there.

To test the REST APIs, I used Postman to conduct tests on different kinds of APIs I made, which I’ve put them all in one folder called “services” on the GitHub repo.

Even though I’ve gone to great lengths to eliminate bugs, there were inevitably bugs from time to time.

Probably geolocation is the blind spot since the process is HTTP intensive and 50% of the time the function wouldn’t work, because part of the API’s retrieval process is outsourced to MongoDB’s search function.

Sometimes the “furthest location with similar temperatures” tab returns nothing.

Another issue with the site is that the site is not responsive, that is, you can only use it properly on the web browser, otherwise the whole UI gets jumbled up in the phone. I just don’t have that much bandwidth and time left to finish it off.

Why this project is important to you ?

There were days where I’d check the forecast around the world once every hour. The fascination with cold weather still lingered after that 4 day trip to South Korea. Inspired by the weather maps and the documentaries of natural disasters, I decided to make a web project to simulate how weather patterns can affect an area.

TLDR, I couldn’t realistically make such a complex app by myself, so this app serves to report climate and weather data for different locations on earth.

What are the features that make it unique ? How is it compared to existing products ?

Good question here…my project is unique in a way that it’s not just any other weather app. Sure it probably wouldn’t match the visual aesthetic of windy.com and the versatility of weatherspark.com, but the app feels more like a catalog of meteorological information of every location in the world that has a population over 1000.

I’d also admit that this topic is a bit too esoteric for modern websites, but I guess it is what it is.

Regarding the second question, I think that I might have surpassed Google in one aspect - which is the temperature and rain chart shown as a snippet when you search for average temperature in a certain location on the browser.

I’m not sure how many places Google managed to report, but Climatology reports up to 120k locations.

I had contemplated about allowing users to add new entries just by submitting the name and country, but to do so it requires me to serve a Python file on a cloud, which is definitely out of my capacity.

What did the project teach you ?

The project taught me a great deal in Next.js, MongoDB and using Postman to test Next.js’ built in APIs.

Not only that, the project gave me ample amounts of time to dabble in some form of scientific computing.