An open-source, interactive DSA learning platform that brings algorithms to life through step-by-step animations, structured learning paths, and progress tracking.

Built for students, developers, and interview candidates who want to see how algorithms work — not just read about them.

Features · Screenshots · Tech Stack · Quick Start · Project Structure · Contributing · License

Table of Contents

• Why AlgoBuddy?
• Features
  • Algorithm Visualizer
  • User System & Progress Tracking
  • Blog Platform
  • UX & Design
• Supported Algorithms & Data Structures
• Screenshots
• Tech Stack
• Architecture
• Quick Start
  • Prerequisites
  • 1. Clone the Repository
  • 2. Install Dependencies
  • 3. Configure Database Schema
  • 4. Configure Environment Variables
  • 5. Start the Development Server
  • 6. Other Commands
• Project Structure
• Project Roadmap
• Contributing
• Community
• Star History
• Contributors
• License

Why AlgoBuddy?

"Tell me and I forget, teach me and I remember, involve me and I learn." — Benjamin Franklin

Most DSA resources are walls of text and static diagrams. AlgoBuddy changes that by letting you interact with every data structure and algorithm in real time.

Tools like VisuAlgo show animations but are read-only. AlgoBuddy goes further: algorithms are coupled with user progress tracking, streaks, AI-assisted explanations, and a practice sheet — so it functions as a learning system, not just a reference. It's also fully open-source, so every visualizer is a contribution opportunity.

The Problem Static textbooks don't show algorithm flow Copying code doesn't build understanding No feedback loop on what you've mastered Hard to stay motivated without visible progress

The AlgoBuddy Way Watch algorithms execute step-by-step Interact with data structures directly Track your learning journey with streaks Read companion blogs for deeper theory

Features

Algorithm Visualizer

Animated, step-by-step visualizations for a wide range of DSA topics:

Sorting, Searching, Stack, Queue, Linked List

Sorting	Searching	Stack	Queue	Linked List
Bubble Sort Insertion Sort Selection Sort Merge Sort Quick Sort Shell Sort Radix Sort Counting Sort	Linear Search Binary Search Comparison Mode Sliding Window	Push / Pop Peek / isEmpty Polish Notation Array & LL impl.	Enqueue / Dequeue Circular Queue Priority Queue Double-ended Array & LL impl.	Singly Linked Doubly Linked Circular Insert / Delete Reverse / Merge

Trees, HashMap, Graph, String, Complexity

Trees	HashMap	Graph	String	Complexity
Binary Tree types In-order Traversal BST operations Heaps & Tries	Insert / Search / Delete Collision handling Visual hash buckets	BFS / DFS Dijkstra / A* Bellman-Ford Floyd-Warshall Kruskal / Prim Tarjan / Kosaraju Ford-Fulkerson Topological Sort	KMP Algorithm Z-Algorithm	Time & Space analysis Side-by-side comparisons Powered by Recharts

User System & Progress Tracking

Feature	Description
Auth	Email/password with Cloudflare Turnstile captcha + Google OAuth
Dashboard	Module-level progress tracking per data structure
Streaks	Activity heatmap (last 90 days) + daily streak counter
AI Assistant	Built-in chatbot powered by Gemini for concept help
Bookmarks	Save and revisit problems with the bookmark system

Blog Platform

Feature	Description
Categories	Filter articles by DSA topic
Full-text Search	Instantly find relevant articles
Reading Time	Estimated reading time on every article
Rich Content	In-depth articles on core DSA concepts

UX & Design

Feature	Description
Dark/Light Mode	Theme toggle persisted to localStorage
Responsive	Optimized for mobile, tablet, and desktop
Animations	Smooth visualizations via GSAP + Framer Motion
Particle Effects	Interactive background using tsParticles

Supported Algorithms & Data Structures

Category	Coverage	Visualization
Sorting	Bubble, Selection, Insertion, Merge, Quick, Shell, Radix, Counting	✓
Searching	Linear, Binary, Sliding Window	✓
Stack	Push, Pop, Peek, Array & Linked List	✓
Queue	Simple, Circular, Priority, Deque	✓
Linked List	Singly, Doubly, Circular	✓
Trees	Binary Tree, BST, Heap, Trie	✓
HashMap	Insert, Search, Delete, Collision Handling	✓
Graph	BFS, DFS, Dijkstra, A*, Bellman-Ford, Floyd-Warshall, Kruskal, Prim, Tarjan, Kosaraju, Ford-Fulkerson, Topological Sort	✓
String	KMP Algorithm, Z-Algorithm	✓
Complexity Analysis	Time & Space Complexity Graphs	✓

Screenshots

Landing page with algorithm category navigation, feature overview, and community stats.

Step-by-step algorithm visualizer with controls, pseudocode panel, and complexity info.

