Interactive web app to visualize page replacement algorithms used in operating systems. Simulate and compare FIFO, LRU, Optimal, and Clock algorithms with step-by-step animations, statistics, and charts.
- Interactive simulation with play, pause, next, previous, and reset controls
- Supports algorithms: FIFO, LRU, Optimal, Clock
- Configurable memory frame count and reference string input
- Live visualization of memory frames and (for Clock) the pointer bit
- Step-by-step descriptions for each reference
- Statistics: total references, page faults, hits, hit ratio, fault ratio
- Comparison chart to evaluate algorithms on the same input
- Vite
- React + TypeScript
- Tailwind CSS + shadcn/ui
- Chart components and Canvas-based visualizations
Prerequisites: Node.js and npm — install with nvm
# Clone the repository
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>
# Install dependencies
npm install
# Start the dev server
npm run dev
# Build for production
npm run build
# Preview the production build
npm run preview- Choose an algorithm (FIFO, LRU, Optimal, Clock).
- Enter a reference string (comma-separated integers, e.g.,
7,0,1,2,0,3,0,4,...). - Set the number of memory frames.
- Click "Start Simulation".
- Use controls to step through or autoplay the simulation and adjust speed.
- Review statistics and the comparison chart to analyze performance.
src/pages/Index.tsx: Main page and simulation orchestrationsrc/utils/pageReplacementAlgorithms.ts: FIFO, LRU, Optimal, Clock implementationssrc/components/ControlPanel.tsx: Inputs and simulation controlssrc/components/MemoryFrame.tsx: Memory frame visualizationsrc/components/StatisticsPanel.tsx: Metrics displaysrc/components/SimulationChart.tsxandsrc/components/ComparisonChart.tsx: Chartssrc/types/pageReplacement.ts: Types for steps and statistics
This is a static site built with Vite. Deploy the dist folder to any static host (e.g., GitHub Pages, Netlify, Vercel, or your own server).
npm run build
# then deploy the generated dist/ directory