Naar de inhoud
fusionstudios.
Case study2026

Eigen tool-site & netwerkreferentie

SubnetKit

Een subnetcalculator en netwerkreferentie voor beheerders en developers. De homepage is de calculator zelf, en wat je intypt wordt in je eigen browser verwerkt: er is geen server die meekijkt.

Periode juli 2026 tot heden
Rol Concept, merk, bouw en SEO
Stack Next.js, React, TypeScript
Live subnetkit.dev
01

Het vraagstuk

Tien seconden werk, minuten wrijving.

Een subnet uitrekenen is een routineklus die iemand tien keer per week opzoekt. Maar de tools bovenaan zijn opgebouwd rond advertentieruimte in plaats van rond het invoerveld, laden trager dan de berekening zelf ooit zou duren, en leveren het antwoord af in een tabel waar je zelf de juiste rij uit moet vissen.

De tweede moeilijkheid zit in de omvang van de niche. De vragen zijn heel specifiek: per prefix, per poort, per gewenst aantal hosts. Zulke vragen verdienen een eigen antwoord op een eigen URL, niet één generieke pagina die alles tegelijk probeert te zijn.

De opgave: het juiste getal binnen een seconde op het scherm, en voor elke variant van de vraag een eigen pagina.

02

De aanpak

Eerst de rekenkern, dan de site.

(01)Pure TypeScript als fundamentDe IPv4- en IPv6-wiskunde staat in dependency-vrije functies, inclusief de randgevallen waar calculators de mist in gaan: een /31 zonder apart broadcast-adres, een /32 als één host, IPv6 met BigInt.
(02)De homepage is de calculatorGeen landingspagina die naar de tool verwijst: je typt een IP en prefix en ziet meteen netwerk, broadcast, bereik, mask, wildcard en binair. Acht calculators in totaal.
(03)Referentie per vraagUit de datasets ontstaat een eigen pagina per CIDR-prefix, per poort, per poortcategorie en per gangbaar host-aantal. Gecureerd, niet uitputtend: de getallen die mensen echt intypen, geen pagina-fabriek.
(04)Docs-esthetiek, eigen systeemEen light-first developer-docs stijl met een koele grijsschaal en één cyaan accent. Monospace alleen voor adressen, masks en binaire waarden, en een donker thema zonder witte flits.
(05)Verifiers voor elke deployEen eigen crawler faalt op gebroken interne links en weespagina's, een schemacontrole valideert de JSON-LD. Beide draaien tegen de echte build-output en vangen wat een linter mist.
03

Het werk

Gereedschap, geen etalage.

De visuele taal is die van een goede handleiding: rustig, hoog contrast, alles op zijn plek. Cijfers die je moet overtikken staan in vaste letterbreedte, lopende tekst niet.

subnetkit.dev
Homepage van SubnetKit met de subnetcalculator op desktop
De homepage is de calculator: invoer boven, antwoord eronder
Subnetcalculator van SubnetKit op mobiel
Mobiel hetzelfde antwoord
subnetkit.dev
Referentiepagina van de /26-prefix met alle afgeleide waarden
Een prefix-pagina: de /26 met alles wat erbij hoort
04

Het resultaat

Elke variant zijn eigen antwoord.

SubnetKit telt 257 voorgerenderde pagina's, gebouwd op acht calculators en een dataset van 150 poorten en 33 CIDR-prefixes. Wat de /26-pagina zegt en wat de calculator zegt komt uit hetzelfde stuk code.

Omdat er geen backend onder de tools ligt, zijn er geen serverkosten, is er niets te patchen en ontvangen wij geen calculatorinvoer. Uitbreiden is een item aan een dataset toevoegen, waarna de pagina, de sitemap-regel en het API-endpoint uit zichzelf volgen.

257

Voorgerenderde pagina's

8

Calculators, van CIDR tot wildcard

150

Poorten met een eigen referentiepagina

33

CIDR-prefixes, van /0 tot /32

BellenWhatsAppStart een project