Project - Exploring cache behavior through interaction
An interactive Next.js and TypeScript demo for comparing direct-mapped, fully-associative, and set-associative caches.
- Project
- Cache Simulator
- Year
- Role
- Interactive systems demo, frontend implementation, educational UI
Overview
Cache behavior is easier to understand when the state is visible. This project lets users explore direct-mapped, fully-associative, and set-associative caches by adjusting inputs and observing how addresses land in cache lines or sets.
The interface is designed as a learning tool: it keeps the cache configuration, memory references, and resulting state close together so users can connect each step with the outcome.
What mattered
- Direct-mapped caches
- Fully-associative caches
- Set-associative caches
- Interactive explanation
The challenge was to make the simulator detailed enough to be useful without turning it into a wall of controls. The UI keeps the cache mode explicit and lets the current state do most of the teaching.
Result
- Cache mapping modes
- 3
- Interactive learning surface
- 1
- Browser-based demo
- 100%
- Static diagrams required
- 0