Search Algorithms Visualizer

Welcome to the Search Algorithm Visualizer, a React Vite app designed to help you visualize and understand two popular search algorithms: Breadth-First Search (BFS) and Depth-First Search (DFS). The user interface is built using ShadeCN for styling and Tailwind CSS for utility-first styling. The project directory is organized with a 'src' folder containing 'components' and 'hooks' as subfolders.

Features

• Visualize Breadth-First Search (BFS) and Depth-First Search (DFS) algorithms.
• Understand algorithmic concepts through interactive visualization.
• Responsive and stylish UI powered by ShadeCN and Tailwind CSS.

Online Demo

• https://search-algorithms-visualizer.leulabay.me

Installation

Make sure you have Node.js and npm installed. Then, follow these steps to set up the project:

1. Clone the repository:

   git clone https://github.com/leulabay1/search-algorithms-visualizer.git

2. Navigate to the project directory:

   cd search-algorithm-visualizer

3. Install dependencies:

   npm install

Usage

To start the development server and run the app locally, use the following command:

npm run dev

Visit http://localhost:3000 in your browser to see the app in action.

Project Structure

search-algorithm-visualizer/
|-- src/
|   |-- components/        # React components
|   |   |-- AlgorithmVisualizer.jsx  # Main visualization component
|   |   |-- ...                      # Other components
|   |-- hooks/             # Custom React hooks
|   |   |-- useBFS.js      # Hook for Breadth-First Search
|   |   |-- useDFS.js      # Hook for Depth-First Search
|   |-- App.jsx            # Main application component
|   |-- index.jsx          # Entry point
|-- public/
|-- node_modules/
|-- .gitignore
|-- package.json
|-- README.md
|-- ...                   # Other configuration files

Technologies Used

• React
• Vite
• ShadeCN
• Tailwind CSS

Contributing

Contributions are welcome! If you'd like to contribute to the project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your changes to your fork.
5. Submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Special thanks to the developers of React, Vite, ShadeCN, and Tailwind CSS.
• Inspired by the desire to make algorithms more accessible and understandable through visualization.

Happy coding! 🚀