AlgoSketch is a modern, interactive web application designed to help students, developers, and computer science enthusiasts understand algorithms through beautiful visualizations. Watch sorting and searching algorithms come to life with step-by-step animations, detailed explanations, and multi-language code examples.

• 🎯 Educational Focus: Perfect for learning and teaching algorithms with clear, step-by-step breakdowns
• 🚀 Production Ready: Built with Next.js 15, React 19, and TypeScript for optimal performance
• 🎨 Beautiful UI: Modern, responsive design with dark/light mode support
• 📱 Progressive Web App: Install on any device and use offline
• 🔍 Comprehensive: 8+ algorithms with detailed explanations in 5 programming languages
• ⚡ Interactive Controls: Adjust speed, step through manually, or watch automated visualizations
• 🎭 Multiple Views: Switch between bar chart and node visualizations for different perspectives

• Bubble Sort - Simple comparison-based algorithm
• Insertion Sort - Efficient for small datasets
• Selection Sort - In-place comparison sort
• Merge Sort - Efficient divide-and-conquer
• Quick Sort - Fast partitioning algorithm
• Heap Sort - Heap-based sorting

• Linear Search - Sequential search
• Binary Search - Efficient search on sorted arrays

• Stack - LIFO data structure with push, pop, and peek operations
• Queue - FIFO data structure with enqueue, dequeue, and peek operations
• Linked List - Dynamic data structure with insert, delete, and search operations

• Dual Visualization Modes: Toggle between bar charts and node-based visualizations
• Step-by-Step Execution: Manually control each step or automate with adjustable speed
• Real-time Statistics: Track comparisons, swaps, and algorithm status
• Multi-Language Code: View implementations in JavaScript, Python, C, C++, and Java
• Syntax Highlighting: Beautiful code blocks with copy-to-clipboard functionality
• Comprehensive Documentation: Detailed explanations of how each algorithm works
• Performance Analysis: Time and space complexity breakdowns
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices

Experience it live at algosketch.vercel.app

AlgoSketch is built with cutting-edge technologies:

• Next.js 15 - React framework with App Router and Turbopack
• React 19 - Modern UI library with latest features
• TypeScript - Type-safe JavaScript
• Tailwind CSS 4 - Utility-first CSS framework
• Radix UI - Accessible component primitives
• Motion - Smooth animations and transitions
• MDX - Markdown with JSX for rich documentation
• Zustand - Lightweight state management
• Serwist - PWA support with service workers
• next-themes - Perfect dark mode support

Comprehensive documentation is available in the /docs directory:

• Architecture Overview - Application structure and design
• Visualizer Components - Component breakdown
• Algorithm Implementations - How algorithms work
• Creating New Visualizers - Extend with new algorithms
• Creating Shared Components - Reduce code redundancy
• Best Practices - Development guidelines

Unlike static tutorials, AlgoSketch lets you see algorithms in action. Pause, step through, rewind, and understand exactly what's happening at each moment.

Two visualization modes (bars and nodes) help different learning styles. Color-coded elements show you what's being compared, swapped, or already sorted.

• Algorithm explanation with step-by-step walkthrough
• Visual representation with real-time statistics
• Multi-language code implementations
• Time and space complexity analysis
• Practical use cases and optimizations

Built with Radix UI components ensuring keyboard navigation, screen reader support, and WCAG compliance.

Install AlgoSketch on your device and use it offline. Perfect for studying on the go!

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

• Built with Next.js and React
• UI components from Radix UI
• Animations powered by Motion
• Icons from Lucide
• Hosted on Vercel