DevxSubh
I develop 3D visuals, user interfaces and web applications.
Loading...0%
DevxSubh
DevxSubh
Menu
Menu
Close
Close
Back to projects
CPU Scheduling Visualizer

CPU Scheduling Visualizer

Built an interactive simulator for operating-systems education: users configure processes, pick algorithms (FCFS through MLFQ, Lottery, Stride, FCFS+I/O, custom JS, and more), and see animated Gantt charts, waiting/turnaround metrics, CPU utilization, and optional side-by-side comparison of up to four algorithms. The app includes step-by-step playback, smart algorithm switching heuristics, saved scenarios, presets, and shareable state via URL. Simulation runs in the Next.js app with POST /api/simulate for server-side runs (custom algorithm stays client-only).

Timeline

2 months

Role

Full-Stack Developer

Team

Solo

Status

Completed
Live DemoSource Code

Technology Stack

Next.js 14

React 18

TypeScript

Tailwind CSS

Framer Motion

GSAPMUI X Chartshtml-to-image

Key Features

15+ scheduling algorithms with documented behavior in the UI
Interactive Gantt chart with step controls and ready-queue narration
Compare up to four algorithms with aligned metrics
Performance metrics: waiting, turnaround, response, throughput, context switches, utilization
Smart switcher that can move off RR or FCFS when heuristics detect poor behavior
Share link, CSV/JSON export, Gantt PNG export, saved scenarios and quick-load presets
Landing plus dedicated simulator route; responsive dark UI

Key Learnings

  • CPU scheduling simulation architecture in TypeScript with a clear separation of engine vs UI
  • Next.js App Router with API routes for serverless simulation
  • Framer Motion and charting for time-based visualizations
  • Packaging OS concepts for students and developers in one deployable app

Key Challenges

  • Correct, testable implementations across many algorithms and edge cases
  • Keeping the UI responsive while recomputing simulations and animations
  • URL state encoding for shareable, bookmarkable configurations
  • Balancing educational clarity (step mode, explanations) with power-user features (compare, export)

Impact & Results

Public deployment at cpu.devxsubh.com for hands-on OS learning
Open-source repo with detailed README and optional report.pdf for coursework
Reusable API contract for scripted or external simulations

Future Enhancements

Additional algorithms or coursework-specific presets
Deeper accessibility for the simulator controls
Optional embeddable widget mode for course sites

Previous Project

Nutrition & Obesity Trends Analysis (Bell-Labs)

Next Project

Kronus — Real Estate Brand Kit & Identity

Related Projects

Based on technology stack and category similarity

Lexora — AI-Powered Contract Lifecycle Management (CLM)

Completed

Compliance-oriented CLM platform for Indian lawyers and SMEs: pnpm monorepo with Next.js 14 client and Express 4 API, MongoDB, JWT (RS256), BlockNote editor, digital signatures, exports, and Gemini-powered features with optional Ollama fallback—including vectorless, PageIndex-style contract Q&A with line-level citations.

Technologies:

Next.js 14React 18TypeScriptTailwind CSS+12

Hilink — Camping & Adventure Landing Website

Completed

A marketing website for Hilink, an outdoor adventure companion: hero with Putuk Truno Camp, social proof, “How we work” with trail stats and camp maps (e.g. Prigen Pasuruan, Mountain View), problem story for hikers, feature blocks on offline maps, trip scheduling, AR trail guidance, and fresh locations—plus app download CTAs and a full Hilink footer (About, community, contact).

Technologies:

Next.jsReactTypeScriptTailwind CSS