Make It RealArrows or space to advance · F for fullscreen · ⌘P to save as PDFSessions

The First Build · Session 02 · Dates TBD

Make It Real

Interfaces, APIs, databases, security, and deployment

Ship AIPhoenix, ArizonaPress → to begin

Ship AIMake It Real01/20

The interface is the visible edge of a much larger system.

Tonight one record crosses every seam. You will see each crossing, break one, and know where to look.

Ship AIMake It Real02/20

Tonight

  1. 01Follow one request from browser to server and back
  2. 02Read methods, status codes, and JSON in the network panel
  3. 03Design the smallest useful data model
  4. 04Create, read, update, and delete one record
  5. 05Add loading, empty, success, and error states
  6. 06Secure the browser, API, database, and webhook seams
  7. 07Push, deploy, read the logs, and fix production
Ship AIMake It Real03/20

Where we are

  1. Session 01From Idea to Build Plan
  2. Session 02Make It Real
  3. Session 03Direct the Agent
  4. Session 04The First Build Hackathon

Session one made the build recoverable. Tonight connects the system; session three will teach the agent to verify it end to end.

Ship AIMake It Real04/20

Act one

Follow the record

APIs stop being abstract the moment you watch a real button create a real request and a real row.

Ship AIMake It Real05/20

One submission, end to end

  1. FormThe browser collects a name and an idea.
  2. RequestPOST /api/ideas carries JSON across the boundary.
  3. ServerThe API validates, authorizes, and decides what may happen.
  4. DatabaseA row is stored with an ID and timestamps.
  5. ResponseA status code and JSON return to the browser.
  6. ScreenThe interface renders success or a useful failure.

When the screen is wrong, name the last step that was right. That cuts the search area immediately.

Ship AIMake It Real06/20

Every boundary has a job

BrowserServer
DisplayRender and collect inputReturn data, not markup assumptions
ValidationFast feedbackAuthoritative check
SecretsNonePrivate keys stay here
DatabaseNo privileged connectionApply access rules
TrustConvenient, never trustedVerify every claim

Client validation improves the experience. Server validation protects the system. You need both, for different reasons.

Ship AIMake It Real07/20

Live build: read the request

~/your-product

POST /api/ideas { "title": "Repair notes" }

request: application/jsonresponse: 201 Createdbody: { id, title, createdAt }network panel: 184 ms

Submit the form with the network panel open. Say the method, URL, payload, status, and response out loud. Then send invalid input and read the failure with the same five questions.

Request in, response out. The status code says what happened; the body carries the useful detail.

Ship AIMake It Real08/20

Act two

Make the data model match the product

Start with the nouns the product truly needs, not a schema generated for every feature the idea may someday have.

Ship AIMake It Real09/20

The smallest useful schema

FieldWhy it exists
idStable identityUpdate the right record
owner_idWho may access itEnforce ownership
titleThe user's inputRequired and length-bounded
statusThe workflow stateConstrained values
created_atWhen it enteredOrder and audit

A field without a product decision behind it is future confusion. Add relationships only when the user journey needs them.

Ship AIMake It Real10/20

CRUD is the whole record lifecycle

one record
  1. 01Create it from the form
  2. 02Read it into the interface
  3. 03Update the status
  4. 04Delete it with confirmation

The acronym matters less than the path. Each operation is a request with permissions, validation, and a visible result.

Ship AIMake It Real11/20

A finished path includes the unhappy states

Only the happy path

  • The button appears to do nothing
  • An empty list looks broken
  • A duplicate creates a mystery
  • A slow request invites a second click
  • An error disappears into the console

A product path

  • Loading disables duplicate work
  • Empty state explains the first action
  • Success confirms what changed
  • Validation names the repair
  • Failure preserves the user's input

Error states are not polish. They are part of the contract between the interface and the system.

Ship AIMake It Real12/20

Exercise: trace all four operations

~/your-product

create → inspect row → update → delete

201: row created for current owner200: status updated403: another owner's record blocked204: deletion confirmed

Run the record through its full lifecycle. After each action, inspect both the interface and the stored row. Add one unauthorized attempt and confirm the server rejects it.

The browser can look correct while the row is wrong. Verify both surfaces before calling the operation done.

Ship AIMake It Real13/20

Act three

Secure the seams, then deploy

Security lives at the crossings: browser to server, server to database, provider to webhook, repository to production.

Ship AIMake It Real14/20

A short pre-ship threat walk

  1. InputValidate shape, length, type, and allowed values on the server.
  2. IdentityKnow who is making the request; reject an absent or invalid session.
  3. AuthorizationCheck that this identity may touch this exact record.
  4. SecretsKeep authority-bearing keys out of client bundles and Git history.
  5. WebhooksVerify the sender's signature before acting on the payload.
  6. LogsRecord enough to diagnose, never raw credentials or sensitive payloads.

Never trust the client. A disabled button is an interface choice, not an access-control rule.

Ship AIMake It Real15/20

Push to production is a feedback loop

every push
  1. 01Commit a reviewable change
  2. 02Automated checks run
  3. 03The host builds and deploys
  4. 04Logs and the live path report back

Continuous delivery is useful because every push follows the same path. A production-only failure becomes evidence for the next small change.

Ship AIMake It Real16/20

Live build: fix the first production-only error

~/your-product

git push → checks → deploy → inspect logs

build passedenvironment variables loaded server-sidefirst deploy: 500 on POST /api/ideasmissing production table fixed — live path passed

Deploy the vertical slice, perform the journey on the live URL, and read the failing request beside the server log. Fix the cause, push again, and repeat the same journey.

A green deployment only proves the bundle built. The session ends when the live product writes and reads the real record.

Ship AIMake It Real17/20

The system you leave tonight

ArtifactProof
Data flowForm → API → database → screenYou traced each crossing
SchemaSmall model with ownershipCRUD works on the live data
SecurityValidation, access rules, secretsUnauthorized request failed
DeploymentRepeatable push-to-live pathProduction journey passed

Save the diagram, schema notes, checklist, and deploy evidence in 02-full-stack/. Session three will turn this path into a verification target.

Ship AIMake It Real18/20

Name the last step that worked.

Ship AIMake It Real19/20

Next

Direct the Agent — Session 03, Workuity Biltmore

Next session gives the repository durable context, turns acceptance criteria into checks, and has the agent plan, test, debug, and verify a complete feature.

shipai.club · Free, always

Session page
Ship AIMake It Real20/20
01/20