/interactive-OS-Summarized

An interactive, modern learning site for Operating Systems students. It visualizes core topics from a typical OS course (inspired by Operating System Concepts by Silberschatz, Galvin & Gagne) with step‑by‑step simulators and calculators. Pure frontend — no backend required.

Primary LanguageJavaScript

OS Interactive — Operating Systems Concepts (React + Vite + Tailwind)

An interactive, modern learning site for Operating Systems students. It visualizes core topics from a typical OS course (inspired by Operating System Concepts by Silberschatz, Galvin & Gagne) with step‑by‑step simulators and calculators. Pure frontend — no backend required.

Live locally with Vite, responsive UI via Tailwind CSS, and a tiny hash‑based router to keep dependencies minimal.

Quick Start

  • Requirements: Node 18+ and npm
  • Install: npm install
  • Dev server: npm run dev (opens at http://localhost:5173)
  • Production build: npm run build
  • Preview build: npm run preview

What You Can Do

  • Memory Management
    • Paging simulator: frames, process pages, internal fragmentation, logical→physical translation
  • Virtual Memory
    • Page replacement (FIFO/LRU/OPT): step table, hits/faults counters
  • File System Structure & Implementation
    • Allocation visualizer: contiguous, linked, indexed; free‑space bitmap mock
  • Storage Systems & Scheduling
    • Disk head ordering: FCFS, SSTF, SCAN/LOOK, C‑SCAN; total seek distance
  • File‑System Interfaces
    • Attributes toggles; directory structure summaries (single/two‑level/tree/DAG)
  • I/O Systems
    • Timeline of requests, interrupts, and transfers; DMA vs PIO CPU overhead
  • System Protection
    • Access Matrix editor; derived ACLs (by object) and capabilities (by subject)
  • Security
    • Caesar cipher toy + SHA‑256 hashing via WebCrypto
  • Deadlocks
    • Resource‑allocation graph with cycle detection; Banker’s Algorithm safety check

All pages include short explanations, with sliders/inputs and sample data to explore scenarios immediately.

Project Structure

  • index.html — Vite entry with Tailwind import
  • src/main.jsx — React bootstrap
  • src/App.jsx — App shell + simple hash router wiring
  • src/index.css — Tailwind CSS import
  • Components (visualizations)
    • src/components/PagingSimulator.jsx
    • src/components/PageReplacementSimulator.jsx
    • src/components/DiskSchedulingSimulator.jsx
    • src/components/AccessMatrixVisualizer.jsx
    • src/components/IOSchedulerDemo.jsx
    • src/components/BankersSimulator.jsx
    • src/components/FileSystemVisualizer.jsx
    • src/components/ResourceGraph.jsx
    • src/components/Nav.jsx
    • src/components/SimpleRouter.jsx (tiny #/route hook)
  • Pages
    • src/pages/Home.jsx (dashboard)
    • src/topics/*.jsx (one per OS topic)
  • Data
    • src/data/topics.js (home card metadata)

Routing (No Extra Library)

The app uses window.location.hash to keep routes simple: #/home, #/memory, #/virtual, #/filesystems, #/storage, #/fsinterfaces, #/io, #/protection, #/security, #/deadlocks.

  • Hook: src/components/SimpleRouter.jsx exposes useHashRoute() and navigate(key)
  • Add a route: import your page component in src/App.jsx, add an entry in the routes map, and add a nav item in src/components/Nav.jsx (optional).

Tailwind Styling

Tailwind v4 is already configured (see src/index.css). Components follow a consistent, accessible style (high contrast, clear spacing) suitable for student use on mobile or desktop.

Adding a New Topic or Tool

  1. Create a component in src/components/YourTool.jsx
  2. Create a page in src/topics/YourTopic.jsx and render your tool(s)
  3. Wire it in src/App.jsx (routes map) and src/components/Nav.jsx
  4. Add a card in src/data/topics.js to show it on the home dashboard

Tips:

  • Keep state local to the component; prefer simple numeric/string inputs
  • Provide sensible defaults so the demo works instantly
  • Add brief explanatory text and a legend for visuals

Educational Notes

  • Algorithms here are accurate for teaching and exploration, but intentionally simplified for clarity.
  • Useful for classroom demos and self‑study: change inputs, step through, and inspect results.
  • The content paraphrases widely taught OS concepts; it is intended as an aid, not a substitute for your primary textbook or lectures.

Deploying

  • Static hosting works out of the box after npm run build
  • Serve the dist/ directory via any static host (GitHub Pages, Netlify, Vercel, S3, etc.)

Scripts

  • npm run dev — Local development with HMR
  • npm run build — Production build to dist/
  • npm run preview — Preview the build locally

Contributing (For Your Juniors)

  • Pick a topic you want to improve (e.g., add SCAN animation, visualize TLB hits)
  • Keep components small and documented
  • Use the existing UI patterns for consistency
  • Test with a few different inputs and edge cases

Acknowledgements

  • Inspired by topics in “Operating System Concepts” (Silberschatz, Galvin, Gagne)
  • Built with React, Vite, and Tailwind CSS