Solo

Pipeline CPU Simulator

Educational CPU pipeline visualizer. Step through instructions, watch hazards, forward, and stall. Built to make classic computer-architecture lectures concrete.

Year2024
DisciplineSW
StackReact · TypeScript · Vite
Pipeline CPU simulator — pipeline diagram

The problem

Classic computer-architecture lectures about pipelined CPUs are blackboard-heavy. Students memorize stalls, hazards, and forwarding, but rarely get to watch them. When something goes wrong in an exam question, they're guessing.

What I built

A React + TypeScript pipeline visualizer. You load a short assembly program, step forward or backward, and see every stage — fetch, decode, execute, memory, writeback — light up cycle by cycle. Data hazards surface visually; forwarding paths and stalls are drawn as first-class citizens rather than hand-waved.

Highlights

  • Cycle-accurate stepping — forward, backward, jump-to-cycle; no surprises.
  • Hazard detection + forwarding — visualized directly on the pipeline diagram.
  • Declarative instruction set — easy to extend with new instructions without rewriting the simulator.

What I learned

Teaching a thing is the only way to find the holes in your own understanding. Building this made me read the textbook three more times than the course asked me to — and every time I added a feature, I caught an error in my earlier mental model.