AI-Powered Bug Detection, Code Explanation & Code Improvement Platform

A full-stack app (React + Express + Gemini API) that reviews a pasted code snippet like a senior engineer: it finds bugs, estimates time/space complexity, suggests improvements, rewrites the code, and explains it in plain English. No database, no auth, no heavy AI framework — just a clean REST API in front of the Gemini API.

Tech Stack

Layer	Tech
Frontend	React (Vite), Axios
Backend	Node.js, Express, dotenv, CORS
AI	Google Gemini API (gemini-3.5-flash)
Storage	None — fully stateless, request/response only

Architecture

React (CodeEditor) --Axios--> Express /api/analyze --> Prompt Engineering
                                                              |
                                                              v
                                                        Gemini API
                                                              |
                                                              v
React (ResultCards) <-- JSON <-- Express (validate) <-- JSON response

Folder Structure

codeinsight-ai/
├── server/
│   ├── app.js                 # Express app entry point
│   ├── routes/analyze.js      # POST /api/analyze route + validation
│   ├── services/gemini.js     # Prompt engineering + Gemini call + JSON parsing
│   └── .env.example
└── client/
    └── src/
        ├── components/
        │   ├── Navbar.jsx
        │   ├── Hero.jsx
        │   ├── CodeEditor.jsx
        │   ├── LanguageSelector.jsx
        │   ├── ResultCards.jsx
        │   └── Footer.jsx
        ├── pages/Home.jsx
        ├── services/api.js
        ├── App.jsx
        └── main.jsx

Setup

1. Get a free Gemini API key

Visit https://aistudio.google.com/app/apikey and generate a key.

2. Configure the backend

cd server
cp .env.example .env
# open .env and paste your key into GEMINI_API_KEY=

3. Install & run (from the project root)

npm install
npm run dev

This installs both server and client dependencies (via postinstall) and starts:

• Express API on http://localhost:5000
• React app on http://localhost:5173

The Vite dev server proxies /api/* requests to Express, so the frontend just calls POST /api/analyze with no CORS configuration needed on its side.

API

POST /api/analyze

Request body

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

Success response 200

{
  "summary": "...",
  "bugs": [{ "title": "...", "description": "..." }],
  "timeComplexity": "O(1) - constant time addition",
  "spaceComplexity": "O(1) - no extra memory used",
  "improvements": ["..."],
  "fixedCode": "...",
  "explanation": "..."
}

Error responses

Status	Body	Cause
400	{ "error": "Please paste some code." }	Empty code
400	{ "error": "Please select a valid language..." }	Bad/missing language
503	{ "error": "AI service unavailable. Please try again." }	Gemini call or parsing failed

Prompt Engineering

server/services/gemini.js builds a prompt that instructs Gemini to act as a senior software engineer performing a code review: detect syntax, logic, and runtime issues; estimate Big-O time and space complexity; suggest improvements; produce a fixed version of the code; and explain it in beginner-friendly terms — all returned as a single strict JSON object (responseMimeType: "application/json" is also set on the model config as a second safeguard). The backend then extracts and validates the JSON shape before ever sending it to the frontend, so the UI never has to guard against malformed AI output.

Highlighths

• Demonstrates REST API design, input validation, and error handling on the backend.
• Demonstrates prompt engineering and structured-output handling for an LLM.
• Demonstrates component-driven React architecture with clear separation of concerns (editor, results, services).
• No database — intentionally stateless to keep the project focused on the API + AI integration layer.