Code Explainer AI

A web application that uses AI to explain code snippets in simple, understandable terms.

Overview

Code Explainer AI helps developers understand any code by providing detailed, structured explanations. Simply paste your code, select the programming language, and get an instant AI-powered breakdown.

Features

• Multi-language Support: JavaScript, Python, Java, TypeScript, C++, Go, and more
• Instant Explanations: Get detailed code breakdowns in seconds
• Copy to Clipboard: Easily save and share explanations
• Persistent Input: Code remains in the textarea for easy editing
• Clean UI: Simple, professional interface with gradient design

Tech Stack

Frontend

• React - UI framework
• Vite - Build tool and dev server
• TailwindCSS - Styling
• React Markdown - Renders formatted explanations

Backend

• Node.js with Express - Server framework
• Groq API - AI model provider (Llama 3.3 70B)
• Security: Helmet, CORS, Rate Limiting

Project Structure

Code-Explainer/
├── frontend/          # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── forms/
│   │   │   │   └── CodeExplainForm.jsx
│   │   │   ├── CodeExplaination.jsx
│   │   │   ├── CodeEntry.jsx
│   │   │   ├── Header.jsx
│   │   │   └── Error.jsx
│   │   ├── actions/
│   │   │   └── index.js
│   │   └── App.jsx
│   └── package.json
│
└── server/            # Express backend
    ├── server.js
    ├── .env
    └── package.json

Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Groq API key (free from https://console.groq.com)

Setup

1. Clone the repository

   git clone <repository-url>
   cd Code-Explainer

2. Setup Backend

   cd server
   npm install

3. Configure Environment Variables

   Create a .env file in the server directory:

   GROQ_API_KEY=your_groq_api_key_here
   PORT=3001
   FRONTEND_URL=http://localhost:5173

4. Setup Frontend

   cd ../frontend
   npm install

5. Configure Frontend Environment

   Create a .env file in the frontend directory:

   VITE_API_BASE_URL=http://localhost:3001/api

Running the Application

Start Backend Server

cd server
npm run dev

Server runs on: http://localhost:3001

Start Frontend

cd frontend
npm run dev

Frontend runs on: http://localhost:5173

How It Works

1. User Input: User pastes code and selects programming language
2. API Request: Frontend sends code to backend API endpoint
3. AI Processing: Backend calls Groq API with Llama 3.3 70B model
4. Response: AI generates structured explanation with:
   • Overview
   • Key Components
   • How It Works
   • Important Concepts
   • Considerations
5. Display: Frontend renders explanation in readable format
6. Copy Feature: Users can copy explanation to clipboard

API Endpoints

POST /api/explain-code

Request Body:

{
  "code": "function add(a, b) { return a + b; }",
  "language": "javascript"
}

Response:

{
  "explanation": "Detailed AI explanation...",
  "language": "javascript",
  "model": "llama-3.3-70b-versatile"
}

Error Response:

{
  "error": "Error message",
  "details": "Error details"
}

Key Components Explained

Frontend

CodeExplainForm.jsx

• Main form component
• Handles user input (code & language)
• Manages form state with React hooks
• Preserves code after submission

CodeExplaination.jsx

• Displays AI-generated explanations
• Includes copy-to-clipboard functionality
• Renders markdown formatting

actions/index.js

• Handles API communication
• Sends code to backend
• Manages success/error states

Backend

server.js

• Express server setup
• API endpoint configuration
• Groq API integration
• Security middleware (CORS, Helmet, Rate Limiting)

Security Features

• Helmet: Sets security HTTP headers
• CORS: Configured for specific frontend origin
• Rate Limiting: 100 requests per 15 minutes per IP
• Input Validation: Checks for required fields
• Error Handling: Catches and sanitizes errors

Dependencies

Frontend

{
  "react": "^18.x",
  "react-dom": "^18.x",
  "react-markdown": "^9.x",
  "remark-gfm": "^4.x"
}

Backend

{
  "express": "^5.x",
  "groq-sdk": "latest",
  "dotenv": "^17.x",
  "cors": "^2.x",
  "helmet": "^8.x",
  "express-rate-limit": "^8.x"
}

Testing the API

Using curl

curl -X POST http://localhost:3001/api/explain-code \
  -H "Content-Type: application/json" \
  -d '{"code":"function add(a, b) { return a + b; }","language":"javascript"}'

Using PowerShell

Invoke-RestMethod -Uri "http://localhost:3001/api/explain-code" `
  -Method POST `
  -Body '{"code":"function add(a, b) { return a + b; }","language":"javascript"}' `
  -ContentType "application/json"

Troubleshooting

Common Issues

1. Server won't start

• Check if port 3001 is already in use
• Verify GROQ_API_KEY is set in .env
• Run npm install in server directory

2. Frontend can't connect to backend

• Ensure backend server is running
• Check VITE_API_BASE_URL in frontend .env
• Verify CORS settings in server

3. API returns 503 error

• Groq API may be temporarily overloaded
• Wait a few seconds and try again
• Check API key validity at console.groq.com

MIT License