Prompt Optimizer

A React + Vite prompt optimization app that now uses a backend Gemini API proxy, so end users are not asked to enter their own API key.

What changed

• Gemini API key moved to the backend with an Express server
• Frontend now calls /api/optimize instead of Gemini directly
• Google AdSense component added for top and bottom display ad slots
• Placeholder ad boxes remain visible until you add your AdSense IDs

Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Express
• Gemini API
• Google AdSense

Local setup

1. Install dependencies:

npm install

2. Create a .env file from .env.example.

3. Fill in these values:

GEMINI_API_KEY=your_real_gemini_key
PORT=8787
VITE_ADSENSE_CLIENT=ca-pub-your-client-id
VITE_ADSENSE_SLOT_TOP=your-top-slot-id
VITE_ADSENSE_SLOT_BOTTOM=your-bottom-slot-id

4. Start both frontend and backend:

npm run dev

5. Open the local Vite URL shown in the terminal.

Production

Build the frontend:

npm run build

Start the backend, which will also serve the built frontend from dist/:

npm start

Deployment notes

• The Gemini key must stay only in the backend environment.
• AdSense client and slot IDs are public values and are expected to be exposed in the frontend.
• AdSense usually does not serve live ads on localhost.
• Your AdSense account and domain generally need to be approved before ads fill reliably.

Scripts

npm run dev        # backend + frontend
npm run dev:server # backend only
npm run dev:client # frontend only
npm run build      # frontend build
npm start          # serve backend + built frontend