Build Full-Stack Apps with AI: Zero Cost

1. Introduction#

Building a full-stack application used to take weeks of coding. Today, with AI tools like ChatGPT, you can build and deploy a complete application in hours - for free.

This tutorial will show you how to:

1. Generate a complete REST API using AI prompts
2. Set up a free database (TiDB Serverless)
3. Deploy your API to Vercel (free)
4. Generate a frontend using the API spec
5. Deploy the frontend to Vercel (free)

Total cost: $0

What we’ll build: An E-Commerce API with:

• Customers (name, email)
• Products (name, price, stock)
• Orders (with transaction support)

2. Prerequisites#

Before starting, create these free accounts:

• GitHub ↗ - for code hosting
• Vercel ↗ - for deployment
• TiDB Cloud ↗ - for free database
• ChatGPT ↗ - for AI code generation

Tools you’ll need:

• Node.js installed on your computer
• A code editor (VS Code recommended)
• Terminal/Command Prompt

3. Part 1: Generate Backend API with AI#

Step 1: Create Your Project Folder#

Open your terminal and run:

mkdir ecommerce-api
cd ecommerce-api
npm init -y

Step 2: The AI Prompt for Backend#

Open ChatGPT ↗ and use this exact prompt:

Create a RESTful API for an e-commerce system using Express.js and mysql2 (no ORM).

Project structure:
ecommerce-api/
├── db.js
├── index.js
├── schema.sql
├── seed.sql
├── .env
└── routes/
    ├── customers.js
    ├── products.js
    └── orders.js

Database: TiDB
Database name: ecommerce

Tables:
- customers (id, name, email, created_at)
- products (id, name, price, stock, created_at)
- orders (id, customer_id, total, status, created_at)
- order_items (id, order_id, product_id, quantity, price)

Required endpoints for each resource (customers, products, orders):
- GET all - returns array
- GET by id - returns single item or 404
- POST - create new item
- DELETE by id - delete item

For POST /api/orders:
- Use database transactions
- Validate stock before creating order
- Decrease stock when order is placed
- Rollback on any error

Requirements:
- Default port: 3333 (for local development)
- Use parameterized queries (security)
- Return JSON only
- Proper HTTP status codes (200, 201, 404, 500)
- Enable CORS for all origins
- Include error handling
- Export app for Vercel deployment (serverless function)
- Start server only when not in production (NODE_ENV !== 'production')
- .env include DB_SSL

Generate complete code for each file in the exact structure above.

Also provide:
1. npm install command
2. .env file template with database variables
3. Testing commands using curl

Step 3: Copy the Generated Code#

ChatGPT will generate all the code files. Create each file in your project and copy the code:

ecommerce-api/
├── db.js
├── index.js
├── schema.sql
├── seed.sql
├── .env
├── package.json
└── routes/
    ├── customers.js
    ├── products.js
    └── orders.js

Step 4: Install Dependencies#

npm install express mysql2 cors dotenv

4. Part 2: Set Up Free Database (TiDB)#

Step 1: Create TiDB Serverless Cluster#

1. Go to tidbcloud.com ↗ and sign up
2. Click Create Cluster → TiDB Serverless
3. Choose a region near you
4. Wait for cluster to create (1-2 minutes)

Step 2: Create Database#

1. In TiDB Cloud, click SQL Editor or Chat to TiDB
2. Run: CREATE DATABASE ecommerce;

Step 3: Get Connection Details#

1. Click Connect on your cluster
2. Choose General connection
3. Create a password
4. Copy the connection string

Update your .env file with TiDB credentials:

DB_HOST=your-tidb-host.gateway.prod.aws.tidbcloud.com
DB_PORT=4000
DB_USERNAME=xxx.root
DB_PASSWORD=your-password
DB_DATABASE=ecommerce
DB_SSL=true

Step 4: Run Schema and Seed#

1. In TiDB Cloud SQL Editor, paste the contents of schema.sql
2. Click Run
3. Then paste and run seed.sql

5. Part 3: Test Your API Locally#

Start the Server#

node --watch index.js

You should see: Server running on port 3333

Test with curl (or Postman)#

# Get all customers
curl http://localhost:3333/api/customers

# Create a customer
curl -X POST http://localhost:3333/api/customers \
  -H "Content-Type: application/json" \
  -d '{"name":"John Doe","email":"john@example.com"}'

# Get all products
curl http://localhost:3333/api/products

# Create an order
curl -X POST http://localhost:3333/api/orders \
  -H "Content-Type: application/json" \
  -d '{"customer_id":1,"items":[{"product_id":1,"quantity":2}]}'

Generate Postman Collection (Optional)#

For easier testing, ask ChatGPT to generate a Postman collection:

Generate a Postman collection JSON file for my e-commerce API.

Base URL: http://localhost:3333

Create a complete Postman collection export JSON that I can import.

1. Copy the generated JSON
2. Save as ecommerce-api.postman_collection.json
3. Open Postman → Import → Upload the file
4. You’ll have all API requests ready to test with one click

6. Part 4: Deploy API to Vercel#

Create .gitignore#

node_modules
.env