Authentication Page — Login and signup with Google OAuth or email/password, protected by Cloudflare Turnstile.

Queue Visualization — Animated circular queue showing enqueue/dequeue operations with pointer movement.

Queue Operations — Side-by-side operations panel with live memory-state rendering.

Tech Stack

Layer	Technology	Purpose
Framework		App Router, SSR, API routes
Styling		Utility-first CSS framework
Database		PostgreSQL + Auth + Realtime
Animation		Visualizer animations
Charts		Complexity comparison graphs
Editor		In-browser code editor
Email		Transactional emails via Gmail
Captcha		Bot protection on auth
Analytics		Usage tracking
Rate Limiting		API rate limiting
Deployment		Serverless hosting
CI/CD		Multi-OS testing pipeline

Architecture

For a comprehensive guide on component boundaries, database triggers, data flows, and codebase principles, see the System Architecture Guide.

graph TB
    subgraph Client["Client — Next.js 16 App Router"]
        UI["UI Components<br/>(React + Tailwind)"]
        VIS["Visualizer Engine<br/>(GSAP + Framer Motion)"]
        CHARTS["Complexity Graphs<br/>(Recharts)"]
        EDITOR["Code Editor<br/>(Monaco)"]
        THEME["Theme System<br/>(Dark/Light)"]
    end
    subgraph API["API Layer"]
        AUTH_API["Auth Routes"]
        CONTACT["Contact API"]
        REVIEW["Review API"]
        CHATBOT["AI Assistant<br/>(Gemini API)"]
    end
    subgraph Services["External Services"]
        SUPA["Supabase<br/>(DB + Auth)"]
        CF["Cloudflare<br/>Turnstile"]
        GA["Google<br/>Analytics"]
        REDIS["Upstash<br/>Redis"]
        MAIL["Gmail<br/>(Nodemailer)"]
        GEMINI["Google<br/>Gemini API"]
    end
    UI --> VIS
    UI --> CHARTS
    UI --> EDITOR
    UI --> THEME
    UI --> API
    UI --> SUPA
    AUTH_API --> SUPA
    AUTH_API --> CF
    CONTACT --> MAIL
    CONTACT --> CF
    REVIEW --> MAIL
    REVIEW --> CF
    CHATBOT --> REDIS
    CHATBOT --> GEMINI
    UI --> GA
    style Client fill:#1e1b4b,stroke:#818cf8,stroke-width:3px,color:#e0e7ff
    style API fill:#1e3a5f,stroke:#38bdf8,stroke-width:3px,color:#e0f2fe
    style Services fill:#064e3b,stroke:#34d399,stroke-width:3px,color:#d1fae5

Loading

Quick Start

Prerequisites

Tool	Version
Node.js	>= 20.x
npm	>= 10.x
Git	Latest

1. Clone the Repository

git clone https://github.com/PankajSingh34/AlgoBuddy.git
cd AlgoBuddy

2. Install Dependencies

npm install

Note: This project uses isolated-vm for secure code execution. If you encounter build errors, ensure you have Python and a C++ compiler installed (required for native addon compilation).

3. Configure Database Schema

The full schema is maintained in supabase_setup.sql at the project root — run it in the Supabase SQL Editor. It covers RLS policies for all tables, admin policies for community_contributors, and two stored functions for atomic streak updates.

Note: Without running the full schema, progress tracking, bookmarks, avatars, and streak features will not work locally.

View table overview and example RLS policy

Table	Purpose
user_progress	Tracks per-problem completion status
user_activity	Powers the 90-day activity heatmap
user_profiles	Avatar URL and community join status
problem_bookmarks	User-saved problem bookmarks
user_practice_stats	Streak counters (current + longest)
community_contributors	Public contributor registry
topic_comments	Per-visualizer discussion threads
pending_messages	SMTP fallback queue for contact/review emails
newsletter_subscriptions	Footer newsletter opt-ins

Representative RLS setup for user_progress:

ALTER TABLE user_progress ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can read own progress" ON user_progress
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own progress" ON user_progress
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own progress" ON user_progress
  FOR UPDATE USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);

The schema also defines increment_streak_on_completion() and upsert_progress_and_update_streak() — two PL/pgSQL functions that update streaks atomically to avoid TOCTOU race conditions. See supabase_setup.sql for the full definitions.

4. Configure Environment Variables

Create a .env.local file in the project root. See .env.example for the full reference.

View all environment variables

# ──────────── Email ────────────
EMAIL_USER=your-email@gmail.com
EMAIL_PASSWORD=your-google-app-password
REVIEW_INBOX_EMAIL=optional-inbox@gmail.com

# ──────────── Supabase ────────────
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_KEY=your-supabase-service-key

# ──────────── Cloudflare Turnstile ────────────
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-turnstile-site-key
TURNSTILE_SECRET_KEY=your-turnstile-secret-key

