🏆 MyCPTrainer

The Ultimate Competitive Programming Companion

Master Competitive Programming with AI-Powered Analytics, ICPC Practice, and Smart Training Tools

🌐 Live Demo • ✨ Features • 🏗️ Architecture • 💻 Tech Stack • 🧠 Engineering

📋 Table of Contents

Problem Statement
Features
Feature Demos
Architecture
Tech Stack
Engineering Highlights
System Flow Diagrams
Performance Metrics
Security & Scalability
Roadmap
Team
Contact

🎯 Problem Statement

Competitive programmers face significant challenges in their learning journey:

Challenge	Impact
📊 Fragmented Progress Tracking	Hard to understand growth across platforms
🎯 Random Problem Selection	Inefficient practice without structured approach
📈 No Personalized Analytics	Missing insights about strengths and weaknesses
🧠 Limited Learning Resources	Lack of quality editorials and explanations
🏆 ICPC Preparation Gap	No dedicated platform for ICPC-style training

MyCPTrainer solves all of this with an integrated, AI-powered platform.

✨ Features

🔥 Core Features

📊 Smart Dashboard

Real-time analytics with 18+ performance metrics including:

Rating progression tracking
Problem-solving patterns
Skill value calculations
Topic-wise strength analysis
Recent momentum scoring

🎄 Codeforces Wrapped

Spotify Wrapped-style annual review featuring:

Year-in-review statistics
Personalized problem-solving insights
Contest performance analysis
Shareable summary cards
Brutalist-chaos aesthetic UI

🧮 Algorithm Visualizer

Interactive visualizations for:

Binary Trees & BST operations
Graph algorithms (BFS, DFS, Dijkstra)
Sorting algorithms comparison
Binary Search visualization
Step-by-step execution

📝 ICPC Problem Bank

Curated ICPC practice system with:

Past contest problems collection
Integrated online judge
Custom test case support
Instant verdict & feedback
Checker-based validation

🎯 Personalized Sheets

Smart problem curation featuring:

Rating-based difficulty adjustment
Topic-focused training sets
Progress tracking per sheet
Custom sheet creation
Shareable problem lists

🤖 AI-Powered Editorials

Intelligent problem analysis with:

Step-by-step explanations
Approach breakdowns
Complexity analysis
Alternative solutions
Hint system

🎁 Additional Features

Feature	Description
💰 Coin System	Gamification layer encouraging consistent practice
🔄 Profile Comparison	Compare metrics with other competitive programmers
🤖 Telegram Bot	Daily problem delivery and streak tracking
🔐 Dual Authentication	Google OAuth + Codeforces verification
📱 PWA Support	Installable progressive web app
🌙 Dark Mode	Eye-friendly dark theme throughout

🎬 Feature Demos

📸 Screenshots

🏠 Landing Page (Click to expand)

Modern, responsive landing page with feature highlights

📊 Analytics Dashboard (Click to expand)

Comprehensive analytics with 18+ performance metrics

🤖 AI-Powered Editorials (Click to expand)

Step-by-step problem explanations powered by Google Gemini

📝 ICPC Problem Bank (Click to expand)

Curated collection of ICPC-style competitive programming problems

💻 Online Judge & Compiler (Click to expand)

Integrated code editor with real-time compilation and verdict

📋 Problem Sheets (Click to expand)

Personalized problem tracking and progress management

🎄 Codeforces Wrapped (Click to expand)

Spotify Wrapped-style annual review with brutalist-chaos aesthetic

🧮 Algorithm Visualizer - BFS (Click to expand)

Interactive BFS algorithm visualization with step-by-step execution

🎥 Video Demos

📊 Dashboard Walkthrough (Click to expand)

Real-time analytics dashboard with comprehensive performance metrics

🧮 Algorithm Visualizer Demo (Click to expand)

Interactive algorithm visualization in action

📈 User Metrics

Platform growth and user engagement metrics

🏗️ Architecture

Architecture Overview

┌─────────────────────────────────────────────────────────────────────┐
│                         CLIENT LAYER                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐                 │
│  │   Browser   │  │   Mobile    │  │  Telegram   │                 │
│  │   (React)   │  │    PWA      │  │     Bot     │                 │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘                 │
└─────────┼────────────────┼────────────────┼─────────────────────────┘
          │                │                │
          ▼                ▼                ▼