Push to GitHub using VS Code#

Initialize git and push to GitHub using VS Code:

1. Open your project in VS Code
2. Click the Source Control icon (or press Ctrl+Shift+G)
3. Click Initialize Repository
4. Click the + icon next to “Changes” to stage all changes
5. Enter a commit message: Initial commit - E-commerce API
6. Click Commit
7. Click the Publish Branch button
8. Follow the prompts to create a new GitHub repository (make it Public)

Your code is now on GitHub at: https://github.com/YOUR_USERNAME/ecommerce-api

Deploy on Vercel#

1. Go to vercel.com ↗
2. Click Add New → Project
3. Import your GitHub repository
4. Click Environment Variables
5. Add all variables from your .env file:
   • DB_HOST
   • DB_PORT
   • DB_USERNAME
   • DB_PASSWORD
   • DB_DATABASE
   • DB_SSL
6. Click Deploy

Your API is now live at: https://your-project.vercel.app

Test it: https://your-project.vercel.app/api/customers

7. Part 5: Generate API Reference#

Before generating the frontend, we need a complete API specification. Let AI generate it from your code!

The API Reference Prompt#

Open ChatGPT and paste this prompt along with your route files:

Generate a complete API reference documentation for my e-commerce API.

Here are my route files:

=== File: index.js ===
[PASTE CONTENTS of index.js]

=== File: routes/customers.js ===
[PASTE CONTENTS of routes/customers.js]

=== File: routes/products.js ===
[PASTE CONTENTS of routes/products.js]

=== File: routes/orders.js ===
[PASTE CONTENTS of routes/orders.js]

Generate documentation in **markdown format** with:
- Base URL: [Vercel Based URL, for example: https://your-project.vercel.app]
- Each endpoint grouped by resource (CUSTOMERS, PRODUCTS, ORDERS)
- For each endpoint include:
  - HTTP method and path (e.g., GET /api/customers)
  - Description
  - Request body (if POST/PUT)
  - Response format with actual example data
  - HTTP status codes

Make it easy to copy-paste for frontend development.

Save Your API Reference#

ChatGPT will output a clean API reference. Save this - you’ll need it for the frontend prompt.

It should look something like this (your actual endpoints may vary):

Base URL: https://your-project.vercel.app

=== CUSTOMERS ===
GET /api/customers
Description: Get all customers
Response: [{"id":1,"name":"Karn Yong","email":"karn@example.com","created_at":"..."}]
...

8. Part 6: Generate Frontend with AI#

Now that your API is deployed, let’s generate a Next.js frontend.

The AI Prompt for Frontend#

Open a new ChatGPT conversation and use this prompt:

Create a Next.js 15 frontend for an e-commerce system using App Router.

Use these API endpoints:
[PASTE CONTENTS of API Reference]

Requirements:
- Use Tailwind CSS for styling (shadcn/ui components preferred)
- Create pages: Customers, Products, Orders, Create Order
- Display data in tables
- Simple forms to add data
- Show loading states and error messages
- Use fetch for API calls
- Keep it simple and clean

File structure:
- app/page.js - home/dashboard
- app/customers/page.js
- app/products/page.js
- app/orders/page.js
- app/layout.js - with navigation
- components/ - reusable components
- lib/api.js - API functions

Provide complete code for all files.

Create the Frontend Project#

npx create-next-app@15 ecommerce-frontend --tailwind --app

When prompted, choose No for TypeScript.

cd ecommerce-frontend
npm install

Copy the generated code from ChatGPT into your project.

Update API URL#

Make sure to replace https://your-project.vercel.app with your actual deployed API URL in lib/api.js.

Test Frontend Locally#

Before deploying, test your frontend locally:

npm run dev

1. Open http://localhost:3000 ↗ in your browser
2. Test all pages: Customers, Products, Orders
3. Try creating new data
4. Verify API calls work correctly

If everything works, you’re ready to deploy!

Press Ctrl+C to stop the dev server when done testing.

9. Part 7: Deploy Frontend to Vercel#

Push Frontend to GitHub using VS Code#

1. Create a new repository on GitHub (make it Public)
2. Open ecommerce-frontend in VS Code
3. Click the Source Control icon (or press Ctrl+Shift+G)
4. Click Initialize Repository
5. Stage all changes (click the + icon)
6. Enter commit message: Initial commit - E-commerce frontend
7. Click Commit
8. Click Publish Branch
9. Follow the prompts to publish to GitHub

Deploy on Vercel#

1. Go to Vercel → Add New → Project
2. Import ecommerce-frontend repository
3. Click Deploy (no environment variables needed)

Your frontend is now live at: https://your-frontend-project.vercel.app

10. Summary#

What you’ve built for $0:

Next Steps:

• Add authentication with JWT
• Implement pagination
• Add search and filtering
• Set up custom domain
• Add payment processing

Tips for Better AI Prompts:

1. Be specific about your tech stack
2. Include sample request/response formats
3. Mention security requirements
4. Ask for error handling
5. Request the complete file structure

The key to building with AI is providing clear specifications. The more detailed your prompt, the better the generated code.

Happy building!