Project Name

environment:
frontend:
node: 22.21.1
npm: 11.6.3 backend: python 3.12

preparation:
frontend:
run "npm install" for download all dependencies run "npm run dev" for start frontend server backend: run "pip install -r requirements.txt" for download all dependencies

A brief description of what this project does and its main features.

🎯 Project Overview

AutoMaker is an intelligent code generation platform that:

• Accepts UI sketch images and text descriptions
• Uses GPT to generate complete Node.js + Express + EJS full-stack applications
• Provides live preview of generated code directly in the browser
• Supports multi-page preview (index, login, register, etc.)
• Offers responsive preview modes (Desktop, Tablet, Mobile)

🚀 Tech Stack

Frontend:

• Node.js 22.21.1
• npm 11.6.3
• [Add other frontend technologies]

Backend:

• [Add backend technologies]

Middleware:

• [Add middleware technologies]

📋 Prerequisites

Before running this project, ensure you have the following installed:

• Node.js 22.21.1 or higher
• npm 11.6.3 or higher
• [Add other prerequisites]

⚡ Quick Start

Follow these steps to get the project running locally:

Frontend Setup

1. Install Dependencies

   npm install

2. Start Development Server

   npm run dev

   The application will be available at http://localhost:3000 (or the port specified in your configuration)

Backend Setup

<<<<<<< HEAD

1. Install Dependencies =======
2. Navigate to backend directory

c834981c356627ff4cac024803ac6eb54b27d179

cd backend

2. Create virtual environment (recommended)

   python -m venv venv

3. Activate virtual environment

   # Windows
   .\venv\Scripts\activate
   # macOS/Linux
   source venv/bin/activate

4. Install Dependencies

   pip install -r requirements.txt

5. Configure Environment Variables Create a .env file in the backend directory:

   OPENAI_API_KEY=your_openai_api_key_here

6. Start Backend Server

   python server.py

<<<<<<< HEAD

Middleware Setup

(Add middleware setup instructions here)

The backend API will be available at http://localhost:8080

c834981c356627ff4cac024803ac6eb54b27d179

📁 Project Structure

AutoMaker/
├── frontend/                    # Next.js frontend application
│   ├── app/                    # Next.js app router
│   ├── components/             # React components
│   │   ├── code-generator.tsx  # Main code generation UI
│   │   ├── live-preview.tsx    # Live preview component
│   │   ├── code-preview.tsx    # Code preview with EJS support
│   │   └── ui/                 # shadcn/ui components
│   ├── lib/
│   │   └── ejs-renderer.ts     # Browser-side EJS renderer
│   └── package.json
├── backend/                     # FastAPI backend application
│   ├── app/
│   │   └── agent/
│   │       └── chains/
│   │           └── frontend_generation.py  # AI code generation logic
│   ├── server.py               # FastAPI server entry point
│   ├── requirements.txt
│   └── .env                    # Environment variables (create this)
└── README.md

🛠️ Available Scripts

Frontend Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run test - Run test suite
• npm run lint - Run linting

(Add backend scripts here)

🌟 Features

• Feature 1
• Feature 2
• Feature 3

🔧 Configuration

Create a .env file in the root directory with the following variables:

# Frontend Environment Variables
VITE_API_URL=http://localhost:3001
VITE_APP_TITLE=Your App Name

# Backend Environment Variables
PORT=3001
DATABASE_URL=your_database_url

📝 API Documentation

💴payments deployment

Stripe CLI（for local webhook test）

Stripe account setting

step 1：set up Stripe account

1. Visit https://stripe.com
2. Click "Sign Up" to register a new account
3. Enter your email and password
4. Complete the email verification
5. Choose "Standard" (recommended) or "Express" account type

Step 2: Obtain the API key

1. Log in to the Stripe Dashboard
2. In the left menu, find Developers → API keys
3. You will see two keys:

- Publishable Key (pk_test_xxxxx) - visible on the front end, used for Stripe.js - Secret Key (sk_test_xxxxx) - confidential, only used on the back end

4. Copy the Secret Key (starting with sk_test_), this is your STRIPE_SECRET_KEY

example：sk_test_yours

Step 3: Create Product and Price

This step is important because you need a Price ID to enable the subscription feature.

3.1 Creating a Product

1. In the Stripe Dashboard, find Products (or Catalog → Products)

2. Click + Add Product

3. Fill in the following information:

• Name: Pro Plan (or a name you prefer)

• Description: Monthly Pro subscription with unlimited features

• Image: Optional, upload a logo or product image

4. Click Save product

3.2 Adding a Subscription Price

1. Go to the product details page you just created.

2. Scroll down to the Pricing section.

3. Click Add another price

4. Fill in the price information:

• Billing period: Select Monthly (or Yearly, etc.)

• Price: Enter the price, for example, 9.99 USD

• Recurring: Make sure "Recurring" is checked.

5. Click Save price

6. You will see a Price ID** (starting with price_), copy this ID

Example: price_yours

Local Development Environment Configuration

Step 1: Obtain the Generated Application

AutoMaker will automatically generate an application for you that includes payment functionality. The generated files are located in the backend/output/ directory.

Step 2: Navigate to the Application Directory

cd backend/output

step 3: install dependencies

npm install

Step 4: Configure Environment Variables

1. Copy the example file:

# Windows

copy .env.example .env

# macOS/Linux

cp .env.example .env

2. Edit the [.env] file and enter your Stripe key:

# 从 Stripe Dashboard 获取的 Secret Key
STRIPE_SECRET_KEY=sk_test_your

# 从 Products 页面获取的 Price ID
STRIPE_PRICE_ID=price_your

# Webhook Secret（暂时留空，后面配置）
STRIPE_WEBHOOK_SECRET=whsec_your

# 支付成功/取消的跳转 URL
STRIPE_SUCCESS_URL=http://localhost:3001/success?session_id={CHECKOUT_SESSION_ID}
STRIPE_CANCEL_URL=http://localhost:3001/subscribe

# Session 加密密钥（修改成随机字符串）
SESSION_SECRET=my_super_secret_key_change_in_production_12345

Important:

• {CHECKOUT_SESSION_ID} is a placeholder; Stripe will automatically replace it, keep it as is

• Change localhost:3000 to your actual port (if it's not 3000)

• [SESSION_SECRET](vscode-file://vscode-app/d:/Program Files/Microsoft VS Code/resources/app/out/vs/code/electron-browser/workbench/workbench.html) can be any length string used for encryption. session

3. Save file

Step 5: Start application

To avoid port conflicts, set a different port:

# Windows
set PORT=3001 && node server.js

# macOS/Linux
PORT=3001 node server.js