✨ Code Helper ✨
_{AI-Powered DSA Logic Visualizer}

Code Helper is an advanced interactive educational tool designed to break down and visualize complex coding problems and data structures autonomously using Generative AI (Google Gemini 2.5 Flash).

1. 🤖 AI Problem Analysis & Progressive Hints

2. 🧩 Multi-Language Code Implementations

3. 🎥 Interactive Execution Trace & 2D Animations

---

🚀 Key Features

• 🎨 Dynamic 2D Visualizer Engine: Natively renders bounding boxes, matrices, and recursive trees using Framer Motion. Traces live variable pointer values mapped directly to specific elements frame-by-frame.
• 🎓 Progressive Disclosure Learning: Code Helper maps an educational journey rather than just giving answers away:
  • 🔍 Phase 1: Contextual Hints
  • 🧠 Phase 2: Logic Walkthrough
  • 💻 Phase 3: Raw Implementation (C, C++, Java, JS, Python)
  • 🎬 Phase 4: Full Interactive Execution Trace Visualizer
• ⚡ Multi-Algorithm Support: The AI breaks down answers into both Brute Force and Optimal approaches, rendering separate code traces and animated paths for each strategy!
• 🔮 Glassmorphism Aesthetic: A stunning responsive design, deep space UI with blurred accents, custom flex-grid visuals, and fluid framer-motion animations.

---

🛠 Tech Stack

• Frontend Layer: React.js, Vite ⚡, Framer Motion 🎥, React Syntax Highlighter ✨, Lucide React icons.
• Backend API: Node.js 🟩, Express.js.
• AI Core Processing: @google/genai (Google Gemini 2.5 Flash SDK) customized with highly-structured Tier-Response system prompts.
• Database: MongoDB 🍃 (via Mongoose) to track saved hints/problems locally.

---

⚙️ Local Development Setup

1️⃣ Requirements

• Node.js v18+
• MongoDB local instance or Atlas Cloud
• A Google Gemini API Key from Google AI Studio

2️⃣ Backend Setup

Navigate into the server repository and install dependencies:

cd server
npm install

Create a .env file in the server/ directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/coding-doubt-solver
GEMINI_API_KEY=your_gemini_api_key_here

Run the Node server:

npm run dev

3️⃣ Frontend Setup

Open a new terminal session.

cd client
npm install
npm run dev

4️⃣ Running the App

Go to http://localhost:5173 in your browser. Type in any LeetCode problem or general programming concept (e.g., "Merge Sort", "Two Sum", or "Level Order Tree Traversal") and watch the AI seamlessly map the execution!

---

📝 Note on Graph Visualizations: Algorithmic Graphs are projected automatically into Adjacency Matrices using the Matrix renderer to avoid recursive physics-clipping layout issues!