/Algolizer

A web application built with TypeScript, CSS, HTML, and React for the frontend, and Node.js for the backend, that visualizes graph and sorting algorithms for enhanced understanding.

Primary LanguageTypeScript

🌟 Algolizer

Algolizer is a full-stack web application designed to visualize and explore various algorithms. With an interactive platform, users can dive into sorting and graph algorithms, view detailed visualizations, and control the algorithm execution to gain a deeper understanding.

Made with HTML Made with JavaScript Made with CSS Made with TypeScript Made with React Made with Node.js

🚀 Features

Frontend:

  • Built with React, TypeScript, JavaScript, HTML, and CSS.

Backend:

  • Powered by Node.js.

API Library:

  • Utilizes Axios for API interactions.

Algorithms Visualized:

  • Graph Algorithms:

    • Depth-First Search (DFS) 🕵️‍♂️
    • Breadth-First Search (BFS) 🔍
    • Dijkstra's Algorithm 🚦

  • Sorting Algorithms:

    • Bubble Sort 💧
    • Quick Sort ⚡
    • Insertion Sort ✨
    • Selection Sort 🏆
    • Heap Sort 🏰

User Controls:

  • Reset 🔄
  • Speed Up ⏩
  • Pause ⏸️
  • Resume ▶️
  • Auto Generate 🔄
  • Manual Generate 🛠️

Additional Screens:

  • Info Screen: Provides detailed information about the algorithm, including pseudocode and additional references. 📚
  • Complexity Screen: Explains algorithmic complexity and its significance. 📊

📸 Screenshots

Split Screen

Sort Screen

Graph Screen

Info Screen

Complexity Screen

🌐 Live Demo

You can check out the live version of Algolizer at Live Demo.

🛠️ Installation

  1. Clone the repository:
git clone https://github.com/yourusername/algolizer.git
cd algolizer
  1. Frontend Setup:
  • Navigate to the frontend directory:
cd frontend
  • Install dependencies:
npm install
  • Start the frontend:
npm run dev
  1. Backend Setup:
  • Navigate to the backend directory:
cd ../backend
  • Install dependencies:
npm install
  • Start the backend:
npm run dev