Learn algorithms visually through real-time, interactive animations
- About
- Features
- Quick Start
- Contributing
- Project Structure
- Documentation
- Roadmap
- Community
- Contributors
- License
Vizit is an educational platform that brings algorithms to life through smooth, interactive visualizations. Perfect for students, educators, and anyone learning computer science fundamentals.
Why Vizit?
- 🎯 Step-by-step execution with pause/play controls
- 🎨 Beautiful animations with dark/light themes
- 📊 Performance metrics tracked in real-time
- 🧩 Multiple algorithms - sorting, data structures, graphs
- 🎓 Educational focus - clear explanations and pseudocode
Sorting Algorithms
- Bubble Sort
- Merge Sort
- Selection Sort
Math Algorithms
- Fibonacci
- GCD (Greatest Common Divisor)
- Modular Arithmetic
- Sieve of Eratosthenes
- Prime Factorization
Data Structures
- Stack
- Queue
- B-Tree
Graph Algorithms
- Breadth-First Search (BFS)
- Maze Generation
Visualization Controls
- Step-by-step execution (play, pause, step, reset)
- Speed control
- Code highlighting
- Custom input
- Responsive design
- Dark/Light themes
- Node.js 20.x or higher
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/masabinhok/vizit.git
cd vizit
# Install dependencies
npm install
# Run development server
npm run dev
# Open http://localhost:3000npm run build
npm run startWe welcome contributions from developers of all skill levels!
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
📚 Read our Contributing Guide for detailed instructions.
Perfect for first-time contributors:
- 🎨 Add new algorithms - Follow our Adding Algorithms Guide
- 📚 Improve documentation - Add comments, fix typos, clarify instructions
- 🐛 Fix bugs - Check our issue tracker
- ✨ Enhance UI/UX - Improve animations, accessibility, or design
- 🧪 Add tests - Help us improve code quality
Look for issues labeled: good-first-issue, help-wanted, hacktoberfest
- Code Style: We use ESLint and Prettier - run
npm run lintbefore committing - TypeScript: All code must be type-safe
- Commits: Use conventional commits (e.g.,
feat:,fix:,docs:) - Testing: Test your changes thoroughly before submitting
vizit/
├── app/
│ ├── algorithm/
│ │ ├── bfs/
│ │ ├── binary-search/
│ │ ├── btree/
│ │ ├── bubble-sort/
│ │ ├── fibonacci/
│ │ ├── gcd/
│ │ ├── maze-generation/
│ │ ├── prime-factorization/
│ │ └── ...
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── ui/
│ └── visualizers/
├── lib/
│ └── utils/
├── public/
├── docs/
│ ├── CONTRIBUTING.md
│ └── ADDING_ALGORITHMS.md
├── package.json
├── tsconfig.json
└── README.md
Key Architecture:
- Each algorithm/data structure has its own dedicated page and logic file
- Reusable, type-safe visualization components
- Easy to extend – see Adding Algorithms Guide
- Contributing Guide - How to contribute
- Adding Algorithms - Step-by-step guide for new algorithms
- GitHub Discussions - Ask questions and share ideas
- Quick Sort and Merge Sort improvements
- Binary Search visualization
- Graph algorithms (DFS, Dijkstra)
- Algorithm comparison mode
- Mobile app support
See open issues for planned features and known bugs.
- 💬 Discussions: GitHub Discussions
- 🐛 Issues: GitHub Issues
- 📧 Contact: masabinhok@gmail.com
Thanks to all our contributors! 🎉
Want to be featured here? Submit your first PR!
This project is licensed under the MIT License - see LICENSE for details.
If Vizit helps you learn algorithms:
- ⭐ Star this repository
- 🔀 Fork and contribute
- 📢 Share with your learning community
- 💬 Give us feedback
Made with 💙 by the open source community