Learning Algorithms

An interactive, fully client-side web app for visualizing core Operating System algorithms, from CPU scheduling to memory management, virtual memory, deadlock handling, and a lot of other algorithms.

Whether you're studying for an exam or just curious about how these foundational algorithms work behind the scenes, this project helps you explore each one through animated, step-by-step visualizations.

---

🔧 Built With

• Vue 3 (Composition API)
• Tailwind CSS for clean, responsive design
• Vite for fast development and build performance

---

🧠 What This Project Offers

Algorithm Walkthroughs

Every algorithm includes a brief overview of:

• What problem it's solving
• How it works conceptually
• A step-by-step breakdown of execution on user-defined input

Interactive Inputs

You’re not locked to pre-filled examples. Change process data, resource matrices, memory sizes, and instantly see the results reflected in the visualization.

Clear, Modern UI

Built to be intuitive for learners, with a clear step-by-step illustration on how the algorithm runs.

---

Run the Project Locally

Make sure you have:

• Node.js (v16 or above)
• pnpm, npm, or yarn

Then, copy .env.example to .env in the root of the project.

Finally, open the terminal in the directory of the project and run:

npm install
npm run dev

🙌 Contributions Welcome

Spotted a bug? Have an idea for a new feature or algorithm? Want to improve the UI or fix some typos?

Feel free to open an issue or submit a pull request. Whether it's a small tweak or a big addition, contributions of all kinds are appreciated!

Before submitting, consider:

• Keeping the codebase clean and consistent with the existing structure.
• Writing clear commit messages and PR descriptions.
• Including screenshots or context if your change affects the UI.

Thanks for helping improve the project!

📌 Development Guidelines

Code Formatting

Please ensure you have the appropriate .vscode extensions installed as specified in .vscode/settings.json. Use the designated formatter for each file type:

• Vue files (.vue) → Format with Vue Volar
• JavaScript & CSS files → Format with Prettier

Adding a New Algorithm

To scaffold a new algorithm, run:

npm run generate:algorithm

This script will:

• Create a new Vue component in /src/views/algorithms
• Automatically register the route

You can then begin adding your logic and UI. Once your work is complete, submit a pull request on your feature branch.

🔁 Tip: If your changes affect the UI, include a screenshot or short description in your PR to help reviewers understand the context.

Searching for Algorithms with Algolia

Due to rate limits, the searchbar only allows you to search 10 times/hour using the default demo API keys provided in .env.example. For extended development:

1. Create an algolia account.
2. Replace the default demo credentials in the .env, including the app ID, search key, and write key, with your own.
3. Temporarily set the NODE_ENV to production. This is so that the following script imports the records to your project. Optionally, keep it on development to save the file to scripts/tmp/algoliaRecords.json, and manually import the records.
4. Then run:

npm run indexAlgoliaRecords

5. Set the NODE_ENV back to development.
6. In Algolia, the primary text is set to title, secondary text is set to sections.0.content, tertiary text is set to sections.0.title, and image url is set to figures.0.src. The rest should be kept as-is.

⚠️ IMPORTANT NOTE:

If NODE_ENV is set to production, the script will automatically import the records to your project for indexing. If not, then it will be saved in scripts/tmp/algoliaRecords.json where you can manually import it to the project.