Algorithm Visualizer

Interactive visualizations to help you understand how different algorithms work. Explore, learn, and see algorithms in action.

Live demo: algo.mmalekrais.com

Source aligns with the live website content: Algorithm Visualizer – interactive learning for sorting and pathfinding algorithms. See the deployed experience here: https://algo.mmalekrais.com/.

✨ Features

• Sorting algorithms: Bubble Sort, Merge Sort, Quick Sort, Heap Sort
• Pathfinding algorithms: Dijkstra's Algorithm, A* Search, Breadth-First Search, Depth-First Search
• Interactive controls: adjust input size, speed, and parameters; step-through animations
• Comparative learning: visualize performance trade‑offs and algorithm mechanics side‑by‑side
• Modern UI: accessible, responsive interface with smooth animations

Reference: https://algo.mmalekrais.com/

🧱 Tech Stack

• Framework: Next.js 15 (App Router)
• UI: React 19, Tailwind CSS, Radix UI primitives
• Language: TypeScript

🚀 Getting Started

Prerequisites: Node.js 18+ and npm (or yarn/pnpm/bun).

Install dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Build for production:

npm run build

Start the production server:

npm start

📜 Available Scripts

Scripts are defined in package.json:

• npm run dev: start the Next.js dev server
• npm run build: build the application
• npm start: start the production server
• npm run lint: run lint checks

📁 Project Structure

High‑level layout (key files only):

my-project/
  public/           # Static assets
  src/              # Application source
  next.config.ts    # Next.js configuration
  tailwind.config.* # Tailwind configuration
  package.json      # Scripts and dependencies
  README.md         # You are here

Pages and components may live under src/app and src/components depending on the setup.

📦 Deployment

The project can be deployed to any Node-compatible host. For best results with Next.js:

• Vercel: Seamless deploys, image optimization, and edge support.
• Configure environment variables and build command (next build) per your host.

Learn more: Next.js Deployment Guide (https://nextjs.org/docs/app/building-your-application/deploying).

🧠 Learning Goals

• Learn by seeing: Visual representations make complex algorithms intuitive
• Compare efficiency: Observe behavior and time/step differences across algorithms
• Experiment: Tweak inputs to see how algorithms adapt in different scenarios

Content inspired by the live experience: https://algo.mmalekrais.com/.

🤝 Contributing

Contributions are welcome! If you have ideas for new algorithms, UI improvements, or performance tweaks:

1. Fork the repo
2. Create a feature branch
3. Commit your changes with clear messages
4. Open a pull request with context, screenshots, and rationale

🔒 License

No license is currently specified. If you plan to distribute or accept contributions, add a LICENSE file (e.g., MIT) and update this section.

🙏 Acknowledgements

• Built with Next.js, React, TypeScript, Tailwind CSS, and Radix UI
• Algorithm education inspiration from classic CS curricula and visual tools

—

For an overview and demo, visit: https://algo.mmalekrais.com/