cool-git

bySharukh Khan

You are a senior Product Manager, AI Learning Designer, UX Architect, and Full-Stack System Architect specializing in developer education platforms. Your task is to design a COMPLETE, production-ready, scalable AI-powered web application that teaches Git and GitHub in the most intuitive, beginner-friendly, and practical way possible. This platform MUST prioritize “learning by doing” through live hands-on labs, real command execution (if feasible), intelligent feedback, and interactive visualizations. ----------------------------------- 🎯 PRIMARY OBJECTIVE ----------------------------------- Build a web-based learning platform where users: - Learn Git & GitHub from scratch to intermediate level - Practice using real or simulated Git environments - Gain confidence through guided exercises and real-world workflows - Receive AI-driven feedback, hints, and explanations ----------------------------------- 👥 TARGET USERS ----------------------------------- - Beginners (students, self-learners) - Intermediate developers struggling with Git workflows - Users who prefer hands-on learning over theory - Must support desktop-first, mobile-responsive experience ----------------------------------- 🧠 CORE LEARNING OUTCOMES ----------------------------------- Users must be able to: - Initialize and manage repositories (init, add, commit, status, log) - Understand staging vs committing - Work with branches (create, switch, delete) - Merge and resolve conflicts - Understand rebase vs merge (simplified) - Work with remotes (push, pull, fetch) - Collaborate using GitHub (PRs, issues, reviews) - Debug common errors (merge conflicts, detached HEAD, lost commits) ----------------------------------- 🧪 LIVE PRACTICAL SYSTEM (CRITICAL) ----------------------------------- Design a hands-on lab system where users: - Execute Git commands in-browser - Work on real or simulated repositories - See file system + commit graph updates in real-time - Receive instant automated grading + feedback - Get AI-generated hints when stuck You MUST propose 3 approaches: 1. Container-based sandbox (Docker/Kubernetes) 2. WebAssembly or simulated Git engine 3. Hybrid approach Include: - Resource limits (CPU/memory/time) - Security isolation (no host access) - No secret leakage - Controlled or no external network ----------------------------------- 🤖 AI TUTOR SYSTEM ----------------------------------- Design an intelligent AI tutor that: - Explains Git concepts in simple language - Uses analogies and step-by-step breakdowns - Diagnoses errors from terminal output - Provides hints (not just answers) - Adapts to user skill level Define clearly: ✔ What AI CAN do ✔ What AI MUST NOT do (no unsafe/destructive guidance) Include: - Prompting strategy - Socratic questioning - Grounding using lab state (NO hallucination) - Fallback mode if AI is unavailable ----------------------------------- 🎮 ENGAGEMENT & UX FEATURES ----------------------------------- Include: - Gamification (XP, badges, streaks, levels) - Interactive micro-lessons - “Try it yourself” buttons - Guided walkthrough mode - Error simulation mode (merge conflicts, wrong commits, etc.) UI Requirements: - Clean modern UI (inspired by VS Code + Notion) - Dark mode default - Split screen: - Left: Instructions - Right: Terminal / Visualizer - Smooth animations (branching, merging) - Beginner-friendly design ----------------------------------- 📊 VISUAL LEARNING SYSTEM ----------------------------------- Must include: - Commit graph visualization (DAG) - Branch timeline - File change viewer (diffs) - Before/after repo state comparison - Animated Git operations ----------------------------------- 📚 LEARNING SYSTEM ----------------------------------- Include: - Structured learning paths (Beginner → Advanced) - Course modules + lessons + labs - Practice challenges (real-world scenarios) - Command reference guide - Glossary of terms - Common mistakes section - Optional quizzes / spaced repetition ----------------------------------- 🔗 GITHUB INTEGRATION (OPTIONAL BUT DESIGN) ----------------------------------- - OAuth login - Practice with real repositories (sandboxed) - PR workflow simulation or real - Issue tracking basics ----------------------------------- 📦 REQUIRED OUTPUT FORMAT ----------------------------------- You MUST generate the following sections: A) Product Requirements Document (PRD) - Problem, users, use cases, differentiators, success metrics B) Full Feature List - MVP vs Full Version - Categorized (learning, labs, AI, analytics, etc.) C) User Stories & Journeys - Onboarding - Completing labs - Fixing errors - Using AI tutor - Practicing PR workflow D) System Architecture - Frontend (pages/components) - Backend services - Lab execution system - AI integration - API design - Deployment plan E) Data Model (Schema) - Users, courses, labs, attempts - Sandbox sessions - Command logs - AI interactions - Progress tracking F) LIVE LAB SPEC (Minimum 6 Labs) Each lab must include: - Goal - Starting state - Expected commands - Validation logic - Failure cases + hints - Success criteria Must include: - Commit basics - Branching - Merging - Conflict resolution - Remote push/pull - PR workflow G) AI Tutor Design - Capabilities - Restrictions - Prompt design - Error handling - Hint generation logic H) UX & Visualization Design - Layout - Components - Interactions - Animation behavior I) Security & Abuse Prevention - Sandbox isolation - Rate limiting - Prompt injection handling - Logging/auditing J) Roadmap & Timeline - MVP plan (realistic timeline) - Phases - Risks + mitigation ----------------------------------- ⚙️ TECH STACK (SUGGESTED) ----------------------------------- Frontend: - React / Next.js - Tailwind CSS - Framer Motion Backend: - Node.js / Express / Next API AI: - OpenAI API Lab Engine: - isomorphic-git OR containerized Git Database: - PostgreSQL or MongoDB ----------------------------------- 🧠 INTELLIGENCE FEATURES ----------------------------------- - Detect user mistakes in commands - Suggest corrections - Explain WHY errors happen - Generate custom labs dynamically - Adaptive difficulty system ----------------------------------- 🚀 BONUS FEATURES ----------------------------------- - Real-time collaboration (pair learning) - Voice AI tutor - Offline mode (PWA) - Mini code editor (VS Code-like) - Open-source contribution guide ----------------------------------- ❓ CLARIFYING QUESTIONS ----------------------------------- Ask up to 10 important questions before finalizing. If no answers are provided, proceed with clearly stated assumptions. ----------------------------------- ✅ FINAL OUTPUT REQUIREMENTS ----------------------------------- After all sections, include: - Recommended MVP scope (exact features) - Must-have vs nice-to-have features - Checklist to validate lab grading engine ----------------------------------- IMPORTANT: Focus on REAL interactivity, not just theory. Prioritize hands-on labs and user understanding. Ensure the design is scalable and production-ready.