Code Explanation

A small full-stack app that sends your code snippet to Google Gemini and shows a plain-English explanation. The UI is a React SPA; the AI call runs on an Express API so your API key stays on the server.

Tech stack

Layer	Technologies
Frontend	React 19, Vite 5, Tailwind CSS v4, react-markdown + remark-gfm
Backend	Express 5, Google Gen AI SDK (@google/genai), CORS, Helmet, express-rate-limit, dotenv

How it works

1. You choose a language, paste code, and submit the form.
2. The browser runs a server action (explainCode) that POSTs { code, language } as JSON to the Express route POST /api/code-explanation.
3. The server builds a prompt, calls Gemini (generateContent), and returns JSON { explanation, language }.
4. The client shows the explanation in a card below the form; markdown from the model is rendered with react-markdown (GitHub-flavored markdown via remark-gfm).
5. If the model is overloaded (e.g. HTTP 503 / UNAVAILABLE), the server maps Gemini’s error into a clear error message; the client shows it in the error panel instead of a generic failure.

Form fields use controlled state so your code and language stay visible after submit. The form and explanation share one max-width container (max-w-5xl) so layout stays aligned on wide screens.

Project layout

react-express-ai/
├── code-explanation/   # Vite + React frontend
├── server/             # Express API + Gemini
├── docs/
│   └── screenshot.png  # UI screenshot (used in this README)
└── README.md

Prerequisites

• Node.js (LTS recommended)
• A Google AI (Gemini) API key with access to the configured model

Quick start

1. Backend (server/)

cd server
npm install

Create a .env file in server/ (do not commit real keys):

GEMINI_API_KEY=your_gemini_api_key_here
PORT=3001
FRONTEND_URL=http://localhost:5173

• PORT: API port (default in code is 3002 if omitted; use one value and keep the frontend URL in sync).
• FRONTEND_URL: Origin allowed by CORS (Vite defaults to port 5173).

Start the API:

npm run dev

2. Frontend (code-explanation/)

cd code-explanation
npm install

Create .env in code-explanation/:

VITE_API_BASE_URL=http://localhost:3001/api

Use the same host/port as PORT in the server, with /api as the path prefix (the client calls ${VITE_API_BASE_URL}/code-explanation).

Start the dev server:

npm run dev

Open the printed local URL (usually http://localhost:5173), submit code, and check the explanation below the form.

3. Useful scripts (frontend)

Command	Purpose
npm run dev	Vite dev server with HMR
npm run build	Production build to dist/
npm run preview	Preview production build
npm run lint	ESLint

Features (high level)

• Language dropdown and code textarea with named fields for correct FormData / JSON submission.
• Controlled inputs so text remains after submit.
• Shared width for form + explanation; wide layout (max-w-5xl).
• API error handling: user-visible messages for Gemini overload and other upstream errors.
• Markdown explanations with GFM support (lists, tables, etc., per remark-gfm).

Further reading

• code-explanation/README.md — frontend-only notes.
• server/README.md — API and environment variables.