This app is an interactive sorting visualizer that demonstrates various sorting algorithms. Using React and TypeScript, it offers real-time animations and detailed explanations of each algorithm's workings, allowing users to compare and understand their performance.
A dynamic and interactive sorting visualizer built with React, TypeScript, and styled-components. This project allows users to visualize various sorting algorithms through a captivating and educational interface.
You can view the deployed app by scanning the QR code below:
Alternatively, you can click here to open the app directly.
QR Code to view Deployed site
To get a local copy of the project up and running follow these simple steps:
Clone the Repository:
git clone https://github.com/yourusername/sorting-visualizer.git
Install Dependencies:
Navigate to the project directory and install the necessary dependencies:
cd sorting-visualizer
npm install
Start the Development Server:
Run the following command to start the development server:
npm run dev
Open in Your Browser: Navigate to http://localhost:5173 to view the visualizer.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
parserOptions
property like this:export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
tseslint.configs.recommended
to tseslint.configs.recommendedTypeChecked
or tseslint.configs.strictTypeChecked
...tseslint.configs.stylisticTypeChecked
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})