Inspiration
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.