Comic Grading for Everyone

Assignment

The goal of this project was to develop an application that makes comic book grading accessible to collectors wishing to estimate the physical condition of their books. The concept was inspired by an old, defunct grading app I discovered on the Wayback Machine. I reverse-engineered how it calculated defects and set out to build a modern, responsive successor.

---

Evolution & UI/UX Redesign

The project originally began in early 2018, but the initial version was a user-experience disaster. It featured a single, incredibly long form displaying every possible defect at once, creating an overwhelming and tedious process, even though the underlying algorithm (estimating grades using the official 10-point grading scale ) worked flawlessly.

In 2021, I revived the project to completely redesign the UI/UX. To make the grading process engaging and intuitive, I split the extensive checklist into categorized, step-by-step wizard pages and designed two tailored workflows:

• Beginner Path: A comprehensive step-by-step wizard that guides new collectors through each category of defects one by one.
• Pro Path: A streamlined single-screen interface allowing experienced graders to instantly select the specific defects they’ve already identified, maximizing speed and efficiency.

Upon completing either workflow, the application calculates and displays an estimated grade alongside a detailed breakdown of all selected defects.

---

State Management & Performance

To ensure fluid state transitions and optimal performance, I experimented with modern libraries and build systems:

• Zustand & Immer: Moving away from complex React Context structures and heavy Redux configurations, I adopted the lightweight Zustand and Immer combination. This pairing delivers a highly reactive, intuitive developer experience with a fraction of the bundle size and boilerplate code of standard Redux.
• Fluid Animations: I integrated Framer Motion to introduce smooth page-to-page transitions and interactive hover micro-animations that make the UI feel alive and responsive.
• Vite Migration: I migrated the build setup from Webpack (via Create React App) to Vite , yielding a blistering fast local development experience and drastically reduced production build times.

---

Technologies used

I Learned

• Splitting complex forms into intuitive, multi-step wizard workflows
• Lightweight and highly efficient state management using Zustand and Immer
• Creating polished, fluid page transitions and interactive micro-animations using Framer Motion
• Migrating build systems from Webpack (CRA) to Vite for a superior development workflow

---

Solutions Found

• Scaffolding and configuring React with Vite
• Simulating and programmatically calculating official comic grading scales