Learn algorithms visually through real-time, interactive animations
🚀 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature
Vizit (Visualize It) is an educational platform that brings algorithms to life through smooth, GPU-accelerated animations and interactive visualizations. Perfect for students, educators, and anyone curious about how algorithms work under the hood.
- 🎯 Real-time visualization - Watch algorithms execute step-by-step with beautiful animations
- 🎨 Interactive controls - Pause, play, adjust speed, and navigate through each step
- 🌓 Dark/Light themes - Beautiful UI that adapts to your preference
- 📊 Performance metrics - Track comparisons, swaps, and complexity in real-time
- 🧩 Multiple data structures - From sorting algorithms to trees and graphs
- 🎓 Educational focus - Clear explanations and pseudocode for every algorithm
Coming Soon: Screenshots and GIFs showcasing Vizit in action!
| Bubble Sort | Merge Sort | B-Tree | Stack | Queue |
|---|---|---|---|---|
- ✅ Bubble Sort - Classic comparison-based sorting with step-by-step visualization
- ✅ Merge Sort - Efficient divide-and-conquer sorting algorithm with interactive demo
- 🚧 Quick Sort (Coming Soon)
- ✅ Stack - LIFO operations with push, pop, and peek animations
- ✅ Queue - FIFO operations with enqueue, dequeue, and peek animations
- ✅ B-Tree - Self-balancing tree with configurable minimum degree
- 🚧 Binary Search Tree (Coming Soon)
- 🚧 Hash Table (Coming Soon)
- 🚧 Queue (Coming Soon)
- 🚧 Linked List (Coming Soon)
- Step-by-step execution with pause/play controls
- Variable speed control (100ms - 2000ms delay)
- Code highlighting synchronized with visualization
- Performance statistics (comparisons, swaps, time/space complexity)
- Custom input - Test with your own data
- Responsive design - Works on desktop and tablet
Vizit is built with modern web technologies for optimal performance:
| Technology | Purpose |
|---|---|
| Next.js 15.5 | React framework with App Router and Turbopack |
| React 19.1 | UI components with hooks and context |
| TypeScript 5.x | Type-safe code for better DX |
| Tailwind CSS 4.x | Utility-first styling with custom animations |
| IBM Plex Sans/Mono | Beautiful, accessible typography |
- Component-based architecture with reusable visualization components
- Registry pattern for algorithm configurations
- Context API for theme management
- Custom hooks for animation control
- Modular algorithm implementations - Easy to extend!
- Node.js 20.x or higher
- npm, yarn, pnpm, or bun package manager
-
Clone the repository
git clone https://github.com/masabinhok/vizit.git cd vizit -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to see Vizit in action!
npm run build
npm run start- Select an algorithm from the sidebar
- Enter custom input or use the default values
- Click "Initialize" to generate the visualization steps
- Control playback with play/pause, speed adjustment, or manual stepping
- Learn by reading the synchronized code and explanations
vizit/
├── app/ # Next.js App Router
│ ├── algorithm/ # Algorithm routes (each has own page)
│ │ ├── bubble-sort/ # Bubble Sort visualization
│ │ ├── btree/ # B-Tree visualization
│ │ ├── stack/ # Stack visualization
│ │ └── layout.tsx # Shared algorithm layout
│ ├── algorithms/ # Algorithm implementations
│ │ └── bubble-sort.ts # Bubble sort logic & config
│ ├── layout.tsx # Root layout
│ └── page.tsx # Landing page
├── components/ # React components
│ ├── BTreeVisualization.tsx
│ ├── ControlBar.tsx
│ ├── InfoPanel.tsx
│ ├── Sidebar.tsx
│ ├── StackVisualization.tsx
│ ├── ThemeToggle.tsx
│ └── VisualizationCanvas.tsx
├── constants/ # Configuration files
│ ├── algorithms.ts # Algorithm metadata & categories
│ └── registry.ts # Algorithm registry (reference)
├── contexts/ # React contexts
│ └── ThemeContext.tsx # Theme management
├── types/ # TypeScript definitions
│ └── index.ts
├── docs/ # Documentation
│ └── ADDING_ALGORITHMS.md # Guide for adding algorithms
└── public/ # Static assets
Architecture Highlights:
- ✨ Dedicated pages - Each algorithm has its own route (no dynamic routing)
- 🧩 Component-based - Reusable visualization components
- 📝 Type-safe - Full TypeScript support
- 🎨 Modular - Easy to add new algorithms (see guide)
We love contributions! Vizit is open-source and welcoming to developers of all skill levels.
Vizit is Hacktoberfest-friendly! We've tagged issues with hacktoberfest, good-first-issue, and help-wanted to help you get started.
- Read our Contributing Guide
- Find an issue or propose a new feature
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-algorithm) - Commit your changes (
git commit -m 'Add QuickSort visualization') - Push to your branch (
git push origin feature/amazing-algorithm) - Open a Pull Request
Looking to contribute but not sure where to start? Check out these beginner-friendly areas:
- 🎨 Add new algorithm visualizations (Merge Sort, Quick Sort, etc.) - See guide
- 📚 Improve documentation and code comments
- 🐛 Fix bugs or improve existing visualizations
- ✨ Enhance UI/UX (animations, transitions, accessibility)
- 🧪 Add tests for algorithm implementations
- 🌐 Add internationalization support
See our Contributing Guide for detailed instructions!
Vizit uses GitHub Actions for continuous integration, automated testing, security scanning, and deployment. Our CI/CD pipeline ensures code quality, security, and smooth releases.
Runs comprehensive checks on all pull requests and pushes to main:
- Lint - ESLint checks for code quality and style consistency
- Type Check - TypeScript compiler validation
- Build - Next.js production build verification
- Caching - npm dependencies cached for faster runs
Triggers: PRs and pushes to main
Enforces consistent code formatting across the codebase:
- Validates ESLint rules on all TypeScript/JavaScript files
- Automatically comments on PRs with formatting issues
- Helps maintain clean, readable code
Triggers: Pull requests modifying .ts, .tsx, .js, .jsx, .mjs, or .css files
Automatically deploys to Vercel after successful CI:
- Builds production-ready Next.js application
- Deploys to Vercel hosting platform
- Creates deployment summary with commit details
- Only runs when CI passes successfully
Triggers: Pushes to main after CI completion
Requirements: Vercel secrets (VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID)
Welcomes first-time contributors to the project:
- Greets users opening their first issue
- Welcomes first-time PR contributors
- Provides helpful links to contributing guides
- Highlights good first issues and Hacktoberfest opportunities
Triggers: New issues and pull requests from first-time contributors
Intelligently categorizes issues and pull requests:
- Content-based labeling - Analyzes title and body text
- File-based labeling - Detects changes in specific directories
- Labels:
algorithm,bug,documentation,enhancement,ui/ux,security,dependencies, and more - Helps maintainers prioritize and organize contributions
Triggers: New or edited issues and pull requests
Scans for security vulnerabilities and code quality issues:
- GitHub's advanced semantic code analysis engine
- Detects common security vulnerabilities (SQL injection, XSS, etc.)
- Runs on TypeScript/JavaScript codebase
- Weekly scheduled scans every Monday
- Results visible in Security tab
Triggers: PRs, pushes to main, and weekly on Mondays at 6:00 AM UTC
Keeps dependencies up-to-date automatically:
- npm dependencies - Weekly updates for all packages
- GitHub Actions - Weekly updates for workflow actions
- Groups related updates (Next.js, React, TypeScript, Tailwind, ESLint)
- Auto-labels PRs as
dependenciesandautomated - Conventional commit messages (
chore(deps),chore(ci))
Schedule: Every Monday at 6:00 AM UTC
Add these badges to show workflow status:
If you fork this repository, you'll need to configure:
-
Vercel Deployment (optional):
- Add repository secrets:
VERCEL_TOKEN,VERCEL_ORG_ID,VERCEL_PROJECT_ID - Get these from your Vercel account settings
- Add repository secrets:
-
GitHub Actions:
- Automatically enabled for public repositories
- Check the "Actions" tab to see workflow runs
-
Dependabot:
- Enabled by default with the configuration file
- Review and merge dependency update PRs regularly
✅ Quality Assurance - Catch bugs and issues before merging
✅ Security - Automated vulnerability scanning with CodeQL
✅ Consistency - Enforced code style and formatting
✅ Automation - Less manual work, more coding time
✅ Contributor-Friendly - Clear feedback and welcoming messages
✅ Up-to-Date - Automated dependency updates
- Quick Sort visualization
- Merge Sort visualization
- Binary Search visualization
- Improved mobile responsiveness
- Algorithm comparison mode
- Graph algorithms (BFS, DFS, Dijkstra)
- Dynamic programming visualizations
- Custom algorithm builder
- Save/share visualizations
- Tutorial mode for beginners
- WebAssembly for performance-critical algorithms
- Collaborative learning features
- Algorithm challenges and quizzes
- AI-powered explanations
- Contributing Guide - How to contribute to Vizit
- Adding Algorithms Guide - Step-by-step guide for adding new algorithms
- Architecture Guide - Technical deep dive (Coming Soon)
- API Reference - Component and function docs (Coming Soon)
Thank you to all our amazing contributors! 🎉
Want to see your name here? Check out our Contributing Guide!
This project is licensed under the MIT License - see the LICENSE file for details.
- 💬 Discussions: Share ideas and ask questions on GitHub Discussions
- 🐛 Issues: Report bugs or request features on GitHub Issues
- 📧 Email: Contact the maintainer at masabinhok@gmail.com
- Inspired by VisuAlgo and Algorithm Visualizer
- Built with ❤️ using Next.js, React, and Tailwind CSS
- Icons from Heroicons
- Fonts from Google Fonts
If you find Vizit helpful, please consider:
- ⭐ Starring this repository
- 🔀 Forking and contributing
- 📢 Sharing with friends and classmates
- 💬 Providing feedback through issues
Made with 💙 by the Vizit Community