AlgoViz

A web-based visualizer for CPU scheduling and page replacement algorithms, built with React and TypeScrip

⚙️ Operating System Algorithm Visualizer 📊

This project is a web-based visualizer 🌐 designed to help you understand and analyze CPU scheduling ⏱️ and page replacement 📄 algorithms. Built with React ⚛️ and TypeScript 📜, it provides an interactive and visually engaging experience ✨.

✨ Features

• CPU Scheduling Algorithms ⏱️:
  • First-Come, First-Served (FCFS) ➡️
  • Shortest Job First (SJF) ⏳
  • Priority Scheduling 🥇
  • Round Robin 🔄
  • Multi-Level Feedback Queue (MLFQ) 🪜
• Page Replacement Algorithms 📄:
  • First-In, First-Out (FIFO) 🚪
  • Least Recently Used (LRU) 🕰️
  • Optimal Page Replacement 🔮
  • Clock Algorithm ⏰
• Interactive Input ⌨️:
  • Easily input process/page data 📝 and algorithm parameters ⚙️.
  • Adjust parameters like time quantum ⏱️ and priority levels 🥇.
• Visualizations 📈:
  • Clear and dynamic Gantt charts 📊 for CPU scheduling.
  • Visual representation of page frame states 🖼️ for page replacement.
  • Animated transitions 🎬.
• Performance Metrics 📈:
  • Calculation and display of average waiting time ⏳, turnaround time 🔄, page fault rate ❌, and more.
  • Clear displays of the data 📊 and results 🏆.
• User Interface 🎨:
  • Modern and responsive design 📱 using Tailwind CSS 💨.
  • Smooth animations 🎬 with Framer Motion ✨.
  • Easy to use navbar 🧭 provided by Bootstrap 🚀.
• Documentation 📚:
  • Integrated documentation 📖 explaining each algorithm.

🚀 Getting Started

1. Clone the repository 📥:

   git clone [email protected]:Phani2603/AlgoViz.git

2. Navigate to the project directory 📂:

   cd your-repository-name

3. Install dependencies 📦:

   npm install

4. Start the development server 💻:

   npm start

5. Open your browser 🌐 and navigate to http://localhost:5173.

🕹️ Usage

1. Select an Algorithm 🎯: Choose either a CPU scheduling ⏱️ or page replacement 📄 algorithm from the dropdown menu ⬇️.
2. Input Data 📝: Enter the process/page data in the provided input fields ⌨️.
3. Adjust Parameters ⚙️: If applicable, modify the algorithm parameters (e.g., time quantum ⏱️, priority levels 🥇).
4. Visualize 📈: Click the "Visualize" or "Run" button ▶️ to see the algorithm in action.
5. Analyze Results 📊: Review the visualizations 📈 and performance metrics 🏆 displayed on the screen.
6. Documentation 📚: Click the documentation button 📖 to read about the algorithm being used.

🛠️ Technologies Used

• React ⚛️
• TypeScript 📜
• Tailwind CSS 💨
• Framer Motion ✨
• Bootstrap 🚀

🌐 Deployment

This project is deployed on Netlify:

• Your Netlify Site URL)

⏭️ Future Improvements

• Add more advanced algorithms 🧠.
• Implement real-time simulation capabilities ⏱️.
• Enhance the user interface 🎨 with more interactive features 🕹️.
• Add the ability to save and load data sets 💾.
• Improve documentation 📚 with interactive examples 💡.
• Add more robust testing ✅.

🤝 Contributing

Contributions are welcome! If you find a bug 🐛 or have an idea for a new feature 💡, please open an issue 📝 or submit a pull request 🔄.

📄 License

This project is licensed under the MIT License.

📧 Contact

If you have any questions or suggestions 💬, feel free to contact me at [email protected].