Comic Shop

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.

Packages

GatsbyTypeScriptSanityFramer-MotionZustandImmer

I learned

Project Gallery

E-commerce homepage showing the comic book collection gridDetailed inventory overview filtering comics by publication seriesReal-time search interface with instant results filtering

Other branches

Sample of the Homepage
Sample of the new grader path
Sample of the pro grader path
Sample of the final result page

Comic Grading

An interactive web application that makes comic book grading accessible to collectors, estimating grades based on the industry-standard 10-point scale.

View details
Sample of the admin dashboard homepage
Sample of the comic detail view
Sample of the publisher management page
Sample of the user registration page
Sample of the series overview page
Sample of the user administration page

Comic Shortbox

A virtual shortbox web application to catalog comic book collections, list duplicate issues for sale, and purchase missing issues from other collectors.

View details
Sample of the login screen
Sample of player 1 screen
Sample of player 2 screen
Sample of player 3 screen
Sample of player 4 screen

Poker

A multiplayer Texas Hold'em poker game supporting up to 4 players, featuring a Node.js game server, real-time WebSockets, and Redux state management.

View details