dsa-visualizer

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 26)

Interactive web app for visualizing and learning data structures with animations and step-by-step operations. Built with Next.js, TypeScript, React Flow, and Framer Motion

dsa-visualizer Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Data Structure Visualizer

An interactive web application for learning data structures through visual animations and step-by-step operations. Built with Next.js 14, TypeScript, Shadcn/ui, React Flow and Framer Motion.

![DS Visualizer Landing Page](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/landing-light.png)
![Stacks](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-st.png)
![Queue](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-q.png)
![Linked List](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-ll.png)
![Polynomial](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-polynomial-multiplication.png)
![Heap](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-heap.png)
![Binary Tree](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-bst.png)
![AVL Tree](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-avl.png)
![Huffman](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-huffman.png)
![Dijkstra](https://raw.githubusercontent.com/CubeStar1/dsa-visualizer/main/public/ds-dijkstra.png)

## Features

### Data Structures
- **Linked Lists**: Singly, doubly, and circular implementations
- **Stack & Queue**: LIFO/FIFO operations with visual feedback
- **Trees**: BST and AVL with auto-balancing visualizations
- **Heap**: Min/max heap implementations with heapify animations

### Applications
- **Infix to Postfix Conversion**: Expression conversion using stacks
- **Message Queue System**: Producer-consumer queue simulation
- **Polynomial Multiplication**: Using linked list representation
- **Huffman Coding**: Encoding and decoding messages using a Huffman tree
- **Dijkstra's Algorithm**: Finding the shortest path between nodes in a graph

## Tech Stack

- **Framework**: Next.js 15
- **Language**: TypeScript
- **Styling**: TailwindCSS
- **Animations**: Framer Motion
- **Graph Visualization**: React Flow
- **UI Components**: Shadcn/ui

## Getting Started

1. Clone the repository:
```bash
git clone https://github.com/CubeStar1/ds-visualizer.git
cd ds-visualizer
```

2. Install dependencies:
```bash
npm install
```

3. Run the development server:
```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser

## Project Structure

```
ds-visualizer/
├── app/                    # Next.js app router pages
├── components/            
│   ├── ui/                # shadcn/ui components
│   ├── visualizer/        # Data structure visualizations
│   ├── landing/           # Landing page components
│   └── global/            # Global components
├── hooks/                 # Custom React hooks
├── lib/                  
└── content/              # Markdown content for explanations
```

dsa-visualizer

dsa-visualizer Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

dsa-visualizer

dsa-visualizer Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README