🧠 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

🎯 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.

😫 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
Bubble Sort Insertion Sort Selection Sort Merge Sort Quick Sort	Linear Search Binary Search Sorting Comparison Mode Sliding Window Technique	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	📊 Complexity Graphs
Binary Tree types In-order Traversal BST operations Heaps & Tries	Insert / Search / Delete Collision handling Visual hash buckets	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

📝 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

📸 Screenshots

🏠 Home Page

---

🔐 Authentication Page

---

🧠 Visualizer Dashboard

---

🔄 Queue Visualization

---

📚 Queue Operations

🛠 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

graph TB
    subgraph Client["🖥 Client — Next.js 14 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

3️⃣ Configure Database Schema

Run the following SQL in the Supabase SQL Editor to enable user progress tracking:

create extension if not exists "pgcrypto";

create table if not exists public.user_progress (
  id uuid primary key default gen_random_uuid(),

  user_id uuid not null references auth.users(id) on delete cascade,

  module_id text not null,

  is_done boolean default false,

  created_at timestamptz default now(),

  updated_at timestamptz default now(),

  unique(user_id, module_id)
);

alter table public.user_progress enable row level security;

create policy "Users can read own progress"
on public.user_progress
for select
using (auth.uid() = user_id);

create policy "Users can insert own progress"
on public.user_progress
for insert
with check (auth.uid() = user_id);

create policy "Users can update own progress"
on public.user_progress
for update
using (auth.uid() = user_id);

This table is required for:

• Module completion tracking
• Dashboard progress updates
• Learning streak features

⚠️ Without this table, progress tracking and streak features will not work locally.

4️⃣ Configure Environment Variables

Create a .env.local file in the project root:

# ──────────── 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

💡 Tip: See EnvExample.txt for a complete reference of all environment variables.

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

AlgoBuddy/
│
├── 📂 app/                          # Next.js App Router
│   ├── 📂 api/                      # API routes
│   │   ├── auth/                    #   ├── Authentication endpoints
│   │   ├── contact/                 #   ├── Contact form handler
│   │   ├── chatbot/                 #   ├── AI chatbot endpoint
│   │   └── send-review/             #   └── Review submission
│   │
│   ├── 📂 dashboard/                # User dashboard
│   ├── 📂 login/                    # Auth pages
│   ├── 📂 visualizer/               # Algorithm visualizer pages
│   │
│   ├── 📂 components/               # Shared UI components
│   │   ├── dashboard/               #   ├── Heatmap, streaks
│   │   ├── models/                  #   ├── Data structure models
│   │   └── ui/                      #   └── Reusable UI primitives
│   │
│   ├── layout.jsx                   # Root layout
│   └── page.jsx                     # Landing page
│
├── 📂 lib/                          # Utility libraries
│   ├── supabase.js                  #   ├── Supabase client config
│   ├── activity.js                  #   ├── Activity tracking logic
│   └── gtag.js                      #   └── Google Analytics helper
│
├── 📂 utils/                        # Helper functions
├── 📂 public/                       # Static assets
├── 📂 docs/                         # Documentation
├── 📂 security-tests/               # Security test suite
├── 📂 .github/                      # GitHub Actions workflows
│
├── middleware.js                     # Next.js middleware (auth, rate limiting)
├── tailwind.config.js                # Tailwind configuration
├── next.config.mjs                   # Next.js configuration
├── eslint.config.mjs                 # ESLint configuration
├── package.json                      # Dependencies & scripts
└── next-sitemap.config.js            # SEO sitemap generation

🤝 Contributing

We 💜 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

# 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 ⭐ — 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