Hall of Justice

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.

Gebruikte technologieën

Wat ik heb geleerd

• TypeScript
• Ontwerpen en opvragen van schema’s in Sanity.io
• Gatsby verbinden met Sanity via GraphQL
• Lichtgewicht state management met Zustand en Immer
• Deployen van serverless functions en statische websites op Netlify