AI Image Generation

A full-stack MERN-style showcase app for generating and sharing AI images with OpenAI DALL-E. Users create images from text prompts, upload them to Cloudinary, and browse a community gallery stored in MongoDB.

Licensed under the MIT License.

Features

• Generate 1024×1024 images from text prompts via OpenAI DALL-E
• Share generated images to a public community gallery
• Search posts by name or prompt
• Download images from the gallery

Tech Stack

Layer	Technology
Frontend	React 18, Vite, Tailwind CSS, React Router
Backend	Node.js, Express
Database	MongoDB (Mongoose 8)
AI	OpenAI Images API
Media	Cloudinary

Prerequisites

• Node.js 18+ (see .nvmrc)
• MongoDB — local install or MongoDB Atlas free tier
• OpenAI API key — platform.openai.com
• Cloudinary account — cloudinary.com (free tier works)

Project Structure

AI-Image-Generation/
├── client/              # React frontend (Vite)
│   ├── public/          # Static assets (app logo)
│   └── src/assets/      # UI icons & placeholders (not AI-generated)
├── server/              # Express API
│   └── mongodb/models/  # Mongoose schemas (source code, not ML weights)
├── outputs/             # Local generated images (gitignored)
├── models/              # Local ML model weights (gitignored)
├── uploads/             # Local user uploads (gitignored)
├── .env.example         # Environment variable templates (client & server)
└── LICENSE              # MIT License

Images in the repo: Only intentional UI assets are committed (logo.png, preview.png, download.png, logo.svg). AI-generated images are stored in Cloudinary, not in this repository.

Quick Start

1. Clone and install dependencies

git clone <your-repo-url>
cd AI-Image-Generation

# Install server dependencies
cd server && npm install

# Install client dependencies
cd ../client && npm install

2. Configure environment variables

Server — copy the example file and fill in your credentials:

cp server/.env.example server/.env

Edit server/.env:

OPENAI_API_KEY=your_openai_api_key_here
MONGODB_URI=your_mongodb_connection_string_here
MONGODB_DB_NAME=your_database_name_here
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name_here
CLOUDINARY_API_KEY=your_cloudinary_api_key_here
CLOUDINARY_API_SECRET=your_cloudinary_api_secret_here
PORT=8080

Client (optional — defaults to http://localhost:8080):

cp client/.env.example client/.env

3. Set up MongoDB

Option A: MongoDB Atlas (recommended for beginners)

1. Create a free cluster at mongodb.com/cloud/atlas
2. Create a database user with read/write access
3. Add your IP address to the network access allowlist (or 0.0.0.0/0 for development)
4. Copy the connection string and set it in server/.env:

MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net
MONGODB_DB_NAME=ai_image_generation

Option B: Local MongoDB

1. Install MongoDB Community Edition or run via Docker:

docker run -d -p 27017:27017 --name mongodb mongo:7

2. Set in server/.env:

MONGODB_URI=mongodb://127.0.0.1:27017
MONGODB_DB_NAME=ai_image_generation

Collections and seed data

No seed data is required. The app creates a posts collection automatically on first use with this schema:

Field	Type	Description
name	String	Creator display name
prompt	String	DALL-E prompt used
photo	String	Cloudinary image URL
createdAt	Date	Auto-generated timestamp
updatedAt	Date	Auto-generated timestamp

4. Set up Cloudinary

1. Sign up at cloudinary.com
2. From the dashboard, copy Cloud Name, API Key, and API Secret
3. Add them to server/.env

5. Run the app

Open two terminals:

Terminal 1 — API server:

cd server
npm run dev

Terminal 2 — Frontend:

cd client
npm run dev

• Frontend: http://localhost:5173
• API: http://localhost:8080

API Endpoints

Method	Endpoint	Description
GET	/api/v1/post	List all community posts
POST	/api/v1/post	Create a post (uploads image to Cloudinary)
POST	/api/v1/dalle	Generate an image from a prompt

Environment Variables Reference

Server (server/.env)

Variable	Required	Description
OPENAI_API_KEY	Yes	OpenAI API key
MONGODB_URI	Yes	MongoDB connection string
MONGODB_DB_NAME	No	Database name (uses URI default if omitted)
CLOUDINARY_CLOUD_NAME	Yes	Cloudinary cloud name
CLOUDINARY_API_KEY	Yes	Cloudinary API key
CLOUDINARY_API_SECRET	Yes	Cloudinary API secret
PORT	No	Server port (default: 8080)
OPENAI_IMAGE_MODEL	No	dall-e-2 (default) or dall-e-3

Note: MONGODB_URL is still supported as a fallback for older configs, but MONGODB_URI is preferred.

Client (client/.env)

Variable	Required	Description
VITE_API_URL	No	Backend URL (default: http://localhost:8080)

Security Notes

Before making this repo public, verify:

• server/.env and client/.env are not tracked (git check-ignore -v server/.env)
• node_modules/ is not tracked
• No API keys or connection strings appear in source files
• Rotate credentials if .env was ever shared

Never commit:

1. server/.env or client/.env — they are gitignored
2. Rotate credentials if .env was ever shared or committed
3. Generated images are stored in Cloudinary, not locally
4. Local outputs/, models/, uploads/, and node_modules/ are gitignored

Production Build

# Build frontend
cd client && npm run build

# Start server (production)
cd ../server && npm start

Set VITE_API_URL to your deployed API URL before building the client.

License

See LICENSE.