https://github.com/fvucemilo/sorting-visualizer

This is a web application built with Next.js, TypeScript, and Tailwind CSS that allows you to visualize various sorting algorithms in action.
https://github.com/fvucemilo/sorting-visualizer

algorithm-visualization animation code-visualization data-structures educational-tools frontend-development github-pages interactive-sorting nextjs open-source-development performance-optimization reactjs responsive-web-design software-engineering sorting-algorithms tailwind-css typescript ui-ux-design visualization web-application

Last synced: 17 days ago
JSON representation

This is a web application built with Next.js, TypeScript, and Tailwind CSS that allows you to visualize various sorting algorithms in action.

• Host: GitHub
• URL: https://github.com/fvucemilo/sorting-visualizer
• Owner: fvucemilo
• License: mit
• Created: 2024-03-13T12:06:54.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-19T22:17:41.000Z (10 months ago)
• Last Synced: 2024-11-09T13:24:26.123Z (2 months ago)
• Topics: algorithm-visualization, animation, code-visualization, data-structures, educational-tools, frontend-development, github-pages, interactive-sorting, nextjs, open-source-development, performance-optimization, reactjs, responsive-web-design, software-engineering, sorting-algorithms, tailwind-css, typescript, ui-ux-design, visualization, web-application
• Language: TypeScript
• Homepage: https://sorting-visualizer-1lr710axk-fvucemilos-projects.vercel.app
• Size: 157 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sorting Visualizer

This is a web application built with Next.js, TypeScript, and Tailwind CSS that allows you to visualize various sorting algorithms in action.

## Sorting Algorithms

- Bubble Sort

- Selection Sort

- Quick Sort

- Insertion Sort

- Merge Sort

- Heap Sort

- Radix Sort

## Features

- Visualize sorting algorithms in real-time.

- Adjust the speed of the visualization.

- Generate random arrays to sort.

- Select different sorting algorithms to compare their performance.

## Getting Started

1. Clone this repository.

2. Install dependencies by running `npm install`.

3. Start the development server with `npm run dev`.

4. Open [http://localhost:3000](http://localhost:3000) to view the app in your browser.

## Usage

- Select a sorting algorithm from the dropdown menu.

- Click the "Generate Array" button to create a random array.

- Click the "Sort" button to visualize the selected sorting algorithm.

- Use the speed slider to adjust the animation speed.

## Technologies Used

- [Next.js](https://nextjs.org/) - React framework for building server-rendered applications.

- [TypeScript](https://www.typescriptlang.org/) - A superset of JavaScript that adds static typing.

- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for quickly building custom designs.

## Preview

[![Sorting Visualizer Preview](preview.png)](https://sorting-visualizer-1lr710axk-fvucemilos-projects.vercel.app)

Click the image to see it in action.

## Contributing

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

1. Fork the repository.

2. Create your feature branch (`git checkout -b feature/your-feature-name`).

3. Commit your changes (`git commit -am 'Add some feature'`).

4. Push to the branch (`git push origin feature/your-feature-name`).

5. Open a pull request.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Author

[Filip Vučemilović-Grgić](https://github.com/fvucemilo)