VALGO

Live Demo

Check out the live demo here.

About The Project

Valgo is an interactive, narrated visualizer for nine classic sorting algorithms, redesigned in a 3Blue1Brown-inspired style: a dark, grid-lined canvas, smooth per-step animation, a live "what's happening and why" commentary track, and a growth-curve chart that makes Big-O visually concrete.

Every algorithm runs once, up front, recording a full sequence of steps (compare, swap, pivot selection, merge, bucket placement...). The player then replays that sequence at any speed, and can be paused or scrubbed like a video — nothing is re-computed on the fly.

Features

• Nine algorithms, each with color-coded state (comparing, swapping, pivot, sorted) and a sliding pointer that always shows where the algorithm is "looking"
• A synced narration panel explaining each step in plain language, in all 10 supported languages
• A growth-curve chart plotting O(n²), O(n log n), and O(n + k) side by side, with a live marker at the current array size
• Scrubbable timeline, adjustable speed, and live comparison/write counters
• Adjustable array size, shuffle, and reset
• Responsive, dark, 3Blue1Brown-inspired visual design

Supported Algorithms

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

Built With

• Next.js
• React
• TypeScript
• Tailwind CSS

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v14 or later)
• npm

Installation

1. Clone the repo

   git clone https://github.com/Quinta0/valgo.git
   

2. Navigate to the project directory

    cd valgo
   

3. Install dependencies

    npm install
   

4. Start the development server

    npm run dev
   

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

Usage

• Select a sorting algorithm from the dropdown menu.
• Adjust the array size using the slider if desired.
• Click the "Start" button to begin the visualization.
• Use the "Pause" and "Resume" buttons to control the animation.
• Click "Reset" to generate a new random array.
• Read the algorithm explanation provided below the visualization.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch git checkout -b feature/AmazingFeature
3. Commit your Changes git commit -m 'Add some AmazingFeature'
4. Push to the Branch git push origin feature/AmazingFeature
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.