Your AI-powered DSA learning system. Sync. Analyze. Crack placements.
- The Problem & Our Solution
- Key Features
- System Architecture
- Tech Stack
- Local Setup
- Environment Variables
- Folder Structure
- Screenshots
- Future Roadmap
- Author
College DSA preparation is broken. Students grind LeetCode in isolation, instructors have zero visibility into who's struggling, and nobody knows which topics are dragging down placement outcomes — until it's too late.
| Pain Point | Reality Today |
|---|---|
| 📊 No visibility for teachers | Instructors assign problems but have no idea if students actually solve them |
| 🔄 Manual progress tracking | Students maintain spreadsheets or rely on memory — both fail under exam pressure |
| 🤖 Generic advice | "Practice more DP" is not coaching — real coaching is specific, data-driven, and timely |
| 🔒 Security flaws | Class-code sharing means anyone can join anyone's class |
| 🏝️ Student isolation | No leaderboard, no peer benchmarking, no accountability mechanism |
| 📉 Topic blindspots | Teachers can't tell which DSA topics the whole class is weakest at — until exam results |
SolveTracker is a production-grade, full-stack AI learning system that bridges the gap between students grinding LeetCode and teachers tracking outcomes — in real time.
- 🔄 Auto-sync LeetCode stats via the unofficial GraphQL API — no manual entry ever
- 🧠 Gemini 2.5 Flash AI generates personalized, data-driven coaching insights automatically
- 👩🏫 Teacher panel with class roster management, topic heatmaps, charts, and student deep-dives
- 🔬 Topic Analysis — instantly categorise every student as Gallant / Average / Gradual for any DSA topic
- 🏆 Leaderboard with tier system to drive accountability and healthy competition
- 📋 Custom problem sheets — teachers assign curated lists, students create personal practice sets
- ✅ LeetCode-verified progress — problems are marked done only after verifying actual submission
- 💬 DSA Buddy chatbot — context-aware AI assistant with role-specific coaching (student vs teacher)
Built as a college project with the soul of a production SaaS product — designed for real users, real workflows, and real placement outcomes.
| Feature | Description |
|---|---|
| LeetCode Auto-Sync | One-click sync pulls total solved, difficulty breakdown, topic stats, acceptance rate, global rank, and last 20 accepted submissions via LeetCode's GraphQL API |
| Personalized AI Insights | Gemini 2.5 Flash auto-generates 6–8 placement-focused coaching insights — strength, weakness, interview prep, daily task, pattern to study — updates automatically on every sync, no button needed |
| Activity Heatmap | GitHub-style 18-week contribution calendar with streak tracking, day labels, month markers, and color intensity levels |
| Skill Radar Chart | Recharts radar showing top 6 topic strengths — visual at a glance |
| Topic Breakdown | Horizontally scrollable bar chart showing all solved topics, not capped — with top-3 highlighting |
| Mini Streak Widget | Sidebar shows last 5-day activity squares with live streak count — syncs on LeetCode data update |
| Tier System | Rookie → Grinder → Coder → Expert → Legend progression with animated progress ring |
| Class Sheets | View published problem sheets from instructor with due dates, difficulty tags, teacher notes — mark problems done via LeetCode verification only |
| Personal Sheets | Build private practice lists — drag-to-reorder problems, auto-fill title from LeetCode URL slug |
| LeetCode Verification | "Verify" button checks actual LeetCode submission history (last 100 AC) — status updates only after successful verification, no manual marking allowed |
| Leaderboard | Class-wide rankings with podium, metric tabs (Total / Hard / Medium / Acc%), tier badges, and "You" highlight |
| DSA Buddy Chatbot | Role-aware AI chatbot with student-specific greeting, quick suggestions, full markdown rendering |
| Feature | Description |
|---|---|
| Secure Enrollment | Add students by email — auto-enroll if registered, queue as pending invite otherwise. Zero class-code sharing, zero security risk |
| Class Overview Dashboard | Avg solved, avg acceptance, top student, total enrolled — all animated stat cards |
| Topic Heatmap | Scrollable grid showing ALL class topics with avg-per-student color coding, mini progress bars, rank badges, and "needs work" summary |
| 🔬 Topic Analysis | Select any DSA topic → instantly see every student categorised as Gallant 🏆 (top performers), Average 📈 (middle tier), or Gradual 🌱 (needs help) with solve counts, distribution chart, and concrete action recommendations |
| 📊 Class Analytics Charts | 5 dedicated charts: Submission activity trend · Topic strength radar · Avg difficulty by tier · Students-by-solved distribution · Acceptance rate histogram |
| AI Class Insights | Gemini auto-analyses class data — flags at-risk students by name, identifies topic gaps, gives placement-readiness assessment — refreshes on data change |
| Student Deep-Dive | Click any student row → full profile with submission trend, skill radar, topic breakdown, heatmap, and AI coaching for that individual |
| Sheet Builder | Create problem sheets with draggable ordering, LeetCode URL auto-fill, difficulty selector, per-problem teacher notes, draft/published toggle, due dates |
| Sheet Editor | Edit existing sheets in-place with dirty-state tracking — save button activates only on unsaved changes |
| Leaderboard | Class-wide rankings — same view as student panel, useful for spotting top performers and laggards simultaneously |
| DSA Buddy Chatbot | Teacher-specific greeting, teacher-specific suggestions (class planning, lecture topics, student interventions), purple accent |
- Dark / Light Mode — Tailwind
classstrategy with CSS variable system; default dark, instant toggle with animated sun/moon icon, persisted via Zustand - ⌘K Command Palette — Keyboard-navigable command center with role-aware commands, tag badges, fuzzy search, Enter to execute, Escape to dismiss
- Framer Motion — Page transitions, staggered list reveals, spring physics on cards, layout animations on sidebar collapse, animated counters
- Responsive Layout — Mobile sidebar overlay with backdrop blur, touch-friendly 44px tap targets, iOS safe-area padding
- Collapsible Sidebar — Animated collapse/expand with icon-only mode, active route indicator with
layoutIdanimation, 5-day streak heatmap for students - Skeleton Loaders — Shimmer skeletons on every data section — no blank states, no layout shift
- Custom Scrollbars — Thin styled scrollbars matching the brand color palette
- Toast Notifications —
react-hot-toastwith dark/light theme-aware styling - Premium Typography — Syne (display), DM Sans (body), JetBrains Mono (code) — Google Fonts with antialiasing
- CSS Variable Design System — Full light/dark token set for backgrounds, text, borders, semantic colors (easy/medium/hard)
┌─────────────────────────────────────────────────────────────────┐
│ BROWSER (Student / Teacher) │
│ React + Zustand + Framer Motion + Recharts + TailwindCSS │
└───────────────────────────┬─────────────────────────────────────┘
│ REST API (JWT Bearer Token)
▼
┌─────────────────────────────────────────────────────────────────┐
│ EXPRESS.JS BACKEND │
│ │
│ /api/auth → Register · Login · Google OAuth (ID Token) │
│ /api/leetcode → Sync · Stats · Verify Problem │
│ /api/sheets → Class Sheets · Personal Sheets · Progress │
│ /api/analytics → Class Data · Leaderboard · Topic Stats │
│ Topic-Student Categorisation │
│ /api/students → Invite · Enroll · Remove · Pending │
│ /api/ai → Insight (JSON) · Chat (Conversational) │
└──────┬──────────────────────┬────────────────────────────┬──────┘
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ MongoDB │ │ LeetCode GraphQL │ │ Gemini 2.5 Flash │
│ (Mongoose) │ │ (Unofficial API) │ │ (Google AI SDK) │
│ │ │ │ │ │
│ • User │ │ • Profile stats │ │ • 6-8 Insights JSON │
│ • Progress │ │ • Topic tag counts │ │ • Chat responses │
│ • Sheet │ │ • Recent AC subs │ │ • Model fallback │
└─────────────┘ │ • Problem verify │ │ 2.5→1.5→1.5-8b │
└─────────────────────┘ └─────────────────────┘
Student clicks "Sync LC"
│
▼
Backend: 3 parallel GraphQL queries to leetcode.com
→ getUserProfile (solved counts, ranking, acceptance)
→ getRecentAcSubs (last 20 accepted submissions)
→ getUserTagCounts (topic-wise problem counts)
│
▼
Results merged → Progress.leetcode upserted in MongoDB
│
▼
Frontend receives updated stats via CustomEvent
│
├─→ Recharts re-renders (radial, bar, area, radar, all 5 teacher charts)
├─→ Heatmap rebuilds from new submission timestamps
├─→ Sidebar mini-streak squares update live
└─→ GeminiInsight detects signature change → auto-refetches insights
Data signature = `${totalSolved}-${hardSolved}-${topicCount}`
On mount: Check localStorage cache (8h TTL + signature match)
→ Cache hit & fresh : render immediately (0 API calls)
→ Cache miss / stale : fetch Gemini, write cache
On sync: 'leetcode-synced' event → force re-fetch (signature changed)
On refresh: Manual button → force re-fetch (ignore cache)
Result: Insights always reflect current data, API calls minimised.
Request → gemini-2.5-flash
│ 503/429? retry with backoff (1s → 2s → 4s)
│ still failing?
↓
gemini-1.5-flash
│ still failing?
↓
gemini-1.5-flash-8b ← lightest model, almost never rate-limited
│
↓
Server-side response cache (2h TTL, hash-keyed by prompt)
→ Identical requests served instantly, zero API calls
Teacher selects topic (e.g. "Dynamic Programming")
│
▼
GET /api/analytics/topic-students?topic=Dynamic+Programming
│
▼
Backend: fetch all students → look up topicStats[topic] per student
→ class average = sum(counts) / synced students
→ Gallant : count ≥ avg × 1.35
→ Average : count ≥ avg × 0.60 and < avg × 1.35
→ Gradual : count < avg × 0.60 or count = 0
│
▼
Frontend: 3-column categorised view + distribution bar chart
+ contextual action recommendations (create sheet, challenge top students)
| Technology | Version | Purpose |
|---|---|---|
| React.js | 18.3 | UI framework with hooks |
| Vite | 5.3 | Build tool & dev server |
| TailwindCSS | 3.4 | Utility-first CSS with darkMode: 'class' |
| Framer Motion | 11 | Animations, transitions, layout animations |
| Recharts | 2.12 | Radial, bar, area, radar, pie charts |
| Zustand | 4.5 | Lightweight global state (auth + theme + command) |
| React Router DOM | 6.24 | Client-side routing with nested layouts |
| Axios | 1.7 | HTTP client with JWT interceptors |
| React Hot Toast | 2.4 | Toast notifications |
| Lucide React | 0.400 | Icon library |
| date-fns | 3.6 | Date formatting utilities |
| Technology | Version | Purpose |
|---|---|---|
| Node.js | 20+ | Runtime (ESM modules) |
| Express.js | 4.19 | REST API framework |
| Mongoose | 8.4 | MongoDB ODM with schema validation |
| JSON Web Token | 9.0 | Stateless auth tokens |
| bcryptjs | 2.4 | Password hashing (12 rounds) |
| google-auth-library | 9.11 | Google OAuth ID token verification |
| @google/generative-ai | 0.15 | Gemini 2.5 Flash SDK with model fallback |
| axios | 1.7 | LeetCode GraphQL fetcher |
| nanoid | 3.3 | Unique ID generation |
| cors | 2.8 | Cross-origin resource sharing |
| dotenv | 16.4 | Environment variable management |
| Service | Usage |
|---|---|
| MongoDB Atlas | Cloud-hosted MongoDB — Users, Progress, Sheets |
| Google Gemini 2.5 Flash | AI insights + DSA Buddy chatbot (with 1.5-flash fallback) |
| Google OAuth 2.0 | One-tap sign-in (ID Token flow — no redirect) |
| LeetCode GraphQL | Unofficial API for stats, topics, submissions, problem verification |
| Netlify | Frontend deployment (SPA with _redirects) |
node --version # v18+ required (v20 recommended)
npm --version # v9+You will also need:
- A MongoDB Atlas connection string (free tier works)
- A Google Gemini API key from aistudio.google.com (free)
- A Google OAuth Client ID from console.cloud.google.com (optional — email login works without it)
git clone https://github.com/harshgupta751/SolveTracker.git
cd SolveTrackercd backend
npm installCreate the environment file:
cp .env.example .env
# then fill in the values — see Environment Variables section belowSeed the database with demo data:
node seed.jsStart the backend dev server:
npm run dev
# Server running on http://localhost:5000Open a new terminal:
cd frontend
npm installCreate the frontend environment file:
cp .env.example .env
# Add your VITE_GOOGLE_CLIENT_IDStart the frontend dev server:
npm run dev
# App running on http://localhost:5173| URL | Description |
|---|---|
http://localhost:5173 |
React frontend |
http://localhost:5000/api/health |
Backend health check |
Demo accounts (created by seed.js):
| Role | Password | Tier | |
|---|---|---|---|
| Teacher | teacher@dsademo.com |
demo1234 |
— |
| Student | arjun@dsademo.com |
demo1234 |
👑 Legend (362 solved) |
| Student | sneha@dsademo.com |
demo1234 |
💎 Expert (280 solved) |
| Student | rohan@dsademo.com |
demo1234 |
🔥 Coder (180 solved) |
| Student | karan@dsademo.com |
demo1234 |
⚡ Grinder (90 solved) |
| Student | dev@dsademo.com |
demo1234 |
🌱 Rookie (35 solved) |
All 7 demo students are pre-enrolled with realistic LeetCode stats, topic breakdowns, sheet progress, and submission history — making all charts and the Topic Analysis feature immediately usable.
# Server
PORT=5000
# Database
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/SolveTracker
# Authentication
JWT_SECRET=your_super_secret_jwt_key_minimum_32_chars
JWT_EXPIRES_IN=7d
# Google OAuth (for "Sign in with Google" button)
GOOGLE_CLIENT_ID=your_google_oauth_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_google_oauth_secret
# AI — Gemini (get free key at aistudio.google.com)
# Used for: insights panel + DSA Buddy chatbot + 3-model fallback chain
GEMINI_API_KEY=your_gemini_api_key
# Frontend URL (for CORS)
CLIENT_URL=http://localhost:5173# Google OAuth Client ID (same value as backend GOOGLE_CLIENT_ID)
# Must be prefixed with VITE_ to be accessible in the browser
VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_id.apps.googleusercontent.comSecurity note: Never commit
.envfiles. Both are already in.gitignore.
SolveTracker/
│
├── backend/ # Node.js + Express API
│ ├── middleware/
│ │ └── auth.js # JWT verifyToken + requireRole guards
│ ├── models/
│ │ ├── User.js # User schema (student + teacher + invitedEmails)
│ │ ├── Sheet.js # Problem sheet schema (class + personal)
│ │ └── Progress.js # LeetCode stats + sheet completion + verifiedProblems
│ ├── routes/
│ │ ├── auth.js # Register · Login · Google OAuth · /me · auto-enroll
│ │ ├── leetcode.js # Sync · Stats · Verify-problem
│ │ ├── sheets.js # Class sheets · Personal sheets · Toggle · Progress
│ │ ├── analytics.js # Class data · Leaderboard · Topic stats
│ │ │ Topic-student categorisation (Gallant/Average/Gradual)
│ │ ├── students.js # Invite · Enroll · Remove · Pending
│ │ └── ai.js # Insight (JSON) · Chat · 3-model fallback · server cache
│ ├── utils/
│ │ └── leetcode.js # GraphQL fetcher + verifyProblemSolved
│ ├── seed.js # Demo data seeder (7 students, 4 sheets, full stats)
│ ├── server.js # Express bootstrap + all route mounts
│ └── .env # Environment variables (not committed)
│
└── frontend/ # React + Vite
├── public/
│ ├── logo.png # Custom brand logo
│ └── _redirects # Netlify SPA routing fix
└── src/
├── api/
│ └── index.js # Axios instance + all API methods
├── components/
│ ├── ai/
│ │ └── ClaudeInsight.jsx # Auto-fetch Gemini insights, cache, fallback UI
│ ├── auth/
│ │ └── GoogleButton.jsx # Google Identity Services button
│ ├── charts/
│ │ ├── ClassHeatmap.jsx # Teacher topic heatmap (scrollable grid)
│ │ ├── TeacherCharts.jsx # 5 class analytics charts
│ │ ├── DifficultyDonut.jsx
│ │ ├── ProgressLine.jsx # Area chart (submission trend)
│ │ ├── SolvedRadar.jsx # Radial bar (difficulty split)
│ │ ├── StreakCalendar.jsx # GitHub-style 18-week heatmap
│ │ └── TopicBreakdown.jsx # Horizontally scrollable bar chart (all topics)
│ ├── layout/
│ │ ├── AppLayout.jsx # Root layout with sidebar + navbar + footer
│ │ ├── Footer.jsx # Branded footer with role-aware links
│ │ ├── Navbar.jsx # Top bar with sync, ⌘K, theme toggle
│ │ ├── Sidebar.jsx # Collapsible sidebar + mini streak heatmap (students)
│ │ └── ThemeToggle.jsx # Animated dark/light toggle
│ ├── shared/
│ │ ├── AnimatedCounter.jsx
│ │ ├── ConfirmDialog.jsx
│ │ ├── DifficultyBadge.jsx
│ │ └── LoadingPulse.jsx
│ ├── Chatbot.jsx # Floating DSA Buddy chatbot (role-aware context)
│ └── CommandPalette.jsx # ⌘K keyboard command palette
├── hooks/
│ ├── useAnalytics.js # useClassAnalytics + useLeaderboard
│ ├── useLeetcode.js # useLeetcodeStats
│ └── useSheets.js # useSheets with verify + progress
├── lib/
│ └── utils.js
├── pages/
│ ├── Landing.jsx
│ ├── Login.jsx
│ ├── Register.jsx
│ ├── Leaderboard.jsx # Shared leaderboard (student + teacher)
│ ├── student/
│ │ ├── Dashboard.jsx # Stats, charts, heatmap, AI insights
│ │ ├── MySheets.jsx # Class + personal sheets (verify-only flow)
│ │ ├── Progress.jsx # Full progress deep-dive
│ │ └── CreatePersonalSheet.jsx
│ └── teacher/
│ ├── Dashboard.jsx # Overview + roster + 5 charts + sheets
│ ├── TopicAnalysis.jsx # Gallant/Average/Gradual per-topic breakdown
│ ├── CreateSheet.jsx
│ ├── SheetEditor.jsx
│ ├── StudentView.jsx # Individual student profile
│ └── ManageStudents.jsx # Email invite + pending + remove
├── store/
│ ├── authStore.js
│ ├── commandStore.js
│ └── themeStore.js
├── App.jsx
├── main.jsx
└── index.css
| Priority | Feature | Description |
|---|---|---|
| 🔴 High | Email Notifications | Notify students when a new sheet is published or a due date is approaching |
| 🔴 High | Mobile App (React Native) | Extend to iOS and Android with the same backend |
| 🟡 Medium | Codeforces Integration | Sync competitive programming stats alongside LeetCode |
| 🟡 Medium | GeeksforGeeks & HackerRank Sync | Multi-platform problem tracking |
| 🟡 Medium | AI Problem Recommendations | Gemini recommends specific LeetCode problems based on student weaknesses |
| 🟡 Medium | Discussion Threads on Sheets | Students can discuss problems directly on the platform |
| 🟡 Medium | Batch Topic Assignment | Teacher selects all Gradual students in a topic and assigns a remedial sheet in one click |
| 🟢 Low | Contest Tracker | Upcoming LeetCode / Codeforces contest calendar with reminders |
| 🟢 Low | Institutional Admin Panel | Department-level view for HODs / placement cells |
| 🟢 Low | Resume Skill Badge Export | Auto-generate verifiable skill badges for GitHub / LinkedIn |
| 🟢 Low | Dark Mode Themes | Multiple accent colors beyond the current green palette |
| 🟢 Low | Offline PWA Support | Service worker caching for offline access to last-synced data |
Contributions are welcome! If you'd like to improve SolveTracker:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m 'feat: add your feature' - Push to the branch:
git push origin feature/your-feature-name - Open a Pull Request
Please follow the existing code style — ESM imports, functional components, Tailwind utility classes with CSS variables for theming.
This project is licensed under the MIT License — see the LICENSE file for details.
Harsh Gupta
Full-Stack Developer · Crafting scalable solutions · Open Source Contributor
Built with ⚡ for the grind · SolveTracker © 2026
If this project helped you, consider giving it a ⭐ on GitHub!