A gamified competitive programming platform — real-time battles, algorithm visualizers, LeetCode sync.
→ Live Demo · → Setup Guide · → Architecture · → Features
Vantage transforms the grind of DSA practice into an immersive, gamified experience. Built for competitive programmers who want more than just solving problems — they want to level up, compete, and conquer.
|
Why Vantage?
|
Built With
|
◈ Algorithm Visualizers
N-Queens Backtracking — one of 150+ interactive visualizers
150+ interactive visualizers across 21 algorithm categories. Watch Bubble Sort swap elements, see AVL trees balance, or trace Dijkstra in real-time.
| Category | Algorithms |
|---|---|
| Sorting | Bubble · Quick · Merge · Heap · Radix · Bucket · Shell · Insertion · Selection · Counting · Comb · Pancake |
| Searching | Linear · Binary · Jump · Interpolation · Exponential |
| Trees | BST Operations · AVL Rotations · Red-Black Trees · All Traversals |
| Graphs | BFS · DFS · Dijkstra · Bellman-Ford · Floyd-Warshall · Kruskal · Prim |
| Dynamic Programming | LCS · Knapsack · Matrix Chain · Coin Change · Edit Distance |
| And More | Backtracking · Recursion · Sliding Window · Two Pointers · Bit Manipulation |
Key features:
- 🎛 Adjustable speed controls — slow down or speed up animations
- ⏯ Step-by-step execution — pause and inspect each operation
- 🎨 Color-coded state — instantly understand element states
- 📊 Always-visible time/space complexity footer
- ✍ Integrated code editor for each algorithm
⚔️ 1v1 Battle Arena
| Battle Lobby | Post-Match Analysis |
|---|---|
 |
 |
Enter the arena and prove your skills. Challenge random opponents or friends in head-to-head coding battles with real-time sync.
| Mode | Description |
|---|---|
| ⚡ Casual 1v1 | No rating changes — perfect for warming up |
| 👑 Ranked 1v1 | ELO on the line. Climb the competitive ladder |
Customization: Difficulty (Easy/Medium/Hard) · Problems (1–3) · Duration (20min–3hr) · Language (C++/Java)
Real-time features: WebSocket live sync · Smart auto-submit timer · XP & Coin rewards · Dynamic ELO adjustments
👥 Group Battles
| Group Lobby | Multi-Player Arena |
|---|---|
 |
 |
CREATE ROOM → SHARE 6-CHAR CODE → BATTLE SIMULTANEOUSLY → LIVE LEADERBOARD
- 🔐 Private rooms with shareable 6-character codes
- 👑 Host controls — kick players, start/end battles
- 📊 Real-time standings that update live
- 🤝 Flexible size — 2 to 10 players per room
🧪 Integrated Practice + Judge
Write, run, and test solutions directly in the browser with a judge backed by Docker sandboxes.
- Languages: C++ and Java
- Monaco-powered editor with problem context and quick runs
- Sandboxed execution via a Node.js judge service and worker pool
- Visualizer drawer to jump from problem → visualizer instantly
🔗 LeetCode Extension Sync
Never manually track progress again. The Chrome extension silently intercepts accepted submissions and syncs them to Vantage instantly.
| Mode | Description |
|---|---|
| 🔄 Auto-Sync | Real-time detection of accepted submissions |
| 📦 Bulk Sync | One-click import of all previously solved problems |
LeetCode Tab
injected.js (MAIN world) → Wraps fetch/XHR, detects AC
content-script.js (ISOLATED) → Auth verification → sendMessage
↓
background.js (Service Worker)
POST /api/sync → Spring Boot (JWT Auth)
🎮 Gamification System
DIFFICULTY COINS XP 1ST ATTEMPT
─────────────────────────────────────────
BASIC +3 +5 XP +20% bonus
EASY +5 +10 XP +20% bonus
MEDIUM +15 +25 XP +20% bonus
HARD +30 +50 XP +20% bonus
🔥 Streak Multipliers
| Days | Multiplier | Bonus |
|---|---|---|
| 1–7 | 1.0×–1.3× | Base rewards building |
| 7–14 | 1.4×–1.7× | Streak shield unlock |
| 14–30 | 1.8×–2.5× | Milestone coin bonuses |
| 30+ | 2.5×+ | Legendary status |
🏆 Achievements: Problem milestones · Battle victories · Category mastery · Streak legends · Special event badges
🤝 Friends, Challenges & Notifications
Build your squad and keep up with competitive progress.
- Friend requests & profiles with live updates
- Direct challenges and private battle invites
- Notification badges for incoming requests
- Do-not-disturb mode to mute challenge spam
🗺️ DSA Conquest Map
An interactive world map where each country is a problem. Conquer territories as you solve algorithms — guided by a roadmap, locked behind prerequisites.
- 164 total problems mapped across 27 stages (24 main + 3 bonus)
- Pattern-first learning (two pointers, sliding window, DP, graphs, and more)
- LeetCode-linked problems with visualizer routes when available
FUNDAMENTALS → CORE → STANDARD → ADVANCED → EXPERT → MASTERY
📚 Problem Catalog & Progress Tracking
Everything is mapped and searchable, with links to both the visualizer and the original LeetCode problem when available.
- Stage-aware routing (problem → category → visualizer)
- Search by topic (arrays, graphs, DP, hashing, and more)
- Progress status (not started / in progress / completed)
| Home | Register | Sign In |
|---|---|---|
 |
 |
 |
