Skip to content

README.md

Latest commit

 

History

History
206 lines (168 loc) · 7.07 KB

README.md

File metadata and controls

206 lines (168 loc) · 7.07 KB
Raw

Algorithm Visualizer

An interactive web application that visualizes sorting algorithms in real-time. This project helps users understand how different sorting algorithms work by providing step-by-step visualizations.

Features

  • Real-time Algorithm Visualization: Watch sorting algorithms execute step-by-step with visual feedback
  • Multiple Sorting Algorithms: Support for various sorting algorithms starting from Bubble Sort
  • Interactive UI: User-friendly interface built with React for smooth interactions
  • RESTful API: Backend API for handling sorting requests and algorithm logic
  • Responsive Design: Works seamlessly across different screen sizes
  • Step-by-Step Execution: Pause, play, and step through algorithm execution
  • Performance Metrics: Track algorithm performance with time complexity visualizations

Technologies Used

Backend

  • Framework: Spring Boot 3.5.11
  • Language: Java 17
  • Build Tool: Maven
  • Additional Libraries:
    • Spring Web Starter (REST APIs)
    • Lombok (reduce boilerplate code)
    • Spring Boot DevTools (development experience)

Frontend

  • Framework: React 19.2.4
  • Build Tool: Vite 8.0.0
  • Linter: ESLint 9.39.4
  • Language: JavaScript (ES modules)

Installation

Prerequisites

  • Java 17 or higher
  • Node.js 16+ and npm
  • Maven (or use the included mvnw script)

Backend Setup

  1. Navigate to the backend directory:

    cd algovisual

  2. Build the project using Maven:

    ./mvnw clean install
# or on Windows
mvnw.cmd clean install

  3. Run the Spring Boot application:

    ./mvnw spring-boot:run

    The backend server will start at http://localhost:8080

Frontend Setup

  1. Navigate to the frontend directory:

    cd frontend

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

    The frontend will be available at http://localhost:5173

  4. For production build:

    npm run build

Project Structure

Algorithm Visualizer/
├── README.md                          # Project documentation
├── .gitignore                         # Git ignore rules
├── algovisual/                        # Backend (Spring Boot)
│   ├── pom.xml                        # Maven configuration
│   ├── mvnw & mvnw.cmd               # Maven wrapper scripts
│   ├── src/
│   │   ├── main/java/com/algorithmvisualizer/algovisual/
│   │   │   ├── AlgovisualApplication.java          # Main Spring Boot app
│   │   │   ├── algorithm/
│   │   │   │   └── BubbleSort.java                # Bubble Sort algorithm implementation
│   │   │   ├── controller/
│   │   │   │   └── SortingController.java         # REST API endpoints
│   │   │   ├── model/
│   │   │   │   ├── SortRequest.java               # Request DTO
│   │   │   │   └── SortStep.java                  # Sorting step representation
│   │   │   └── service/
│   │   │       └── SortingService.java            # Business logic for sorting
│   │   └── resources/
│   │       ├── application.properties             # Spring configuration
│   │       ├── static/                            # Static resources
│   │       └── templates/                         # Template files
│   └── target/                        # Compiled output (Maven build)
│
└── frontend/                          # Frontend (React + Vite)
    ├── package.json                   # npm dependencies
    ├── vite.config.js                # Vite configuration
    ├── eslint.config.js              # ESLint rules
    ├── index.html                    # Entry HTML file
    ├── src/
    │   ├── main.jsx                  # React entry point
    │   ├── App.jsx                   # Root component
    │   ├── index.css                 # Global styles
    │   ├── components/               # Reusable React components
    │   ├── hooks/                    # Custom React hooks
    │   ├── pages/
    │   │   └── SortingPage.jsx       # Main sorting visualization page
    │   └── services/                 # API services
    ├── public/                        # Public assets
    └── dist/                          # Production build output (Vite)

What Has Been Done Till Now

✅ Project Initialization

  • ✅ Created monorepo structure with separate backend and frontend
  • ✅ Set up Spring Boot 3.5.11 backend with Java 17
  • ✅ Set up React 19.2.4 frontend with Vite build system
  • ✅ Configured Maven for backend builds
  • ✅ Configured npm and Vite for frontend builds

✅ Backend Development

  • ✅ Created Spring Boot application (AlgovisualApplication.java)
  • ✅ Implemented BubbleSort algorithm (BubbleSort.java)
  • ✅ Created SortingController with REST endpoints
  • ✅ Defined data models:
    • SortRequest.java - For incoming sort requests
    • SortStep.java - For representing sorting steps
  • ✅ Implemented SortingService for business logic
  • ✅ Configured Spring Boot application properties

✅ Frontend Development

  • ✅ Created React application structure with Vite
  • ✅ Set up routing with SortingPage component
  • ✅ Configured ESLint for code quality
  • ✅ Established project structure for components, hooks, and services
  • ✅ Created service layer for API communication

✅ DevOps & Configuration

  • ✅ Created .gitignore file for both backend and frontend
  • ✅ Configured Maven wrapper for easy builds
  • ✅ Set up Vite development server configuration
  • ✅ Configured ESLint for code linting

🔄 Development Status

  • Backend: Core structure ready, algorithm implementations started
  • Frontend: Project scaffolding complete, component structure established
  • API Integration: Service layer ready for backend integration

API Endpoints

Sorting Endpoints

  • POST /api/sort/bubble - Execute bubble sort on provided array
    • Request body: { array: [number, ...] }
    • Response: Array of sorting steps with state changes

Running Both Services

For development with both services running:

  1. Terminal 1 - Backend:

    cd algovisual
./mvnw spring-boot:run

  2. Terminal 2 - Frontend:

    cd frontend
npm run dev

Then open http://localhost:5173 in your browser to access the application.

Future Enhancements

  • Add more sorting algorithms (Quick Sort, Merge Sort, Heap Sort, etc.)
  • Implement algorithm comparison view
  • Add time and space complexity analysis
  • Implement custom array input and visualization speed control
  • Add sound effects for algorithm steps
  • Implement dark mode
  • Add tutorial system
  • Deploy to cloud (Azure, AWS, Heroku)

Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.

Last Updated: March 2026