Memory Magic Show — Page Replacement Simulator

Interactive visualization and comparison of page replacement algorithms (FIFO, LRU, Optimal, Clock). Tune inputs, step through the simulation, and review performance statistics and charts.

Features

• Visual step-by-step simulation of selected algorithm
• Live progress, memory frames view, and current step details
• Statistics: page faults, hits, ratios
• Charts for simulation progress and cross-algorithm comparison
• Clean UI built with shadcn-ui + Tailwind

Tech Stack

• Vite
• React + TypeScript
• shadcn-ui
• Tailwind CSS
• Recharts

Getting Started

Prerequisites: Node.js and npm (or pnpm/bun). We recommend installing Node via nvm: https://github.com/nvm-sh/nvm#installing-and-updating

# 1) Clone the repository
git clone <YOUR_GIT_URL>
cd memory-magic-show

# 2) Install dependencies
npm install

# 3) Start the development server
npm run dev

The app will start locally (Vite will print the URL, typically http://localhost:5173).

Scripts

• npm run dev: Start the development server
• npm run build: Build for production
• npm run preview: Preview the production build locally

Project Structure

• src/pages/Index.tsx: Main simulation page (controls, visualization, charts)
• src/components/: UI components (charts, panels, frames, etc.)
• src/utils/pageReplacementAlgorithms.ts: Algorithm implementations
• src/types/: Shared TypeScript types

Deployment

Any static hosting works (Netlify, Vercel, GitHub Pages, etc.).

General steps:

npm run build
# Deploy the contents of the generated `dist/` folder to your host

License

MIT