AlgoScope

A Premium Full-Stack Data Structure and Algorithm Visualizer

Why AlgoScope? • Features • Tech Stack • Setup • API

💡 Why AlgoScope?

Learning Data Structures and Algorithms (DSA) is notoriously difficult. Static diagrams and endless textbook text fail to capture the dynamic nature of pointers moving, arrays sorting, and trees rebalancing.

AlgoScope solves this.

Unlike standard visualizers that are simply static frontend demos, AlgoScope is a production-grade, full-stack platform. It features a custom high-performance animation engine synced with line-by-line pseudocode, paired with a robust Node/Express backend that tracks your learning progress, calculates your streaks, and lets you save and share your custom tree structures via unique shortlinks.

✨ Key Features

• 🎬 Real-Time Visualization Engine: Interactive, step-by-step animations with play, pause, step-forward, and step-backward controls for Arrays, Linked Lists, Stacks, Queues, and Binary Search Trees.
• 💻 Synchronized Code Panel: Watch the algorithm execute line-by-line. The active pseudocode line highlights exactly as the corresponding animation frame renders.
• 🔐 Secure Authentication Architecture: JWT-based authentication utilizing httpOnly secure cookies, bcrypt password hashing, and seamless refresh token rotation to mitigate XSS and CSRF attacks.
• 📊 Advanced User Dashboard: Tracks time spent per visualizer, calculates consecutive day learning streaks (GitHub style), and visualizes progress with beautiful circular data rings.
• 💾 Save & Share Visualization States: Build a custom edge-case Binary Search Tree, save the configuration to MongoDB, and generate a unique public short-link to share it with friends or interviewers.
• 🎨 Premium UI/UX Design: Built completely from scratch without heavy UI libraries. Features a gorgeous dark mode, subtle glassmorphism (backdrop-filter), and buttery-smooth micro-animations.

🛠️ Technology Stack

Frontend Client

• Core: React 19, Vite
• Routing: React Router v7
• State & Data Fetching: React Hooks, Axios (with custom auth interceptors)
• Styling & Rendering: Vanilla CSS, CSS Custom Properties (Variables), Raw SVG rendering for high-performance node connections.

Backend Server

• Core: Node.js, Express.js
• Database: MongoDB, Mongoose ODM
• Security & Auth: JSON Web Tokens (JWT), Bcrypt.js, Helmet.js, CORS
• Architecture: MVC Pattern (Models, Views/Routes, Controllers), Custom Error Handling Middleware, Async Request Wrappers.

📂 Project Structure

AlgoScope/
├── src/                          # Frontend (React + Vite)
│   ├── algorithms/               # Agnostic step-generating algorithm logic
│   ├── components/               # Reusable UI (Navbar, Controls, CodePanel)
│   ├── context/                  # Global State (AuthContext, ThemeContext)
│   ├── hooks/                    # Custom hooks (useAnimation engine)
│   ├── pages/                    # Route endpoints (Dashboard, Auth, Visualizers)
│   └── utils/                    # Frontend helpers and constants
│
└── server/                       # Backend (Node + Express + MongoDB)
    ├── config/                   # Database connection scripts
    ├── controllers/              # Route handlers and core API logic
    ├── middleware/               # Auth guards, error handlers, rate limiters
    ├── models/                   # Mongoose Schemas (User, Progress, States)
    ├── routes/                   # API endpoint definitions
    └── utils/                    # ApiError and ApiResponse standard classes

🚀 Installation & Setup

Prerequisites

Make sure you have Node.js (v18+) installed on your machine and access to a MongoDB database (either a local instance or a free MongoDB Atlas cluster).

1. Clone the repository

git clone https://github.com/yourusername/AlgoScope.git
cd AlgoScope

2. Configure & Start the Backend

Navigate to the server directory and install dependencies:

cd server
npm install

Create a .env file in the server/ directory with your secrets:

PORT=4000
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/algoscope
ACCESS_TOKEN_SECRET=generate_a_strong_random_secret_string
REFRESH_TOKEN_SECRET=generate_another_strong_random_secret_string
CORS_ORIGIN=http://localhost:5173

Start the backend server:

npm run dev

3. Configure & Start the Frontend

Open a new terminal window, return to the project root, and install dependencies:

cd AlgoScope
npm install
npm run dev

The client application will spin up at http://localhost:5173.

🛣️ API Architecture

The backend exposes a highly structured RESTful API. Below is a subset of the available endpoints:

Endpoint	Method	Description	Auth Required
/api/v1/user/signup	POST	Register a new user	No
/api/v1/user/login	POST	Authenticate & receive JWT cookies	No
/api/v1/user/logout	POST	Clear cookies and invalidate session	Yes
/api/v1/user/refresh-token	POST	Exchange refresh cookie for new access token	No
/api/v1/progress	GET	Fetch user's completion stats and streaks	Yes
/api/v1/progress/:topic	PUT	Update time spent and completion status	Yes
/api/v1/states	POST	Save a custom visualization state to DB	Yes
/api/v1/states/share/:id	GET	Retrieve a publicly shared state	No

🚀 Roadmap

We are constantly improving AlgoScope! Check out our Phase 2 Roadmap to see how we are integrating LeetCode and the Striver SDE Sheet directly into the platform to create the ultimate interview prep tool.

🤝 Contributing

Contributions, issues, and feature requests are always welcome! Feel free to check out the issues page.

📝 License

This project is MIT licensed.