Algorithm Visualizer – Sorting and Pathfinding

Algorithm Visualizer is an interactive web application that demonstrates classic sorting algorithms and pathfinding algorithms through real-time visualizations designed to support teaching and learning core Computer Science concepts.

The project helps users understand how algorithms behave step by step by combining animated visual feedback with adjustable controls such as data size, speed, and grid obstacles.

---

Key Features

✔ Interactive sorting algorithm visualizations
✔ Dijkstra pathfinding visualization on a grid
✔ Adjustable dataset size and animation speed
✔ Obstacle placement with configurable start and end nodes
✔ Real-time algorithm animation for learning and demonstration
✔ Responsive web interface
✔ Unit testing with Jest
✔ End-to-end testing with Cypress

---

Technologies Used

• Next.js
• TypeScript
• Tailwind CSS
• Jest
• Cypress
• React-based UI architecture

---

Project Architecture

The application is structured into separate components for UI rendering, algorithm logic, animation control, and testing.

Sorting Visualizer

• Bubble Sort
• Selection Sort
• Insertion Sort
• Merge Sort
• Heap Sort
• Quick Sort

Pathfinding Visualizer

• Dijkstra’s Algorithm
• Adjustable start and end points
• Grid obstacle placement
• Interactive control panel

Testing

• Jest for unit testing
• Cypress for end-to-end browser testing

---

Live Demo

Live Demo:
Algorithm Visualizer on Vercel

---

Project Structure

algorithm-visualizer
│
├── app/
├── components/
├── cypress/
├── public/
│   └── screenshots/
│       ├── home.png
│       ├── sorting.png
│       └── pathfinding.png
├── tests/
├── utils/
├── README.md
├── package.json
└── LICENSE

---

Application Screenshots

Home / Control Interface

Sorting Visualization

Pathfinding Visualization

---

Running the Project

Requirements

• Node.js 18+
• npm

Setup

Clone the repository:

git clone https://github.com/rosscyking1115/algorithm-visualizer.git
cd algorithm-visualizer

Install dependencies:

npm install

Run the development server:

npm run dev

Then open:

http://localhost:3000

---

Future Improvements

• Add more pathfinding algorithms such as A* and BFS
• Add algorithm complexity explanations directly in the interface
• Improve mobile responsiveness
• Add sound or step-by-step playback mode
• Support custom array input and maze generation

---

Skills Demonstrated

• TypeScript
• Next.js
• Frontend component architecture
• Algorithm visualization
• UI state management
• Web-based interactive design
• Unit testing
• End-to-end testing

---

Notes

This project was originally developed as part of undergraduate study in Computer Science at Queen’s University Belfast, and has been refined and presented here as a portfolio project focused on interactive algorithm education and frontend software engineering.

---

Author

Cheng-Yuan King