Interactive visualization tool for CPU scheduling algorithms with beautiful UI, real-time simulations, and comprehensive metrics.

• Features
• Quick Start
• Architecture
• Algorithms
• UI/UX
• API
• Installation
• Usage
• Project Structure

• 4 Single-Core Algorithms: FCFS, SJF, Round Robin, Priority
• 4 Dual-Core Algorithms: All algorithms with load balancing
• Real-Time Visualization: Gantt charts, animations, and metrics
• Algorithm Comparison: Run all algorithms simultaneously
• Performance Metrics: Waiting time, turnaround time, CPU utilization
• Random Process Generator: Instant test data generation

• Modern Design: Gradient backgrounds, smooth animations, emojis
• Dark/Light Mode: Complete theme support
• Responsive Layout: Works on desktop, tablet, mobile
• Interactive Controls: Real-time process editor
• Professional Charts: Chart.js visualizations
• Live Updates: Instant visual feedback

• Instant Calculations: <1ms for 100 processes
• Optimized Bundle: Only ~200KB gzipped
• Zero Latency: Client-side architecture
• Smooth Animations: 60fps transitions

./build.sh    # Build all components
./start.sh    # Start all services
# Open http://localhost:3000

Terminal 1 - C++ Backend:

cd cpp && mkdir -p build && cd build
cmake .. && make

Terminal 2 - Node.js API:

cd api
npm install
node server.js
# Runs on http://localhost:3001

Terminal 3 - Frontend:

cd frontend
npm install
npm run dev
# Opens http://localhost:3000

┌─────────────────────────────────────┐
│    Frontend (Next.js + React)       │
│    - Beautiful UI/UX                │
│    - Real-time visualization        │
│    - Interactive controls           │
└─────────────┬───────────────────────┘
              │ HTTP REST API
┌─────────────▼───────────────────────┐
│    Backend (Node.js + Express)      │
│    - API routing                    │
│    - Process spawning               │
│    - Data formatting                │
└─────────────┬───────────────────────┘
              │ IPC / Stdio
┌─────────────▼───────────────────────┐
│    Core (C++ Executables)           │
│    - Scheduling algorithms          │
│    - High-performance computation   │
│    - Process simulation             │
└─────────────────────────────────────┘

• Complexity: O(n)
• Best For: Simple workloads
• Characteristics: Non-preemptive, FIFO queue

• Complexity: O(n log n)
• Best For: Minimizing waiting time
• Characteristics: Optimal for waiting time

• Complexity: O(n)
• Best For: Fair scheduling, time-sharing
• Characteristics: Preemptive, time quantum based

• Complexity: O(n)
• Best For: Real-time systems
• Characteristics: Priority queue based

• Gradient backgrounds with smooth animations
• Color-coded metrics (blue, purple, amber, green)
• Responsive grid layout
• Professional typography

• Light mode with bright gradients
• Dark mode with slate colors
• Smooth theme transitions
• Full accessibility

• Real-time process table editor
• Drag-to-sort capabilities
• Instant data validation
• Visual feedback on interactions

• Animated Gantt charts
• Performance metric cards
• CPU utilization graphs
• Memory usage gauges
• Comparison tables

Run single-core scheduling

{
  "algorithm": "FCFS",
  "processes": [{ "id": 1, "arrivalTime": 0, "burstTime": 5, "priority": 1 }]
}

Run dual-core scheduling

{
  "algorithm": "DualCoreFCFS",
  "processes": [...],
  "timeQuantum": 2
}

Compare all algorithms

{
  "processes": [...],
  "timeQuantum": 2
}

Generate random processes

• Node.js 18+
• npm 9+
• C++17 compiler (g++ or clang)
• CMake 3.10+
• macOS/Linux (tested on both)

1. Clone Repository

git clone <repo-url>
cd OS-Project

2. Install Dependencies

cd frontend && npm install
cd ../api && npm install

3. Build C++ Backend

cd cpp
mkdir -p build && cd build
cmake ..
make
cd ../..

4. Set Environment Variables (optional)

export NEXT_PUBLIC_API_URL=http://localhost:3001

1. Configure Processes

   • Manually enter process details
   • OR use random generator
   • Set arrival times, burst times, priorities

2. Select Algorithm

   • Choose from 4 algorithms
   • Set time quantum (for Round Robin)
   • Toggle single-core/dual-core/compare modes

3. Run Simulation

   • Click "Run Schedule" button
   • Watch Gantt chart animate
   • View performance metrics

4. Analyze Results

   • Compare average waiting time
   • Compare average turnaround time
   • Analyze total execution time
   • View CPU utilization

5. Compare All

   • Run all algorithms simultaneously
   • Side-by-side comparison
   • Identify best algorithm for workload

