PromptCraft

A full-stack web application that transforms rough website ideas into detailed, actionable prompts using AI. Simply describe your website concept, and PromptCraft will generate a comprehensive, structured prompt you can use with AI builders or development teams.

Overview

PromptCraft bridges the gap between a vague idea and a well-defined project specification. It uses OpenAI's GPT-4o-mini to analyze your input and produce prompts that include:

• Pages & Sections - Clear site structure with specific page contents
• Key Features - Actionable functionality broken down into implementable items
• UI/UX Considerations - Design recommendations and user experience patterns
• Technical Notes - Important implementation considerations

Tech Stack

Frontend (client/)

Technology	Purpose
React 18	UI library
TypeScript	Type safety
Vite	Build tool & dev server
Tailwind CSS	Utility-first styling
shadcn/ui	UI component library
TanStack Query	Data fetching & caching
React Router	Client-side routing

Backend (server/)

Technology	Purpose
Django 4.2	Web framework
Django REST Framework	API development
OpenAI API	AI prompt generation
SQLite	Database (development)

Project Structure

idea-refiner-main/
├── client/                   # React frontend
│   ├── src/
│   │   ├── components/       # React components
│   │   │   └── ui/           # shadcn/ui components
│   │   ├── hooks/            # Custom React hooks
│   │   ├── lib/              # Utilities and API client
│   │   └── pages/            # Page components
│   ├── public/               # Static assets
│   └── index.html            # HTML template
│
├── server/                   # Django backend
│   ├── api/                  # API application
│   │   ├── views.py          # API endpoints
│   │   ├── serializers.py    # Request/response validation
│   │   └── services/
│   │       └── openai_service.py  # OpenAI integration
│   └── prompt_refiner/       # Django project settings
│
└── README.md                 # This file

Getting Started

Prerequisites

• Node.js 18+ - Install with nvm
• Python 3.10+ - Download Python
• OpenAI API Key - Get API key

1. Clone the Repository

git clone <repository-url>
cd idea-refiner-main

2. Set Up the Backend

# Navigate to server directory
cd server

# Create and activate virtual environment
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Configure environment variables
cp .env.example .env
# Edit .env and add your OPENAI_API_KEY

# Run database migrations
python manage.py migrate

# Start the development server
python manage.py runserver

The API will be available at http://localhost:8000

3. Set Up the Frontend

# Open a new terminal and navigate to client directory
cd client

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:8080

Configuration

Backend Environment Variables (server/.env)

Variable	Description	Default
OPENAI_API_KEY	Your OpenAI API key (required)	-
DEBUG	Enable debug mode	True
DJANGO_SECRET_KEY	Django secret key	Auto-generated
ALLOWED_HOSTS	Comma-separated allowed hosts	localhost,127.0.0.1
CORS_ALLOWED_ORIGINS	Comma-separated CORS origins	http://localhost:5173,http://localhost:3000

Frontend Environment Variables (client/.env)

Variable	Description	Default
VITE_API_BASE_URL	Backend API URL	http://localhost:8000/api

API Reference

POST /api/improve-prompt/

Transform a rough website idea into a detailed prompt.

Request:

{
  "idea": "A recipe sharing app with meal planning"
}

Response:

{
  "improved_prompt": "**Pages & Sections:**\n- Homepage with featured recipes...",
  "original_idea": "A recipe sharing app with meal planning"
}

Error Codes:

• 400 - Invalid input (idea must be 10-1000 characters)
• 429 - Rate limit exceeded (30 requests/minute)
• 503 - OpenAI API error

Development

Frontend Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

Backend Commands

Command	Description
python manage.py runserver	Start development server
python manage.py migrate	Run database migrations
python manage.py createsuperuser	Create admin user

Production Deployment

Backend

1. Set environment variables:

   DEBUG=False
   DJANGO_SECRET_KEY=<secure-random-key>
   ALLOWED_HOSTS=yourdomain.com

2. Use Gunicorn as the production server:

   gunicorn prompt_refiner.wsgi:application --bind 0.0.0.0:8000

Frontend

1. Build the production bundle:

   npm run build

2. Deploy the dist/ directory to any static hosting service (Vercel, Netlify, S3, etc.)

Rate Limiting

The API enforces a rate limit of 30 requests per minute per IP address to prevent abuse. Exceeding this limit returns a 429 Too Many Requests response.

License

MIT