AlgoVisualiser

An interactive, step-by-step visualizer for Data Structures & Algorithms (DSA) and Algorithm Design & Analysis (AOA). Built with Next.js 16 + Tailwind CSS v4 on the frontend and FastAPI on the backend.

Features

• Step-by-step animation — scrub forward/backward, play/pause, adjust speed
• Dark / Light mode toggle
• 13 algorithm categories covering all major DSA + AOA topics

Algorithms Covered

Category	Algorithms
Sorting	Bubble, Selection, Insertion, Merge, Quick, Heap, Radix, Counting, Bucket, Shell, Cocktail, Comb, Tim
Searching	Linear, Binary, Jump, Interpolation, Exponential, Fibonacci, Ternary
Graphs	BFS, DFS, Dijkstra, Bellman-Ford, Kruskal, Prim, Floyd-Warshall, Topological Sort (DFS + Kahn)
Trees	BST, AVL, Inorder/Preorder/Postorder/Level-order traversal
Linked List	Singly, Doubly
Stack / Queue	Stack, Standard Queue, Circular Queue, Priority Queue
Hashing	Chaining, Linear Probing
Dynamic Programming	Fibonacci, LCS, 0-1 Knapsack, Coin Change, Edit Distance, LIS
Greedy	Activity Selection, Fractional Knapsack, Huffman Encoding
Backtracking	N-Queens, Rat in a Maze, Subset Sum
String Matching	Naive, KMP, Rabin-Karp, Z-Algorithm
Math / Number Theory	Sieve of Eratosthenes, GCD (Euclidean), Fast Exponentiation

Tech Stack

Frontend

• Next.js 16 (App Router, TypeScript)
• Tailwind CSS v4
• next-themes — dark/light mode
• Framer Motion — animations

Backend

• FastAPI — REST API returning pre-computed step arrays
• Pydantic v2 — request/response models
• Uvicorn — ASGI server

Project Structure

AlgoVisualiser/
├── backend/
│   ├── algorithms/          # Pure algorithm implementations (return step lists)
│   │   ├── sorting/
│   │   ├── searching/
│   │   ├── graphs/
│   │   ├── trees/
│   │   ├── data_structures/
│   │   ├── linked_list/
│   │   ├── hashing/
│   │   ├── dp/
│   │   ├── greedy/
│   │   ├── backtracking/
│   │   ├── strings/
│   │   └── math/
│   ├── models/
│   │   └── responses.py     # Pydantic step models
│   ├── routers/             # FastAPI route handlers
│   ├── main.py
│   └── requirements.txt
└── frontend/
    ├── src/
    │   ├── app/             # Next.js App Router pages (one per category)
    │   ├── components/
    │   │   ├── layout/      # Navbar, ThemeProvider
    │   │   ├── renderers/   # Category-specific visualizers
    │   │   └── visualizer/  # Shared PlaybackControls, StepDescription, etc.
    │   ├── hooks/
    │   │   └── useAlgorithmPlayer.ts
    │   ├── lib/
    │   │   ├── api.ts       # API fetch helpers
    │   │   ├── constants.ts # Algorithm metadata (complexity, pseudocode)
    │   │   └── utils.ts
    │   └── types/
    │       └── algorithm.ts # TypeScript step interfaces
    └── package.json

Getting Started

Prerequisites

• Node.js 18+
• Python 3.10+

1. Backend

cd backend
python -m venv venv

# Windows
venv\Scripts\activate
# macOS / Linux
source venv/bin/activate

pip install -r requirements.txt
uvicorn main:app --reload

API runs at http://localhost:8000. Docs at http://localhost:8000/docs.

2. Frontend

cd frontend
npm install
npm run dev

App runs at http://localhost:3000.

Quick start (both at once)

Windows:

start.bat

macOS / Linux:

chmod +x start.sh && ./start.sh

API Overview

Every endpoint accepts a POST request and returns a steps array. The frontend animates through this array client-side.

POST /api/sorting/{algorithm}       { array: number[] }
POST /api/searching/{algorithm}     { array: number[], target: number }
POST /api/graphs/{algorithm}        { nodes, edges, start_node, directed }
POST /api/trees/{bst|avl}           { operations: [{type, value}] }
POST /api/trees/traversal           { values, traversal }
POST /api/stack/simulate            { operations, max_size }
POST /api/queue/{simulate|circular|priority}
POST /api/linked-list/run           { list_type, operations }
POST /api/hashing/run               { hash_type, operations, table_size }
POST /api/dp/run                    { algorithm, ...params }
POST /api/greedy/run                { algorithm, ...params }
POST /api/backtracking/run          { algorithm, ...params }
POST /api/strings/run               { algorithm, text, pattern }
POST /api/math/run                  { algorithm, ...params }

Environment Variables

Frontend — create frontend/.env.local:

NEXT_PUBLIC_API_URL=http://localhost:8000

Defaults to http://localhost:8000 if not set.

License

MIT