OS Project/
├── 🎨 frontend/              # Next.js + React + TypeScript
│   ├── app/
│   │   ├── page.tsx         # Main page
│   │   ├── layout.tsx       # Root layout
│   │   └── globals.css      # Global styles
│   ├── components/          # 12+ React components
│   ├── types/               # TypeScript definitions
│   └── package.json
│
├── 🖥️ api/                   # Node.js + Express
│   ├── server.js            # API server
│   └── package.json
│
├── ⚙️ cpp/                   # C++ Core Engine
│   ├── src/                 # Source files
│   ├── build/               # Compiled binaries
│   └── CMakeLists.txt
│
├── 📚 Documentation
│   ├── README.md            # This file
│   ├── QUICKSTART.md        # Quick start
│   ├── PROJECT_STRUCTURE.md # Detailed structure
│   └── FRONTEND_IMPROVEMENTS.md
│
├── 🛠️ Scripts
│   ├── build.sh             # Build everything
│   └── start.sh             # Start services
│
└── 📄 Configuration
    ├── .gitignore
    └── package.json (root)

• AlgorithmSelector - Algorithm & mode selection
• ProcessInput - Process table editor
• GanttChart - Single-core Gantt visualization
• DualCoreGanttChart - Dual-core visualization
• MetricsTable - Performance metrics
• ComparisonTable - Algorithm comparison
• CPUUtilizationChart - CPU usage graph
• MemoryGauge - Memory usage widget
• RandomDataGenerator - Test data generator
• ThemeToggle - Dark/Light mode switch
• ThemeProvider - Theme context
• ComparisonView - Comparison layout

• Single-Core: FCFS, SJF, RoundRobin, Priority
• Dual-Core: DualCoreFCFS, DualCoreSJF, DualCoreRoundRobin, DualCorePriority
• Utilities: Process, Scheduler, ProcessGenerator

After using this tool, you'll understand:

• ✅ How CPU scheduling algorithms work
• ✅ Trade-offs between different algorithms
• ✅ Impact of time quantum on Round Robin
• ✅ Importance of priority levels
• ✅ Metrics: waiting time, turnaround time
• ✅ Dual-core load balancing
• ✅ Context switching overhead

Contributions welcome! Areas for improvement:

• Export results as PDF/CSV
• Save/load simulations
• More scheduling algorithms
• Mobile app version
• Performance benchmarking tools

MIT License - Feel free to use in personal/educational projects

• React 18 - UI library
• Next.js 14 - React framework
• TypeScript 5.2 - Type safety
• Tailwind CSS 3.3 - Styling
• Chart.js 4.4 - Data visualization
• Node.js 18 - Runtime
• Express.js - Web framework
• C++17 - Core algorithms
• CMake - Build system

For issues, questions, or suggestions:

• Check existing documentation
• Review code comments
• Create an issue in repository

Built as an educational project to visualize and understand CPU scheduling algorithms in operating systems.

Status: Production Ready ✅ Last Updated: January 2026 Version: 1.0.0

Happy Scheduling! 🚀

• C++ Compiler: GCC/Clang with C++17 support
• CMake: Version 3.10 or higher
• Node.js: Version 18 or higher
• npm or yarn

cd cpp
mkdir -p build
cd build
cmake ..
make

The compiled binary will be at cpp/build/bin/scheduler.

cd api
npm install

cd frontend
npm install

Start both servers with one command:

./start.sh

This will start:

• API server on http://localhost:3001
• Frontend on http://localhost:3000

Press Ctrl+C to stop both servers.

1. Start the API server (in one terminal):

cd api
npm run dev

The API will run on http://localhost:3001

2. Start the Next.js frontend (in another terminal):

cd frontend
npm run dev

The frontend will run on http://localhost:3000

1. Build the frontend:

cd frontend
npm run build
npm start

2. Start the API server:

cd api
npm start

1. Configure Processes: Add processes with their arrival time, burst time, and priority (if needed)
2. Select Algorithm: Choose a scheduling algorithm (or compare all)
3. Set Time Quantum: For Round Robin, specify the time quantum
4. Run Schedule: Execute the algorithm and view results
5. View Results:
   • Gantt chart showing process execution timeline
   • Performance metrics table
   • Comparison view (when comparing all algorithms)

Schedule processes using a single algorithm.

Request Body:

{
  "algorithm": "FCFS",
  "timeQuantum": 2,
  "processes": [
    { "id": 1, "arrivalTime": 0, "burstTime": 5, "priority": 2 },
    { "id": 2, "arrivalTime": 1, "burstTime": 3, "priority": 1 }
  ]
}

Response:

{
  "ganttChart": [...],
  "processes": [...],
  "avgWaitingTime": 2.5,
  "avgTurnaroundTime": 5.0,
  "totalTime": 8
}

Compare all algorithms with the same process set.

Request Body:

{
  "timeQuantum": 2,
  "processes": [...]
}

Response:

{
  "FCFS": {...},
  "SJF": {...},
  "RoundRobin": {...},
  "Priority": {...}
}

• Non-preemptive
• Processes executed in order of arrival
• Simple but may have high waiting times

• Non-preemptive
• Process with shortest burst time executes first
• Optimal for minimizing average waiting time

• Preemptive
• Each process gets a time quantum
• Fair scheduling, prevents starvation

• Non-preemptive
• Process with highest priority (lowest number) executes first
• Priority can be static or dynamic

• C++: Core scheduling algorithms
• Node.js/Express: API bridge
• Next.js 14: React framework
• Chart.js: Data visualization
• Tailwind CSS: Styling
• TypeScript: Type safety

MIT

Contributions are welcome! Please feel free to submit a Pull Request.