Tutorial placeholder

From vibe-coded demo to real app: API, database, and deployment.

A dedicated walkthrough for taking an AI-generated project intake app from fake form state to a real deployed system with persistent data.

What this page will teach

The production gap behind most AI-generated apps.

Included

Public project intake form

Included

POST route that validates and saves submissions

Included

Hosted Postgres table for project requests

Included

Simple admin view for reviewing new leads

Included

Deployment with production environment variables

Draft outline

Build the same app twice: first as a demo, then as a real system.

The tutorial will start with a polished but fake intake form, then replace each fragile part with production behavior: validation, a server route, database persistence, deployment configuration, and a working admin view.

Step 1

Start with the fake app

The generated interface looks complete, but the form only updates local state and loses every submission on refresh.

Step 2

Add a real backend boundary

Create one server-side path for submissions so secrets, validation, and database writes never live in the browser.

Step 3

Save to a hosted database

Create a project_requests table with contact details, project type, budget range, timeline, description, status, and timestamps.

Step 4

Deploy the working version

Move database credentials into environment variables, deploy the app, submit the form, and verify the row appears in production.

Database shape

One table is enough for the first real version.

ColumnTypePurpose

iduuidPrimary key for each request.

nametextThe person submitting the form.

emailtextThe reply address for follow-up.

companytextOptional business or team name.

project_typetextWebsite, internal tool, MVP, or automation.

budget_rangetextA coarse planning range, not a quote.

timelinetextHow soon the project needs to move.

descriptiontextThe actual context that makes the lead useful.

statustextNew, reviewed, or archived.

created_attimestampWhen the request was submitted.

Planned file map

A dedicated tutorial page, not a markdown dump.

The final article can embed code sections, diagrams, checkpoints, and deployment notes directly in React components.

app/page.tsx

Public intake form and buyer-facing copy.

app/api/intake/route.ts

Server-side validation and database insert.

app/admin/page.tsx

Private review screen for submitted requests.

lib/database.ts

Lazy server-side database client setup.

.env.local

Local development environment variables.