Comic Shop

Opdracht

Ik heb over de jaren heen een grote verzameling gelezen stripboeken opgebouwd die ik niet langer nodig had. Hoewel ik ze had kunnen verkopen via traditionele kanalen zoals eBay (dat een percentage van elke verkoop inhoudt) of lokale Facebook-groepen, wilde ik mezelf uitdagen als ontwikkelaar: zou ik mijn eigen webshop kunnen bouwen?

Om deze uitdaging echt spannend te maken, stelde ik mezelf een strikte beperking op: de hele tech-stack moest volledig gratis te bouwen, hosten en deployen zijn.

Oplossing & Architectuur

Om dit te bereiken, heb ik zorgvuldig een moderne, kosteloze tech-stack geselecteerd:

  • Headless CMS: In plaats van helemaal zelf een custom CMS te bouwen, heb ik gekozen voor Sanity.io. Dankzij het gulle gratis pakket en de aanpasbare schema’s kon ik snel inventarisschema’s voor stripboeken ontwerpen en data opvragen met behulp van GraphQL.
  • Frontend & Static Site Generation: Ik heb gekozen voor Gatsby om een razendsnelle, statische frontend te bouwen die de GraphQL-endpoint van Sanity aanspreekt.
  • State- & voorraadbeheer: Om een dynamisch winkelwagentje te beheren en de beschikbare voorraad bij te houden (aangezien de meeste strips slechts één fysiek exemplaar hadden), heb ik gekozen voor een combinatie van Zustand en Immer.
  • Hosting & CI/CD: De frontend wordt gehost op Netlify, wat zorgt voor een naadloze, in Git geïntegreerde continue implementatie en beveiligde serverless functions voor het bijwerken van de voorraadniveaus.

Dit project was een fantastische kans om dieper in TypeScript te duiken en legde de basis voor het omzetten van mijn toekomstige persoonlijke projecten naar strongly typed codebases.

Packages

GatsbyTypeScriptSanityFramer MotionZustandImmer

Bijgeleerd

Project Gallerij

E-commerce homepage met het raster van de stripboekenverzamelingGedetailleerd inventarisoverzicht waarin strips worden gefilterd op publicatiereeksRealtime zoekinterface met directe resultaatfiltering

Andere branches

Voorbeeld van de homepage van het beheerpaneel
Voorbeeld van een stripboekdetail
Voorbeeld van de uitgeversbeheerpagina
Voorbeeld van de registratiepagina
Voorbeeld van de seriepagina met alle reeksen
Voorbeeld van de gebruikersbeheerpagina

Comic Shortbox

Een virtuele 'shortbox' om je stripboekencollectie te catalogiseren, dubbele strips te koop aan te bieden en ontbrekende nummers van andere verzamelaars te kopen.

Bekijk details
Voorbeeld van de homepage
Voorbeeld van het beginnerstraject
Voorbeeld van het pro-traject
Voorbeeld van de uiteindelijke resultatenpagina

Comic Grading

Een interactieve applicatie die het beoordelen (graden) van stripboeken toegankelijk maakt voor verzamelaars door de staat te schatten op basis van de officiële 10-puntenschaal.

Bekijk details