Case Study

Weatherman

Weatherman is a website that shows detailed daily and hourly weather forecasts, current weather conditions, tide predictions, radar, and weather maps for cities and places around the world. It’s multilingual, SEO optimized, has a convenient search, and was designed and built from scratch.

Challenge

The client wanted to completely redesign his existing website to make it modern, snappy, and easier to use.

He had a strong vision of what a weather website should look like in 2020 and most of the designs ready beforehand so we jumped straight into development pretty quickly.

Solution

React was chosen for unmatched development speed, MongoDB for its CRUD performance, and NodeJS for handling high not CPU-intensive load on the backend. The architecture was pretty simple, as something more complex would be overkill for this kind of project.

Achieving high search ranking was very important for this project, so server-side rendering, CDN, performance optimizations, multi-language support, sitemaps, and SEO audits were a must. Supporting older browsers like IE11 was also critical for a consumer website like this.

To get everything working, we had to prepare a custom city and places database with multi-language support, mix forecast data from different sources to get everything we needed, and even poll individual weather stations on a lower level directly. In fact, it might be the most detailed consumer weather website out there.

Our calculations concluded that a single web server could easily handle all the traffic from the old website, so we deployed it in docker on a single EC2 instance. We hope it would get a lot more traffic in the future, so deployment architecture also included a plan to easily scale to multiple rendering and backend instances when needed.

Results

The website achieved 90+ PageSpeed score on desktop and 60+ on Mobile, which completely smoked its current competition. It feels swift, modern, and looks great on every platform. Weather predictions are pretty accurate, and the traffic grows.

The client is happy, and the success of our clients measures our success.

Visit Website

Technologies

  • TypeScript
  • React.js
  • Node.js
  • MongoDB
  • Amazon Web Services
  • Server-Side Rendering
  • Internationalization