Søbekkseter

What is the Søbekkseter website?

The Søbekkseter website is a website that features real-time weather data and a live web camera feed from Søbekkseter, Norway. The website is built with Next.js, TypeScript, Tailwind CSS, Docker, and Firebase.

Visit the website here.

Why did I build this website?

The web camera on the website is a live feed from a web camera that is mounted on the roof of my cabin in Søbekkseter, Norway. Many of the residents in this rural area do not live there, but rather use the cabin as a weekend getaway. The web camera is a way for the residents to check on the cabin and the weather conditions in the area.

The data flow

The website has a couple of moving parts, as it is not just a static website. The data flow is as follows:

Data flow

Analytics

The website is hosted using Vercel and uses their analytics service. This allows me to monitor the web vitals and the audience of the website. The analytics dashboard is shown below:

Analytics dashboard

Note that that lackluster "First contentful paint" and the "Largest contentful paint" is due to that fact that the website displays a high-resolution image of the web camera feed. This is not a problem for the user, as the image is server-side rendered and cached in the browser.

When experimenting with improving these vitals, I tried to statically generate the page using incremental static regeneration (ISR). However, due to the real-time weather data being updated every 60 seconds, the ISR would have to be updated every 60 seconds as well. As a result, I observed little to no improvement in the vitals using static generation.

The website is relatively popular, especially during the vaction season. See the image below for a screenshot of the audience of the website:

Audience

Notice how Vercel Analytics even gives you a list of the top referrers. Neat.