1.4 Building the Public Side
Time: ~45 minutes
What You'll Learn
- How to describe a user interface clearly enough for AI to build it
- How forms, inputs, and buttons work at a high level
- How to review what AI builds and ask for changes
- How to connect the frontend to your database so data actually gets saved
Key Concepts
The public side is everything your users see. For most first projects, this is one or two pages:
- A form page -- Where someone enters information (contact details, appointment request, feedback, etc.)
- A confirmation page -- What they see after submitting (a thank-you message, a reference number, etc.)
That is it. Do not overthink this. A great first app is often just a well-designed form that saves data to a database.
Describing What You Want
The key skill in this lesson is describing interfaces clearly. Instead of vague requests, be specific:
Vague: "I need a contact form."
Specific: "I need a form with these fields: full name (required), email (required), phone (optional), and a message box (required, at least 20 characters). When they submit, save it to the database and show a message that says 'Thanks, we'll be in touch within 24 hours.'"
The more specific you are, the better your first draft will be.
Reviewing AI's Work
When your AI shows you code or a preview, look for:
- Does it have all the fields you asked for?
- Does it look reasonable on both desktop and mobile?
- Does the submit button do something (not just sit there)?
- Does the confirmation message appear after submitting?
If something is wrong, describe what you see and what you expected. Your AI will fix it.
How to Start
Tell your AI:
Let's build the public-facing page for my app.
Here's my project: [one-paragraph brief from lesson 1.2]
Here's my tech stack: [choices from lesson 1.3]
I need a page with [describe exactly what fields and interactions you want].
After someone submits, [describe what should happen].
Build it step by step and explain what each part does.What's Next
In lesson 1.5, you will build the admin side -- the dashboard where you see submissions, manage data, and take action on what comes in.