Comic Grading

Opdracht

Het doel van dit project was om een applicatie te bouwen die het graden (beoordelen) van stripboeken toegankelijk maakt voor verzamelaars die de staat van hun boeken willen inschatten. Het idee ontstond oorspronkelijk uit een oude, inactieve grading-app die ik via de Wayback Machine online vond. Ik analyseerde hoe die app beschadigingen berekende en besloot een moderne, responsieve versie te bouwen.

Evolutie & UI/UX Herontwerp

Het project startte eigenlijk al begin 2018, maar de eerste versie was een ramp op het gebied van gebruikerservaring. De app bestond uit één gigantische pagina die alle mogelijke beschadigingen tegelijk toonde. Dit maakte het proces overweldigend en frustrerend, hoewel de onderliggende logica (het schatten van de score op basis van de officiële 10-punten-schaal ) feilloos werkte.

In 2021 heb ik het project nieuw leven ingeblazen om de UI/UX volledig te heroverwegen. Om het proces overzichtelijk en aantrekkelijk te maken, heb ik de enorme lijst met defecten opgedeeld in specifieke, stapsgewijze pagina’s per categorie en twee verschillende trajecten gecreëerd voor gebruikers:

• Beginnerstraject: Een uitgebreide, stapsgewijze flow die beginnende verzamelaars één voor één door elke categorie van beschadigingen loodst.
• Pro-traject: Een gestroomlijnd scherm waarmee ervaren beoordelaars direct de exacte beschadigingen kunnen selecteren die ze al hebben geïdentificeerd, wat het proces ontzettend snel maakt.

Aan het einde van beide trajecten toont de applicatie een gedetailleerde, geschatte score, compleet met een overzicht van alle geselecteerde beschadigingen.

State Management & Performance

Om de state-transities soepel en lichtgewicht te maken, heb ik geëxperimenteerd met verschillende state management-bibliotheken:

• Zustand & Immer: In plaats van React Context of zware Redux-setups, heb ik gekozen voor de combinatie van Zustand en Immer . Dit duo biedt een zeer reactieve ontwikkelaarservaring met slechts een fractie van de bundelgrootte en boilerplate van Redux Toolkit.
• Animaties: Ik heb Framer Motion geïntegreerd om vloeiende pagina-overgangen en interactieve micro-animaties bij hover-effecten toe te voegen, wat de UI echt tot leven brengt.
• Migratie naar Vite: Ik heb de build-configuratie gemigreerd van Create React App (Webpack) naar Vite . Dit leverde een extreem snelle ontwikkelervaring op en optimaliseerde de buildsnelheid voor productie aanzienlijk.

Gebruikte technologieën

Wat ik heb geleerd

• Complexe formulieren opdelen in intuïtieve, stapsgewijze wizard-UI-flows
• Lichtgewicht en uiterst efficiënt state management met Zustand en Immer
• Polijsten van animaties en pagina-overgangen met Framer Motion
• Migreren van build-systemen van Webpack (CRA) naar Vite voor razendsnelle ontwikkeling

Gevonden oplossingen

• Het opzetten en configureren van React met Vite
• Het programmatisch simuleren en berekenen van de officiële scores voor stripboeken