diff --git a/README.md b/README.md new file mode 100644 index 0000000..bef8bed --- /dev/null +++ b/README.md @@ -0,0 +1,50 @@ +# Circular Queue Visualizer + +This project is a visualizer for the circular queue data structure. It provides an interactive and intuitive way to understand how a circular queue works by visualizing the enqueue and dequeue operations. + +## Features + +- **Pie Chart Visualization**: The queue is represented as a pie chart, making it easy to see how the front and rear pointers move. +- **Interactive Controls**: Enqueue and dequeue elements with the click of a button. +- **Code Highlighting**: The corresponding code for each operation is highlighted, showing the connection between the code and the visualization. +- **Dark and Light Themes**: Choose between a light and dark theme for your preference. +- **Fast Mode**: Speed up the animations to get a quick overview of the operations. +- **State Table**: View the state of the queue at any time. + +## Getting Started + +To get a local copy up and running, follow these simple steps. + +### Prerequisites + +- npm + ```sh + npm install npm@latest -g + ``` + +### Installation + +1. Clone the repo + ```sh + git clone https://github.com/peaceyyy/circular-queue-visualizer.git + ``` +2. Install NPM packages + ```sh + npm install + ``` +3. Run the development server + ```sh + npm run dev + ``` + +## Tech Stack + +- [React](https://reactjs.org/) +- [TypeScript](https://www.typescriptlang.org/) +- [Tailwind CSS](https://tailwindcss.com/) +- [Vite](https://vitejs.dev/) +- [Anime.js](https://animejs.com/) + +## License + +Distributed under the MIT License. See `LICENSE` for more information.