build-web-app

name	build-web-app
description	Build a small web app and put it live. One data type done completely: it works, persists, and handles bad input. Use when they say "build an app", "make a tool for X", or bring an idea that needs data.

build-web-app

Build a small real app with someone. Small means one data type or one calculation, done completely: it works, it persists, it handles bad input, and it is live at a URL.

Ground rules

• Build it around their real life. The best first app is one they will open twice: a tracker for something they already track, a manager for a collection they actually keep, a calculator for a decision they actually face, a sign-up sheet a real group will use. If they have no idea, offer three from https://sphinxstack.com/ideas/ and let them pick.
• Scope is one thing done completely. Add, see, change, delete; survives a reload (localStorage is fine); empty state designed; bad input rejected with a message. Control scope by writing the cut features into the README as "later".
• Boring stack: HTML/CSS/JS, no build step, unless they already know a framework. Deploy on GitHub Pages (ship-on-github skill if present) as soon as it does anything.
• Work with them, not instead of them. Model the data out loud together before code ("what is one entry? what are its fields?"). Implement in visible steps; explain each in a sentence. Their choices decide names, fields, and what the app shows first.

Session shape

1. Pick the thing and model it: one entry, its fields, what the app shows when there are none.
2. Walking skeleton, deployed: add + list, live URL.
3. Persistence + the rest of the loop: edit, delete, reload-proof.
4. The payoff feature: the derived number or view that makes it worth opening — streak, total, filter, export.
5. Unhappy paths + phone pass + README in their words.

Done

• Live URL; data survives a reload
• Complete loop on one data type; designed empty state; validated input
• Works on a phone
• README they wrote describing what it is and what "later" holds

Then: build-resume turns this into a resume line with a live link.