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
- 🤖 AI Learning Assistant - Interactive chatbot for instant help
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
🤖 AI Learning Assistant
- Interactive chatbot powered by Google Gemini
- Real-time algorithm explanations and guidance
- Complexity analysis and performance insights
- Step-by-step learning with examples
- Streaming responses with beautiful formatting
- 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
# Set up environment variables
cp .env.local.example .env.local
# Add your Gemini API key to .env.local (see Setup Guide below)
# Run development server
npm run dev
# Open http://localhost:3000Vizit includes an AI-powered chatbot that helps users learn algorithms interactively! To enable this feature:
-
Get a free Gemini API key:
- Visit Google AI Studio
- Sign in with your Google account
- Click "Create API Key" and copy it
-
Configure the API key:
# Create environment file echo "GEMINI_API_KEY=your_actual_api_key_here" > .env.local
-
Features you'll unlock:
- 🎯 Algorithm explanations with step-by-step breakdowns
- 📊 Complexity analysis and performance insights
- 💡 Interactive learning with examples and practice guidance
- 🚀 Real-time streaming responses with beautiful formatting
- 🎨 Visual learning integrated with Vizit's platform features
-
Test the chatbot:
- Start the dev server:
npm run dev - Click the chat icon in the bottom-right corner
- Try asking: "What is Merge Sort?" or "How does Binary Search work?"
- Start the dev server:
Note: The chatbot will work without an API key but with limited functionality. For the best learning experience, we recommend setting up the Gemini API key!
npm 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/
│ ├── api/
│ │ └── chat/ # AI chatbot API endpoint
│ ├── algorithm/
│ │ ├── bfs/
│ │ ├── binary-search/
│ │ ├── btree/
│ │ ├── bubble-sort/
│ │ ├── fibonacci/
│ │ ├── gcd/
│ │ ├── maze-generation/
│ │ ├── prime-factorization/
│ │ └── ...
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── ChatbotWidget.tsx # AI learning assistant
│ ├── ui/
│ └── visualizers/
├── contexts/
│ └── ChatbotContext.tsx # Chat state management
├── utils/
│ └── gemini-service.ts # AI service integration
├── lib/
│ └── utils/
├── public/
├── docs/
│ ├── CONTRIBUTING.md
│ ├── ADDING_ALGORITHMS.md
│ └── CHATBOT_SETUP.md # Detailed chatbot setup
├── .env.local # Environment variables
├── 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
- AI Learning Assistant - Interactive chatbot powered by Google Gemini
- Real-time streaming responses with beautiful formatting
- Algorithm explanations and complexity analysis
- Step-by-step learning guidance
- Quick Sort and Merge Sort improvements
- Binary Search visualization
- Graph algorithms (DFS, Dijkstra)
- Algorithm comparison mode
- Mobile app support
- Enhanced chatbot features (code examples, quizzes)
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