Hall of Justice

Assignment

I accumulated a large collection of comic books over they years that I no longer needed. While I could have sold them through traditional platforms like eBay (which charges fees on each sale) or local Facebook groups, I wanted to challenge myself as a developer: could I build my own online storefront?

To make this challenge truly exciting, I set a strict constraint: the entire stack had to be completely free to build, host, and deploy.

Solution & Architecture

To achieve this, I carefully selected a modern, zero-cost tech stack:

• Headless CMS: Instead of building a custom CMS from scratch, I chose Sanity.io . Its generous free tier and highly customizable schemas allowed me to quickly design inventory models and query data using GraphQL.
• Frontend & Static Site Generation: I selected Gatsby to build a blazing-fast, static frontend that consumes the Sanity GraphQL endpoint.
• State & Stock Management: To manage a dynamic shopping cart and track real-time stock levels (as most comic books were one-of-a-kind), I implemented a combination of Zustand and Immer .
• Hosting & CI/CD: The application is deployed on Netlify , leveraging its seamless Git-integrated continuous deployment and secure serverless functions to handle secure stock level updates during checkout.

This project served as an excellent opportunity to dive deep into TypeScript , setting a solid foundation for adopting strongly-typed architectures in all my subsequent personal projects.

Technologies used

I Learned

• Strongly-typed programming with TypeScript
• Designing and querying headless schemas in Sanity.io
• Integrating Gatsby with a headless CMS via GraphQL
• Lightweight state management using Zustand and Immer
• Deploying static websites and serverless functions on Netlify