┌─────────────────────────────────────────────────────────────────────┐
│                      EDGE/CDN LAYER                                  │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                    Cloudflare CDN                             │   │
│  │          (Caching, DDoS Protection, Edge Workers)             │   │
│  └──────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     APPLICATION LAYER                                │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                   Next.js 15 Application                      │   │
│  │  ┌────────────┐  ┌────────────┐  ┌────────────┐              │   │
│  │  │  React UI  │  │    SSR     │  │ API Routes │              │   │
│  │  │ Components │  │  Rendering │  │  Handlers  │              │   │
│  │  └────────────┘  └────────────┘  └────────────┘              │   │
│  └──────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────┘
          │                │                │
          ▼                ▼                ▼
┌─────────────────────────────────────────────────────────────────────┐
│                      SERVICE LAYER                                   │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐           │
│  │  Redis   │  │ Google   │  │  Sentry  │  │Cloudflare│           │
│  │ (Upstash)│  │  GenAI   │  │ Monitor  │  │ Workers  │           │
│  │  Cache   │  │ (Gemini) │  │  Errors  │  │  Crons   │           │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘           │
└─────────────────────────────────────────────────────────────────────┘
          │                │                │
          ▼                ▼                ▼
┌─────────────────────────────────────────────────────────────────────┐
│                    EXTERNAL APIs                                     │
│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐        │
│  │  Codeforces    │  │   Razorpay     │  │   Supabase     │        │
│  │     API        │  │   Payments     │  │     Auth       │        │
│  └────────────────┘  └────────────────┘  └────────────────┘        │
└─────────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────────┐
│                       DATA LAYER                                     │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                  PostgreSQL Database                          │   │
│  │              (Managed via Prisma ORM)                         │   │
│  │  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐     │   │
│  │  │ Users  │ │ Sheets │ │ Orders │ │Problems│ │Submits │     │   │
│  │  └────────┘ └────────┘ └────────┘ └────────┘ └────────┘     │   │
│  └──────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────┘

Data Flow

User Request → Cloudflare CDN (edge caching, DDoS protection)
Cloudflare → Next.js Application (cached/proxied requests)
Next.js → Supabase Auth (authentication & session management)
Next.js ↔ Redis (rate limiting, caching layer)
Next.js → PostgreSQL (database queries via Prisma)
Next.js → Codeforces API (user data, submissions)
Next.js → Google GenAI (AI-powered features)
Next.js → Razorpay (payment processing)
Next.js → Sentry (error tracking & monitoring)
Cloudflare Workers → Scheduled cron jobs (data sync)

💻 Tech Stack

Frontend

Next.js 15
_{App Router, SSR}

React 19
_{React Compiler}

TypeScript 5
_{Strict Mode}

Tailwind 4
_{CSS Framework}

Framer Motion
_Animations

Backend & Database

PostgreSQL
_{Primary DB}

Prisma
_ORM

Redis
_{Upstash Cache}

Supabase
_{Auth Provider}

Zod
_Validation

Infrastructure & Services

Cloudflare
_{CDN + Workers}

Vercel
_Deployment

Google Cloud
_{GenAI (Gemini)}

Sentry
_{Error Tracking}

Razorpay
_Payments

Libraries & Tools

Category	Technologies
State Management	Zustand, TanStack React Query
UI Components	Radix UI, Lucide Icons, Recharts
Visualization	D3.js, ReactFlow
Code Editing	Monaco Editor, Prism.js
Math Rendering	KaTeX

🧠 Engineering Highlights

System Design Decisions

⚡ Rate Limiting Architecture

// Upstash Redis with sliding window algorithm
const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(100, "15m"),
  analytics: true,
});

// Per-endpoint rate limiting with user identification
export async function checkRateLimit(identifier: string) {
  const key = `ratelimit:${identifier}`;
  const { success, remaining, reset } = await ratelimit.limit(key);
  return { success, remaining, retryAfter: reset };
}

Design Rationale:

Sliding window prevents burst attacks while allowing legitimate usage
Redis-backed for distributed rate limiting across serverless functions
Per-user and per-IP limiting for granular control

🗃️ Database Optimization

-- Strategic indexing for high-frequency queries
CREATE INDEX idx_users_handle ON Users(handle);
CREATE INDEX idx_users_email ON Users(email);
CREATE INDEX idx_submissions_problemid ON Submission(problemId);
CREATE INDEX idx_testcases_problem_index ON Testcase(problemId, index);

Optimizations:

Composite indexes on frequently joined columns
Connection pooling optimized for serverless (connection limit: 3)
Prepared statements for repeated queries
Query result caching with React Query

🔐 Authentication Flow

