Bouwtijd
WalletJump · Productengineering · 2025–nu
- Rol
- Lead product engineer
- Omvang
- Engineering · Designsysteem · CMS · Infrastructuur
- Visueel ontwerp
- Rick van Grinsven
Publieke site, Studio, AI search en edge-services.
Ik bouwde de frontend en het publicatiesysteem van WalletJump.
Het bestaat uit vier delen: een gedeelde componentbibliotheek, een Sanity Studio waarin redacteuren routes opbouwen en vooraf bekijken, een Astro-frontend en een set Cloudflare Workers voor zoeken, media en back-ups. Samen bedienen ze de 104 publieke URL’s van WalletJump: vergelijkers, reviews, artikelen, expertpagina’s.
Bekijk WalletJump live (opent in een nieuw tabblad)↗
De uitdaging
Financiële content wordt al snel ingewikkeld.
Een vergelijker heeft compacte filters en veel productdata nodig. Een review moet tonen wie hem schreef en waarop het oordeel rust. Een artikel heeft vooral leesruimte nodig. Daarbovenop willen redacteuren productfeiten hergebruiken en precies zien wat ze gaan publiceren. Drie soorten pagina’s met echt verschillende eisen.
- Feiten blijven consistent
- Productdata, auteurschap en toelichtingen komen overal uit de beheerde bron.
- De layout past bij het scherm
- Dichte vergelijkingsdata krijgt op een telefoon een andere volgorde.
- De preview toont de echte route
- Redacteuren controleren de juiste route, op de juiste breedte, voordat ze publiceren.
Op ieder scherm
De layout past zich aan het scherm aan waarop je leest.
Op een groot scherm past de hele categorie in één blik. Een laptop houdt filters en resultaten in één werkruimte. Op een tablet krijgt de review lucht, en op een telefoon worden diezelfde velden een korte reeks keuzes.
Scroll door vier live weergaven.-
Extern scherm
OriënterenDe hele categorie past in beeld.
Op een breed scherm passen de navigatie en categorieroutes naast elkaar. De lezer kan de opties bekijken voordat er een startpunt wordt gekozen.
-
Laptop
VergelijkenFilters en resultaten blijven bij elkaar.
Filters, resultaataantal, productdata en toelichtingen delen één werkruimte. Een filterwijziging haalt de rest van de context niet weg.
-
Tablet
LezenDe review krijgt meer ruimte.
Productdetails, de auteur en de factcheck komen naar voren. Secundaire desktopstructuur verdwijnt en het artikel wordt makkelijker te scannen.
-
Telefoon
FilterenFilters blijven binnen duimbereik.
Filters en productvelden vormen één kolom. De lezer kan een voorkeur aanpassen, een resultaat bekijken en met één hand verdergaan.
Eigenaarschap van content
Ik scheidde paginavolgorde, plaatsing, content en rendering.
De pagina bepaalt de volgorde. De plaatsing bewaart de presentatie die bij die ene pagina hoort. Het brondocument bezit alles wat herbruikbaar is.
- 01
Pagina
Bewaart de route en blokvolgorde.
- 02
Plaatsing
Bewaart de lokale achtergrond en variant.
- 03
Brondocument
Bewaart herbruikbare inhoud en validatie.
- 04
Renderer
Rendert het component in Studio en Astro.
Voor de redactie
Een bronwijziging werkt door op iedere gekoppelde route.
Pagina’s houden hun eigen presentatie. Tekst en validatie blijven bij het gedeelde brondocument.Navigation Hero
De Navigation Hero laat zien hoe het publicatiesysteem werkt.
Eén component: het Figma-frame, Storybook, Sanity, de live Astro-route. Figma legt de leesvolgorde vast, Storybook test de productieprops, Sanity bewaart de content en Astro rendert de pagina.
- Figma
- Storybook
- Sanity
- Astro
Figma-specificatie
Leg eerst de mobiele leesvolgorde vast.
Zes categorielinks hebben een bewuste volgorde nodig, zeker wanneer labels over meerdere regels lopen.
Ik gebruikte de mobiele layout om de contentvolgorde, kaartdichtheid en wijzigingen per breakpoint vast te leggen.
Het Figma-frame van 390 pixels legt vast welke volgorde engineering moet behouden.
Storybook-component
Test het component buiten Figma.
Figma toont geen ongeldige props of toestanden tussen de ontworpen breedtes.
Ik bouwde MainHero in Storybook met de varianten die ook in Sanity worden gebruikt.
De stories documenteren het component en leveren thumbnails voor de blokkenkiezer.
Sanity-bronblok
Maak de hero herbruikbaar.
Gekopieerde hero-velden zouden losse drafts en aparte validatieregels opleveren.
Ik maakte van Navigation Hero een eigen Sanity-document met een schema en inline preview.
Redacteuren zien het gerenderde component voordat ze het aan een pagina toevoegen.
Pagina-plaatsing
Bewaar layoutkeuzes op de pagina.
Een gedeeld blok kan op een andere route een andere positie, achtergrond of variant nodig hebben.
De pagina bewaart volgorde en lokale presentatie. De plaatsing verwijst naar het gedeelde document.
De homepage krijgt haar eigen opbouw zonder de hero-content te kopiëren.
Live WalletJump
Laat preview en live dezelfde renderer gebruiken.
Een tweede productietemplate kan na verloop van tijd afwijken van de preview.
De Astro-route en de draftpreview gebruiken dezelfde component- en contentdata.
Wat een redacteur in de preview goedkeurt, is wat de live route rendert.
Voor redacteuren
Ik bouwde Sanity rond het werk van redacteuren.
Sanity is hier flink op maat gemaakt. Ik vormde de Studio naar de manier waarop de redactie van WalletJump echt werkt, in plaats van ze met een standaardschema te laten zitten.
Gestructureerde content, visueel bewerken en programmeerbare workflows.
Officiële illustratie · sanity.io
- Schemalijst
- →Navigatie per redactionele taak
- Interne typenamen
- →Gerenderde blokpreviews
- Gekopieerde velden
- →Herbruikbare brondocumenten
- Preview in een ander tabblad
- →Draftpreview naast het document
Werken in de Studio
Redacteuren beginnen bij de pagina, tabel, bron of preview die ze nodig hebben.
Een pagina opbouwen. Een tabel uit Sheets plakken. Een bron bijwerken. Een mobiele draft controleren. Ook de vragen van lezers komen terug in Sanity, wat er een to-dolijst van maakt in plaats van een rapport dat niemand opent.
- 01 Pagina’s samenstellen
- Redacteuren ordenen gerenderde blokken en kiezen voor een nieuwe sectie de preview die bij de inhoud past.
- 02 Gestructureerde data invoegen
- Cellen uit Excel, Sheets of tab-gescheiden tekst worden een bewerkbare tabel in plaats van een vastgelegde embed.
- 03 Gedeelde bronnen bijwerken
- Eén hero, productdataset of FAQ-document kan op meerdere routes staan zonder dat de inhoud wordt gekopieerd.
- 04 Presentatie lokaal afstemmen
- Achtergrond, variant en hoekbehandeling horen bij de plaatsing, zodat gedeelde inhoud per pagina anders kan worden gepresenteerd.
- 05 Desktop en mobiel controleren
- Dezelfde Astro-route toont de ongepubliceerde draft op verschillende breedtes voordat een wijziging live gaat.
- 06 Bekijk wat lezers vragen
- Zoekvragen verschijnen in Sanity, zodat redacteuren zien welke onderwerpen nog werk nodig hebben.
Drie workflows
Drie dagelijkse taken in WalletJump Studio.
Een redacteur bouwt een pagina, zet spreadsheetcellen om in een tabel en gebruikt bestaande content op een nieuwe route.
Bekijk de pagina
- 01
Bekijk de pagina
De homepage-draft toont haar blokken in publicatievolgorde.
- 02
Open de blokkenkiezer
Ieder onderdeel heeft een gerenderde preview en is gegroepeerd op doel.
- 03
Filter de lijst
Een categorie maakt de lijst korter voordat de redacteur een blok kiest.
- 04
Voeg het blok toe
De redacteur kiest de preview die past bij de benodigde sectie.
Open het invoegmenu
- 01
Open het invoegmenu
Een artikel biedt 28 visuele componenten en datumcodes die actueel blijven.
- 02
Plak spreadsheetcellen
De tabel accepteert Excel, Sheets en tabgescheiden tekst.
- 03
Controleer de import
Vier kolommen en drie rijen worden automatisch gesplitst in koppen en data.
- 04
Bewerk de tabel
Redacteuren kunnen rijen herschikken, kolommen toevoegen en een bijschrift schrijven.
Open de bibliotheek
- 01
Open de bibliotheek
Herbruikbare documenten staan buiten individuele pagina’s en zijn gegroepeerd op doel.
- 02
Bewerk de bron
Iedere gedeelde hero heeft één Sanity-document.
- 03
Kies de layout voor deze pagina
De pagina bewaart achtergrond, variant en hoeken; de content blijft gedeeld.
- 04
Bekijk het op de pagina
De page builder rendert het productiecomponent vóór publicatie.
AI search
AI search antwoordt vanuit gepubliceerde WalletJump-content.
Na publicatie voegt een Cloudflare Worker het document toe aan een hybride trefwoord- en vectorindex. Stelt iemand een vraag, dan haalt de interface eerst de relevante passages op. Pas daarna schrijft het model, met links naar de routes die het gebruikte. Geen passages, geen antwoord.
- 01
Sanity Publiceren
Sanity stuurt na publicatie een webhook.
- 02
Cloudflare Worker Indexeren
De worker voegt paginadoel, prioriteit en waarschijnlijke lezersvragen toe.
- 03AI Search
Ophalen
Cloudflare AI Search combineert trefwoord- en vectormatches uit WalletJump-content.
- 04Workers AI
Antwoorden
Het model schrijft met de gevonden passages en linkt naar de bronnen.
Een geplande taak pikt op wat er aan webhooks is misgegaan. De vragen die mensen stellen komen terug in Sanity, waar ze concrete onderwerpen voor de redactie worden.
Snelheid en betrouwbaarheid
Astro serveert de pagina voordat achtergrondwerk begint.
Astro stuurt complete HTML vanaf de edge. React hydrateert alleen de interactieve delen, en pas wanneer de browser vrij is. Zoekindexering, beeldsynchronisatie en back-ups zitten in losse workers, zodat ze nooit tussen de lezer en de pagina in komen te staan.
- 01
AstroCloudflare Volledige HTML vanaf de edge - Astro rendert de route aan de edge. De inhoud staat al in de pagina voordat optionele React-islands starten.
- 02 SanityCloudflare Beelden een jaar in cache
- Een beveiligde worker kopieert Sanity-uploads naar Cloudflare Images. Het mediadomein gebruikt een immutable cacheheader van één jaar.
- 03 Cloudflare Zoeken en media apart
- Deze workers worden los van de webapp uitgerold en getest, zodat redactietaken het laden van de pagina nooit raken.
- 04 SanityCloudflare Uurlijkse back-up en herstel
- Een geplande worker schrijft ieder uur de Sanity-dataset naar R2. Een tweede repareert zoekupdates die zijn misgegaan.
Wat er live staat
Het systeem bedient 104 live URL’s.
Een vergelijker heeft bijna niets gemeen met een artikel, dus houdt iedere route de eigen layout in de hand. Wat ze delen is het model eronder. Productdata, auteursinformatie en toelichtingen blijven waar ze beheerd worden, en pagina’s wijzen daarnaar.
Lezer
- Verder zonder opnieuw te zoekenCategorieën, vergelijkers en reviews delen hun navigatie, productkaarten en auteurschap.
- Details blijven herkenbaarProductdata en toelichtingen houden dezelfde vorm op iedere route en ieder scherm.
Redactie
- Kiezen op beeldDe blokkenkiezer toont het echte component, dus hoeft niemand een schemanaam te onthouden.
- De echte route vooraf zienDe draft staat naast de velden, op de route die live gaat.
Productteam
- Eén component aanpassenEen wijziging werkt door in Storybook, Studio en de publieke site.
- Bestaande content meenemenPreviews, tests en 36 migraties lieten het model groeien zonder opnieuw te beginnen.
104 publieke URL’s · beheerde bronnen · layout per route
Live site
Zeven routes van de live site.
Zeven van de 104 live URL’s. Ze gebruiken dezelfde componenten en contentbronnen; wat verandert is de layout. Een categorie verkennen en nakijken wie een review schreef zijn nu eenmaal niet dezelfde taak.
Vastgelegd op walletjump.com · 20 juli 2026
Impact en schaal
WalletJump heeft 104 publieke URL’s.
Op 20 juli 2026 bevatte de sitemap 29 pagina’s, 50 artikelen, negen productreviews, acht vergelijkers en acht auteursprofielen. Daarnaast deed ik vijf TTFB-metingen vanuit Amsterdam en telde ik de repository na. Alles hieronder is een lab- of repositorymeting. Field Core Web Vitals zitten er niet bij.
- 5sitemapfamilies
- De sitemap vermeldt pagina’s, artikelen, reviews, vergelijkers en auteurs apart.
- 19 / 19AVIF-beelden
- Alle 19 rasterbeelden uit een verse homepageload op 1440 × 1000 werden als AVIF geleverd.
- 152 KBrasterpayload
- Die 19 responses waren samen 151.750 bytes, exclusief headers en lazy-loaded beelden.
- 150 msmediane lab-TTFB
- Vijf metingen vanuit Amsterdam lagen tussen 129 en 212 ms. Dit is een labmeting, geen field-CWV.
- 9applicaties
- De monorepo bevat de website, Studio’s, het designsysteem en ondersteunende Workers.
- 1.691Storybook-stories
- De repository bevat 1.691 gerenderde stories om componenten te controleren.
- 2 mlnbezoekers per maand
- De gepubliceerde site bereikt zo’n twee miljoen bezoekers per maand.
- 85visuele previews
- De Studio toont iedere keuze als gerenderde preview met het bijbehorende contenttype.
85 Studio-previews
De previewbestanden die WalletJump Studio op dit moment gebruikt.
001—047
Paginablokken
De Studio toont 47 gerenderde blokken voordat een redacteur er een aan een pagina toevoegt.
-
001 Article Callout Placement Bouwsteen -
002 Article Card Grid Placement Bouwsteen -
003 Article Grid Placement Bouwsteen -
004 Article Hub Hero Placement Bouwsteen -
005 Article Sources Placement Bouwsteen -
006 Article Spotlight Placement Bouwsteen -
007 Article Table Placement Bouwsteen -
008 Benefits Placement Bouwsteen -
009 Comparison Table Placement Bouwsteen -
010 Contact Form Placement Bouwsteen -
011 Cta Banner Placement Bouwsteen -
012 Email Capture Placement Bouwsteen -
013 Expandable Text Placement Bouwsteen -
014 Expert Directory Hero Placement Bouwsteen -
015 Expert Directory Placement Bouwsteen -
016 Expert Profile Hero Placement Bouwsteen -
017 External Widget Placement Bouwsteen -
018 Faq Accordion Placement Bouwsteen -
019 Featured Posts Placement Bouwsteen -
020 Generic Block Bouwsteen -
021 Hero Placement Bouwsteen -
022 Image Content Card Placement Bouwsteen -
023 Jobs Board Placement Bouwsteen -
024 Latest Article Grid Placement Bouwsteen -
025 Link Card Grid Placement Bouwsteen -
026 Logo Strip Placement Bouwsteen -
027 Mission Placement Bouwsteen -
028 Navigation Promo Card Bouwsteen -
029 News Placement Bouwsteen -
030 Offer Grid Placement Bouwsteen -
031 Page Content Placement Bouwsteen -
032 Page Hero Placement Bouwsteen -
033 Process Placement Bouwsteen -
034 Product Review Grid Placement Bouwsteen -
035 Product Table Placement Bouwsteen -
036 Recently Reviewed Placement Bouwsteen -
037 Related Article Grid Placement Bouwsteen -
038 Review Collection Placement Bouwsteen -
039 Review Expert Placement Bouwsteen -
040 Review Product Card Placement Bouwsteen -
041 Review Pros And Cons Placement Bouwsteen -
042 Reviews Placement Bouwsteen -
043 Social Proof Placement Bouwsteen -
044 Team Carousel Placement Bouwsteen -
045 Text Link Placement Bouwsteen -
046 Three Column Text Placement Bouwsteen -
047 Trust Card Placement Bouwsteen
048—085
Componentvarianten
Nog eens 38 previews laten zien hoe die blokken veranderen bij andere content of layouts.
-
048 Article Grid Block · Latest Variant -
049 Article Grid Block · Recent Variant -
050 Article Grid Block · Related Variant -
051 Benefits Block · Cards Only Variant -
052 Benefits Block · Intro Cards Variant -
053 Cta Banner Block · Default Variant -
054 Email Capture Block · Card Variant -
055 Email Capture Block · Section Variant -
056 Expert Profile Hero Block · Default Variant -
057 Hero Block · Centered Variant -
058 Hero Block · Collage Cta Variant -
059 Hero Block · Collage Variant -
060 Hero Block · Nav Variant -
061 Hero Block · Not Found Variant -
062 Hero Block · Page Title Variant -
063 Hero Block · Simple Variant -
064 Mission Block · Default Variant -
065 Mission Block · Large Card Homepage Variant -
066 Navigation Promo Card · Alternate Variant -
067 Navigation Promo Card · Default Variant -
068 Product Review Grid Block · Compact List Variant -
069 Product Review Grid Block · Comparison List Variant -
070 Product Review Grid Block · Review Hub Variant -
071 Product Table Block · Credit Card Variant -
072 Product Table Block · Savings Variant -
073 Promo Module · Default Variant -
074 Review Callout Embed · Default Variant -
075 Review Callout Embed · Error Variant -
076 Review Callout Embed · Quick Answer Variant -
077 Review Callout Embed · Success Variant -
078 Review Collection Block · Featured Grid Variant -
079 Review Collection Block · Tabbed Cards Variant -
080 Reviews Block · Ratings Carousel Variant -
081 Reviews Block · Testimonials Carousel Variant -
082 Social Proof Block · Combined Variant -
083 Social Proof Block · Featured In Variant -
084 Social Proof Block · Partner Slider Variant -
085 Social Proof Block · Reviews Variant
Reflectie
Het lastigste deel was bepalen waar iedere soort data thuishoort.
Pagina’s bewaren hun presentatie, brondocumenten bewaren herbruikbare content, en één renderer bedient zowel Sanity als Astro. Dat is wat het mogelijk maakte om content te hergebruiken zonder de layout uit handen van de pagina te nemen.
Het cijfer dat ik nooit heb gemeten is redactietijd. Zou ik opnieuw beginnen, dan klokte ik op dag één een veelvoorkomende wijziging en keek ik waar redacteuren vóór publicatie blijven hangen. Dat vertelt een sitemap je niet.
Bekijk WalletJump live (opent in een nieuw tabblad)↗
Mijn werk binnen het project
Systeemarchitectuur
Bepaalde het eigenaarschap en de datastromen tussen content, componenten en routes.
Productengineering
Bouwde de publieke frontend, componentbibliotheek en redactionele interfaces.
Publicatietooling
Bouwde migraties, previews, tests, zoeken, beeldsynchronisatie en back-ups.
Volledige scope en stack
Implementatie
- 01Gedeelde componentbibliotheek met responsieve varianten en toegankelijke interacties.
- 02Paginatemplates voor vergelijkers, reviews, artikelen en marketingpagina’s.
- 03Sanity-schema’s, page builders, previews, route-resolvers en migraties.
- 04Cloudflare Workers voor zoeken, formulieren, beeldsynchronisatie en back-ups.
- 05Route-, component-, content- en screenshottests.
Technische stack
- Astro 6
React 19
TypeScript- Sanity
- GROQ
Storybook
Figma Code Connect- React Aria
- Cloudflare Workers
- AI Search
- D1
- KV
- Images
- R2