An interactive web platform for visualizing Data Structures and Algorithms through animations. Built with React and other web technologies to make learning DSA concepts intuitive and engaging.
- Interactive Visualizations: Step-by-step animations for popular algorithms
- Modern UI: Clean, dark-themed interface with smooth animations
- Fast Performance: Built with Vite for lightning-fast development and builds
# Clone the repository
git clone https://github.com/Dream-World-Coder/DSA_Animations.git
# Navigate to project directory
cd DSA_Animations
# Install dependencies
pnpm i
# or
npm i
# Start development server
pnpm dev
# or
npm run devOpen http://localhost:5173 to view it in your browser.
Contributions are welcome! Please feel free to submit a Pull Request.
Refer to CONTRIBUTING.md for knowing the page structure
- Fork the repository
- Create your feature branch
git checkout -b feature/feature-name
- Commit your changes
git commit -m 'Add some feature-name' - Push to the branch
git push origin feature/feature-name
- Open a Pull Request
- Follow the existing code style and page structure
- Update README.md if needed
- Try to ensure responsive design for new components
If you discover any bugs, please create an issue here with:
- Bug description
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)
- Browser/device information
Have an idea for a new algorithm or feature? Open an issue with the enhancement label and describe:
- Feature description
- Use case/motivation
- Possible implementation approach
- Floyd's cycle detection Algorithm
- Kadane's Algorithm
- Tower of Hanoi
- Josephus Problem
- Binary Search
- Quick Sort
- Expression Evaluation
- Round Robin Algorithm
- Level order traversal
- Red-Black Tree
- Graph Representation
- DFS & BFS
- Dijkstra's Algorithm
- Floyd-Warshall
- Minimum Spanning Tree
- Activity Selection
- Fractional Knapsack
- Huffman Coding
- Job Scheduling
- Coin Change
- N-Queens Problem
- Sudoku Solver
- Knight's Tour
- Maze Solving
- Subset Generation
- Frontend Framework: React 18
- Build Tool: Vite
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Routing: React Router
- Package Manager: pnpm
DSA_Animations/
.
├── components.json
├── eslint.config.js
├── index.html
├── LICENSE
├── package.json
├── public
│ ├── favicon.svg
│ ├── robots.txt
│ └── sitemap.xml
├── README.md
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── data
│ │ └── navLinks.js
│ ├── components
│ │ ├── Footer
│ │ │ └── Footer.jsx
│ │ ├── Header
│ │ │ ├── Header.jsx
│ │ │ └── ShadCNNav.jsx
│ │ ├── Logo.jsx
│ │ ├── SearchBar.jsx
│ │ └── SEO.jsx
│ ├── index.css
│ ├── main.jsx
│ └── pages
│ ├── array
│ │ └── Kadane.jsx
│ ├── home
│ │ └── Home.jsx
│ └── recursion
│ ├── Josephous.jsx
│ ├── QuickSort.jsx
│ └── TowerOfHanoi.jsx
├── tsconfig.app.json
├── tsconfig.json
├── vercel.json
└── vite.config.js
- Background:
neutral-900 - Cards:
neutral-800 - Borders:
neutral-700 - Accent:
green-500 - Text:
white/neutral-300
- Headings: Inter, system fonts
- Body: Clean, readable font stack
- Code: Monospace font family
- Browse Categories: Navigate through different algorithm categories on the homepage
- Select Algorithm: Click on any algorithm card to view its visualization
- Interactive Controls: Use play, pause, and step controls to navigate through animations
- Adjust Speed: Control animation speed with the speed slider
- Learn: Read algorithm explanations and complexity analysis
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspiration from various algorithm visualization platforms
- React team for the amazing framework
- Tailwind CSS for the utility-first styling
- shadcn/ui for beautiful components
- Open source community for continuous inspiration
- Repository: GitHub
- Live Demo: Demo Site
- Documentation: Wiki
- Issues: Issue Tracker