OS Learning Hub 🎓
OS Learning Hub is a dynamic, single-page web application built with React and Bootstrap to provide an interactive way to learn fundamental Operating System concepts. It features a hands-on CPU scheduling simulator and a concise blog covering key OS structures.
🔐 User Authentication: Simple client-side registration and login system to simulate a personalized experience.
📊 CPU Scheduling Simulator:
Visually simulate First-Come, First-Served (FCFS) and Shortest Job First (SJF) algorithms.
Dynamically add or remove processes with custom arrival and burst times.
View a real-time Gantt chart, average turnaround time, and average waiting time.
📚 OS Concepts Blog:
Browse easy-to-understand articles on core OS structures like Monolithic, Microkernel, Hybrid, Layered, and Modular kernels.
Clean, readable, and consistent UI for a smooth learning experience.
✨ Modern UI: A sleek, dark-themed dashboard interface that is fully responsive.
Frontend: React.js
Styling: Bootstrap 5 (via CDN)
Language: JavaScript (JSX)
Data Storage: Browser Local Storage & Session Storage (for demonstration purposes)
This project is a single-file application that runs entirely in the browser, but it needs to be served by a local web server because it loads a JSX module.
Prerequisites You just need a modern web browser and a simple local server.
Installation & Running Download the Project: Download or clone the project files (index.html, App.jsx, etc.) into a single folder on your computer.
Start a Local Server: You cannot open the index.html file directly. You must serve it. Here are two easy ways:
Using Python (usually pre-installed on Mac/Linux): Open your terminal, navigate to the project folder, and run:
Bash
python -m http.server Using Node.js / npm: Open your terminal, navigate to the project folder, and run:
Bash
npx serve View the App: Open your web browser and go to http://localhost:8000 (or whatever address your local server provides). The application should now be running.
Authentication: User data is "hashed" using Base64 (btoa) and stored in the browser's Local Storage. This is for demonstration only and is not secure for production environments.
Simulator Logic: The scheduling algorithms are implemented in pure JavaScript. They process the list of jobs, calculate all metrics, and the results are passed to the React state to trigger a re-render of the Gantt chart and results table.
Single-File Structure: All components, logic, and data are contained within the App.jsx file for simplicity and portability.