# ──────────── Google Analytics ────────────
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

# ──────────── AI Chatbot ────────────
GEMINI_API_KEY=your-gemini-api-key

# ──────────── Rate Limiting (Production) ────────────
UPSTASH_REDIS_REST_URL=your-upstash-url
UPSTASH_REDIS_REST_TOKEN=your-upstash-token

# ──────────── Spring Boot Backend CORS (Optional in dev, required in prod) ────────────
ALLOWED_ORIGINS=http://localhost:3000
APP_ENV=dev

5. Start the Development Server

npm run dev

Open http://localhost:3000 and start visualizing!

6. Other Commands

npm run build          # Production build
npm run start          # Start production server
npm run lint           # Run ESLint
npm run test           # Run lint + security tests
npm run test:security  # Run XSS security tests only

Project Structure

View full directory tree

AlgoBuddy/
│
├── src/app/                         # Next.js App Router
│   ├── api/                         #   API routes (auth, chatbot, mysheet, etc.)
│   ├── arena/                       #   Tournament / arena page
│   ├── dashboard/                   #   User dashboard
│   ├── login/                       #   Auth pages
│   ├── visualizer/                  #   Algorithm visualizer pages
│   │   ├── array/                   #     Sorting & array algorithms
│   │   ├── graph/                   #     Graph algorithm visualizers
│   │   ├── string/                  #     String algorithm visualizers (KMP, Z-Algo)
│   │   └── ...                      #     Other DSA visualizers
│   │
│   ├── components/                  #   Shared UI components
│   │   ├── dashboard/               #     Heatmap, streaks
│   │   ├── models/                  #     Data structure models
│   │   └── ui/                      #     Reusable UI primitives
│   │
│   ├── hooks/                       #   Custom React hooks
│   ├── layout.jsx                   #   Root layout
│   └── page.jsx                     #   Landing page
│
├── src/features/algorithms/         # Algorithm logic (pure functions)
│   ├── graph/                       #   Graph algorithm implementations
│   └── string/                      #   String algorithm implementations
│
├── src/lib/                         # Utility libraries
│   ├── supabase.js                  #   Supabase client config
│   ├── auth.js                      #   Auth helpers
│   ├── activity.js                  #   Activity tracking logic
│   └── gtag.js                      #   Google Analytics helper
│
├── backend/                         # Spring Boot API (optional, for practice features)
├── arena-socket-server/             # WebSocket server for tournament arena
├── public/                          # Static assets & screenshots
├── docs/                            # Documentation
├── security-tests/                  # Security test suite
├── .github/                         # GitHub Actions workflows
│
├── supabase_setup.sql               # Database schema & RLS policies
├── middleware.js                    # Next.js middleware (auth, rate limiting)
├── next.config.mjs                  # Next.js configuration
├── tailwind.config.js               # Tailwind configuration
└── package.json                     # Dependencies & scripts

Project Roadmap

Status	Item
Done	Interactive algorithm visualizations
Done	User authentication and progress tracking
Done	AI-powered learning assistant
Done	Graph algorithm visualizers
Done	String algorithm visualizers (KMP, Z-Algorithm)
In Progress	Expand the collection of algorithm and data structure visualizations
In Progress	Improve accessibility and mobile experience
In Progress	Enhance learning resources and documentation
Planned	Introduce additional educational content and practice modules
Planned	Continue community-driven improvements and feature enhancements

Contributing

We welcome contributions! AlgoBuddy is built by the community, for the community.

Contribution Areas

Area	What you can do
Bug Fixes	Squash bugs and resolve issues
UI/UX	Improve responsiveness, accessibility, design
New Visualizers	Add new DSA visualizers & animations
Documentation	Improve guides, README, contributor docs
Performance	Optimize app performance & efficiency
Themes	Enhance dark/light mode experience

Getting Started

Step-by-step: fork, branch, commit, PR

# 1. Fork this repo and clone your fork
git clone https://github.com/YOUR_USERNAME/AlgoBuddy.git

# 2. Create a feature branch
git checkout -b feature/your-feature-name

# 3. Make your changes and commit
git commit -m "feat: describe your change"

# 4. Push and open a PR
git push origin feature/your-feature-name

For detailed guidelines, please read our Contributing Guide and Code of Conduct.

Issue Assignment Process

1. Browse open issues or create a new one
2. Comment asking to be assigned
3. Wait for maintainer assignment before starting
4. Submit a PR referencing the issue number

Community

Ask questions, share ideas, show off your contributions, and connect with fellow learners!

Star History

If AlgoBuddy helped you learn, please consider giving it a star — it means a lot!

Contributors

License

This project is licensed under the MIT License — see the LICENSE file for details.

---

Built with ♥ by the AlgoBuddy community

Website · Discord · Issues · Pull Requests