Inspiration

flight path from Oslo to Tromsø to demonstrate the distance

Tromsø felt far - really far.

In 2020, I moved from Oslo to Tromsø. This covered a significant span of the country.

When I started looking for apartment in Tromsø, I found myself wondering why some apartments were in one postal code and others in another, even though they were geographically close.

This made me start wondering about the postal code layout in Norway. The end result was Zipper.

Process

I had a mental picture of the app I wanted: a map of Norway, and as I type successive numbers, the relevant regions would be highlighted on the map.

I wanted this to be as minimal-effort as possible, so I figured I’d make it using tools I was familiar with: a single-page React application. To keep costs down, I would host it on GitHub Pages.

Data

The hard part was the data - where do I get data for the postal codes?

It turns out, that much easier than I thought! Searching the internet lead me to Geonorge, Norway’s catalog of geographic datasets.1 Searching postnummer there took me to the Postnummerområder 2 data set, which was in a convenient GeoJSON data format.

It also provided me with an excuse to try out Recoil, which (at the time) was a fairly new state management library for React.

Reflections

Things I learned along the way:

  • Geonorge is awesome, and public data sets are amazing.
  • Real-life data is never as clean as the design wants it to be.
  • Hosting a React SPA on GitHub Pages has some fun challenges because you’re not hosted at the root (eg, /zipper/ instead of /).
  • Recoil is interesting. This was too small of a project to see how it really scales, but I’ll try it in a future project.

  1. This is an amazing resource ↩︎

  2. Literally: “post number areas” ↩︎