| Problems | Battle | Leaderboard |
 |
 |
|
┌──────────────────────────────────────────────────────────────────────┐
│ VANTAGE │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌──────────┐ │
│ │ REACT │ │ SPRING │ │ JUDGE │ │ CHROME │ │
│ │ FRONTEND │◄─►│ BACKEND │◄─►│ SERVICE │ │ EXT │ │
│ │ │ │ │ │ │ │ │ │
│ │ Zustand │ │ REST API │ │ Docker │ │ MV3 │ │
│ │ Three.js │ │ WebSocket │ │ C++ / Java │ │ Auto-sync│ │
│ │ GSAP │ │ PostgreSQL │ │ Worker Pool │ │ Bulk sync│ │
│ │ Monaco │ │ Redis │ │ Sandbox │ │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └──────────┘ │
│ └──────────────────┴──────────────────┘ │
│ │ │
│ ┌──────────────▼──────────────┐ │
│ │ DOCKER COMPOSE │ │
│ │ Production Deployment │ │
│ └─────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────┘
| Service | Port | Description |
|---|---|---|
| React App | 3000 |
Frontend SPA — visualizers, battle UI, conquest map |
| Spring Boot | 8080 |
REST API, auth, gamification engine, battle orchestration |
| Judge Service | 4000 |
Code execution with Docker sandboxes |
| PostgreSQL | 5432 |
Primary database |
| Redis | 6379 |
Session caching and real-time state |
📦 Frontend — React
cd reactapp
npm install
cp .env.example .env
# Configure .env
REACT_APP_API_URL=http://localhost:8080
REACT_APP_JUDGE_URL=http://localhost:4000
npm start
# → http://localhost:3000🔧 Backend — Spring Boot
cd springapp
./mvnw clean install -DskipTests
# Configure application.properties
# → DB connection, JWT secret, Firebase credentials
./mvnw spring-boot:run
# → http://localhost:8080⚙️ Judge Service
cd judge
npm install
# Local dev (no Docker)
MODE=host npm start
# Production (sandboxed)
docker-compose up -d
# Workers: cpp-worker ×3 · java-worker ×3🔌 Chrome Extension
# 1. Open chrome://extensions/
# 2. Enable "Developer mode"
# 3. Click "Load unpacked" → select extension/ folder🐳 Full Docker Deploy
docker-compose -f docker-compose.yml up -d
# Starts: PostgreSQL · Redis · Spring Boot · Judge + workers · React (prod build)Vantage/
├── reactapp/ # React frontend
│ └── src/
│ ├── components/ # Reusable UI components
│ │ ├── visualizer/ # Visualizer engine
│ │ └── animations/ # Canvas animations
│ ├── pages/
│ │ ├── algorithms/ # 21 algorithm categories
│ │ ├── battle/ # 1v1 battle pages
│ │ └── group/ # Group battle pages
│ └── stores/ # Zustand state
│
├── springapp/ # Spring Boot backend
│ └── src/main/java/com/backend/
│ ├── controller/ # REST endpoints
│ ├── service/ # Business logic
│ └── model/ # Entities
│
├── judge/ # Code execution service
│ ├── executor.js # Execution engine
│ ├── workerPool.js # Docker pool manager
│ └── sandboxes/ # cpp/ · java/
│
└── extension/ # Chrome extension
├── manifest.json # MV3 manifest
├── background.js # Service worker
├── content-script.js # DOM interaction
└── injected.js # Network interception
git checkout -b feature/amazing-feature
git commit -m 'Add amazing feature'
git push origin feature/amazing-feature
# → Open a Pull Request
⭐ Star this repo if you find it useful