https://github.com/dream-world-coder/dsa_animations
https://github.com/dream-world-coder/dsa_animations
datastructures dsa dsa-algorithm react shadcn-ui tailwindcss
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dream-world-coder/dsa_animations
- Owner: Dream-World-Coder
- License: mit
- Created: 2025-07-01T14:03:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T06:34:52.000Z (about 1 year ago)
- Last Synced: 2025-07-02T07:28:51.525Z (about 1 year ago)
- Topics: datastructures, dsa, dsa-algorithm, react, shadcn-ui, tailwindcss
- Language: JavaScript
- Homepage: https://dsa-experiments.vercel.app
- Size: 44.9 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DSA Animations
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.
## Features
- **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
## Quick Start
### Installation
```bash
# 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 dev
```
Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Refer to CONTRIBUTING.md for knowing the page structure
### How to Contribute
1. **Fork the repository**
2. **Create your feature branch**
```bash
git checkout -b feature/feature-name
```
3. **Commit your changes**
```bash
git commit -m 'Add some feature-name'
```
4. **Push to the branch**
```bash
git push origin feature/feature-name
```
5. **Open a Pull Request**
### Contribution Guidelines
- Follow the existing code style and page structure
- Update README.md if needed
- Try to ensure responsive design for new components
## Bug Reports
If you discover any bugs, please create an issue [here](https://github.com/dream-world-coder/DSA_Animations/issues) with:
- Bug description
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)
- Browser/device information
## Feature Requests
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
## Available Algorithms
### Array & LinkedList
- Floyd's cycle detection Algorithm
- Kadane's Algorithm
### Recursion
- Tower of Hanoi
- Josephus Problem
- Binary Search
- Quick Sort
### Stack & Queue
- Expression Evaluation
- Round Robin Algorithm
### Tree
- Level order traversal
- Red-Black Tree
### Graph
- Graph Representation
- DFS & BFS
- Dijkstra's Algorithm
- Floyd-Warshall
- Minimum Spanning Tree
### Greedy
- Activity Selection
- Fractional Knapsack
- Huffman Coding
- Job Scheduling
- Coin Change
### Backtracking
- N-Queens Problem
- Sudoku Solver
- Knight's Tour
- Maze Solving
- Subset Generation
## Built With
- **Frontend Framework**: [React 18](https://reactjs.org/)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Icons**: [Lucide React](https://lucide.dev/)
- **Routing**: [React Router](https://reactrouter.com/)
- **Package Manager**: [pnpm](https://pnpm.io/)
## Project Structure
```
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
```
## Design System
### Color Palette
- **Background**: `neutral-900`
- **Cards**: `neutral-800`
- **Borders**: `neutral-700`
- **Accent**: `green-500`
- **Text**: `white` / `neutral-300`
### Typography
- **Headings**: Inter, system fonts
- **Body**: Clean, readable font stack
- **Code**: Monospace font family
## Usage
1. **Browse Categories**: Navigate through different algorithm categories on the homepage
2. **Select Algorithm**: Click on any algorithm card to view its visualization
3. **Interactive Controls**: Use play, pause, and step controls to navigate through animations
4. **Adjust Speed**: Control animation speed with the speed slider
5. **Learn**: Read algorithm explanations and complexity analysis
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Inspiration from various algorithm visualization platforms
- [React](https://reactjs.org/) team for the amazing framework
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first styling
- [shadcn/ui](https://ui.shadcn.com/) for beautiful components
- Open source community for continuous inspiration
## Stats
## Links
- **Repository**: [GitHub](https://github.com/dream-world-coder/DSA_Animations)
- **Live Demo**: [Demo Site](https://dsa-experiments.vercel.app)
- **Documentation**: [Wiki](https://github.com/dream-world-coder/DSA_Animations/wiki)
- **Issues**: [Issue Tracker](https://github.com/dream-world-coder/DSA_Animations/issues)
---