Interactive web-based platform for learning data structures and algorithms through real-time visualizations and step-by-step code execution.
This project is currently under active development. Features and documentation are subject to change.
- Arrays: Interactive operations with insertion, deletion, and searching
- Linked Lists: Complete implementation with traversal animations
- Stacks: LIFO operations with push, pop, and peek visualizations
- Queues: FIFO operations with enqueue, dequeue, and front peek
- Binary Trees: Tree operations with search, insertion, and deletion
- Bubble Sort: Step-by-step comparisons and swaps
- Selection Sort: Minimum element selection visualization
- Insertion Sort: Element insertion with shift animations
- Real-time Visualizations: Smooth animations for all operations
- Code Execution: Step-by-step highlighting with explanations
- Modern UI: Clean, responsive dark theme design
- Educational Focus: Comprehensive complexity analysis
- 100% Interactive: Hands-on learning experience
- Mobile Optimized: Works perfectly on all devices
- Node.js 18+
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/gael55x/DSA-Visualizer.git
cd DSA-Visualizer/dsa-visualizer
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 to see the result.
npm run build
npm start- Navigate between data structures using the navigation bar
- Input values through the intuitive forms
- Select operations like insert, delete, search, or sort
- Watch algorithms execute with real-time animations
- Follow code execution with highlighted explanations
- Learn from complexity analysis and educational content
- Framework: Next.js 14 with App Router
- Language: TypeScript for type safety
- Styling: Tailwind CSS for modern design
- Animations: Framer Motion for smooth interactions
- Icons: Lucide React for consistent iconography
- Deployment: Optimized for Vercel/Netlify
dsa-visualizer/
├── app/ # Next.js App Router
│ ├── array/ # Array visualizer
│ ├── linked-list/ # Linked list visualizer
│ ├── stack/ # Stack visualizer
│ ├── queue/ # Queue visualizer
│ ├── binary-tree/ # Binary tree visualizer
│ ├── sorting/ # Sorting algorithms
│ └── about/ # About page
├── components/ # React components
│ ├── visualizers/ # Core visualizer components
│ ├── ui/ # Reusable UI components
│ └── *.tsx # Layout components
├── lib/ # Utility functions
└── public/ # Static assets
- Visual Learning: Complex algorithms become intuitive through visualization
- Interactive Experience: Direct manipulation and real-time feedback
- Educational First: Built specifically for learners and educators
- Modern Design: Clean, accessible interface with smooth animations
- Performance: Optimized for smooth 60fps animations
- Mobile Ready: Responsive design that works on all devices
We welcome contributions! Here's how you can help:
- 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
- Additional sorting algorithms (Quick Sort, Merge Sort, Heap Sort)
- New data structures (Hash Tables, Graphs, AVL Trees)
- Algorithm optimizations and improvements
- UI/UX enhancements
- Accessibility improvements
- Educational content expansion
- Performance optimizations
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with modern React patterns and TypeScript best practices
- Inspired by educational visualization tools and CS learning resources
- Thanks to the open-source community for amazing libraries and tools
If you find this project helpful:
- Star this repository
- Report bugs or request features via issues
- Contribute code improvements
- Buy me a coffee at coff.ee/gailleamolg
Ready to master data structures and algorithms? Start Learning →
Built with 🔥 for learners by a learner