┌────────────────────────────────────────────────────────────────┐
│                  DUAL AUTHENTICATION SYSTEM                     │
├────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐         ┌─────────────┐                       │
│  │   Google    │         │ Codeforces  │                       │
│  │   OAuth     │         │   OAuth     │                       │
│  └──────┬──────┘         └──────┬──────┘                       │
│         │                       │                               │
│         ▼                       ▼                               │
│  ┌──────────────────────────────────────────┐                  │
│  │           Supabase Auth                   │                  │
│  │    (PKCE Flow + Popup Authentication)    │                  │
│  └──────────────────────────────────────────┘                  │
│                        │                                        │
│                        ▼                                        │
│  ┌──────────────────────────────────────────┐                  │
│  │        Session Management                 │                  │
│  │   (Server-side + Cookie-based)           │                  │
│  └──────────────────────────────────────────┘                  │
│                                                                 │
└────────────────────────────────────────────────────────────────┘

Features:

PKCE flow for enhanced security
Popup-based OAuth for better UX
Server-side session validation via middleware
Secure cookie handling with httpOnly flags

📊 Caching Strategy

┌───────────────────────────────────────────────────────────────┐
│                    MULTI-LAYER CACHING                         │
├───────────────────────────────────────────────────────────────┤
│                                                                │
│   Layer 1: Cloudflare Edge (CDN)                              │
│   ├── Static assets: max-age=31536000 (1 year)               │
│   ├── API responses: max-age=300 (5 minutes)                 │
│   └── Pages: max-age=604800 (7 days)                         │
│                                                                │
│   Layer 2: Redis (Upstash)                                    │
│   ├── Rate limit counters: TTL 60s                           │
│   ├── API response cache: TTL 300s                           │
│   └── Session data: TTL 86400s                               │
│                                                                │
│   Layer 3: React Query (Client)                               │
│   ├── staleTime: 30 seconds                                  │
│   ├── refetchOnWindowFocus: intelligent                      │
│   └── Cache persistence across navigation                     │
│                                                                │
└───────────────────────────────────────────────────────────────┘

Performance Optimizations

Optimization	Implementation	Impact
React Compiler	Enabled in Next.js 15	Auto-memoization
Code Splitting	Per-route lazy loading	Reduced initial bundle
Image Optimization	Next.js Image component	40% faster loads
Bundle Analysis	Webpack bundle analyzer	Identified bloat
SSR + ISR	Server rendering + revalidation	SEO + freshness

🔄 System Flow Diagrams

Authentication Flow

Complete authentication flow with Google OAuth and Codeforces verification

Data Flow Architecture

Data flow between services, caching layers, and external APIs

User Journey Flow

Complete user journey from signup to feature utilization

📊 Performance Metrics

Metric	Value	Target
⚡ Lighthouse Performance	95+	90+
🚀 Time to First Byte	<200ms	<300ms
📦 First Contentful Paint	<1.2s	<1.5s
🎯 Largest Contentful Paint	<2.5s	<3.0s
📱 Mobile Score	90+	85+
🔍 SEO Score	100	95+

🔒 Security & Scalability

Security Measures

✅ Rate Limiting - Upstash Redis sliding window algorithm
✅ Input Validation - Zod schema validation on all inputs
✅ CORS Configuration - Strict origin policies
✅ HTTPS Only - SSL/TLS enforcement via Cloudflare
✅ Environment Isolation - Secrets in environment variables
✅ SQL Injection Prevention - Prisma parameterized queries
✅ XSS Protection - React's built-in escaping + CSP headers
✅ Authentication - PKCE OAuth flow with Supabase

Scalability Architecture

🚀 Serverless First - Vercel edge functions
🌍 Global CDN - Cloudflare edge caching
📊 Connection Pooling - Optimized for serverless
💾 Multi-layer Caching - CDN → Redis → Client
📈 Horizontal Scaling - Stateless application design
🔄 Background Jobs - Cloudflare Workers for cron

🗺️ Roadmap

Completed ✅

In Progress 🚧

LeetCode Integration
CodeChef Integration
Enhanced AI Recommendations

Planned 📋

👨‍💻 Team

Uday Raj Vadeghar
_{Co-Founder & Full Stack Developer}

Naivedyam Mishra
_{Co-Founder & CP Expert}

Nithin Raj Chouhan
_{Founding Engineer}

📬 Contact

Interested in this project? Want to discuss the technical implementation?

⭐ Star this repository if you find it impressive!

This is a showcase repository. The source code is proprietary and not available for public distribution.

_{Made with ❤️ by the MyCPTrainer Team}

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
extraAssets		extraAssets
.gitignore		.gitignore
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation