Code Coach

AI-Powered Coding Mentor That Teaches While It Codes

This project is finished and completed, but it remains open for others to fork, modify, and build upon.

Learn to code by understanding, not just copying.
Code Coach explains every concept, every step, every decision.

---

The Problem

Traditional coding assistants give you code, but not understanding. Developers, especially beginners, copy-paste solutions without learning the underlying concepts. This creates a dependency on AI without building real programming skills.

The gap: There's no AI tool that prioritizes teaching over doing.

---

Our Solution

Code Coach is an AI-powered coding mentor that doesn't just write code—it teaches you why and how the code works.

Every response includes:

• Key Concepts — Programming principles explained simply
• Logic Flow — Step-by-step breakdown of the solution
• Generated Code — Clean, production-quality code

Code Coach transforms AI from a crutch into a tutor.

---

How It Works

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   User      │────▶│   Backend   │────▶│   Gemini    │
│   Request   │     │   Server    │     │   AI API    │
└─────────────┘     └─────────────┘     └─────────────┘
                           │
                           ▼
                    ┌─────────────┐
                    │   Session   │
                    │   Memory    │
                    └─────────────┘
                           │
                           ▼
┌─────────────┐     ┌─────────────┐
│   Teaching  │◀────│   JSON      │
│   UI        │     │   Response  │
└─────────────┘     └─────────────┘

1. User enters a prompt and optional code
2. Backend adds session context and teaching level
3. Gemini generates structured JSON response
4. Frontend displays concepts, logic flow, and code
5. Session memory stores interaction for context

Features

• Structured Teaching: Every interaction provides a breakdown of core programming concepts, logical flow, and high-quality generated code.
• Learning Mode Toggle: Seamlessly switch between detailed, educational explanations and concise, direct answers based on your immediate needs.
• Session Memory: The AI retains conversation context for up to five interactions, allowing for follow-up questions and deeper explorations of topics.
• Demo Mode: A guided walkthrough featuring preset examples to quickly demonstrate the system's capabilities to new users.
• Collapsible Sections: Expandable concept cards and logic steps keep the user interface clean and focused.
• Integrated Code Editor: A Monaco-powered code editor providing syntax highlighting and a professional development feel.
• Restore Original: Easily compare the AI-generated code against your original input to clearly see the improvements and changes.

Setup & Installation

Prerequisites

• Node.js (v18 or higher)
• npm (Node Package Manager)
• Google Gemini API Key (Available for free at Google AI Studio)

1. Clone the Repository

git clone https://github.com/Aditi040504/Code_Coach.git
cd Code_Coach

2. Install Dependencies

Install the backend dependencies:

cd backend
npm install

Install the frontend dependencies:

cd frontend
npm install

3. Configure Environment Variables

Create a .env file in the backend directory:

cd backend
touch .env

Add your configuration to the .env file:

PORT=3001
GEMINI_API_KEY=your_gemini_api_key_here

Running the System

To run Code Coach locally, you will need to start both the backend server and the frontend development environment.

Terminal 1 - Start the Backend Server:

cd backend
npm start

Terminal 2 - Start the Frontend Application:

cd frontend
npm run dev

Once both servers are running, open your web browser and navigate to http://localhost:5173 to access the application.

Project Structure

/
├── backend/
│   ├── src/
│   │   ├── index.js              # Express server and session management
│   │   └── services/
│   │       └── geminiService.js  # AI integration and prompt design
│   ├── .env                      # Backend environment variables
│   └── package.json              # Backend dependencies
│
├── frontend/
│   ├── src/
│   │   ├── App.jsx               # Main application component and Demo Mode logic
│   │   ├── App.css               # Application styling
│   │   ├── main.jsx              # React entry point
│   │   └── components/
│   │       └── CodeEditor.jsx    # Monaco editor integration
│   ├── vite.config.js            # Vite configuration
│   └── package.json              # Frontend dependencies
│
├── demo/
│   └── demo-script.txt           # Pitch script and walkthrough notes
│
├── docs/
│   ├── architecture.md           # System architecture documentation
│   └── prompt-design.md          # AI prompt engineering documentation
│
└── README.md                     # Project documentation

Contributor

Aditi040504

Made with love