Family App Studio: Web to iPhone

What you will make

An activity helper for an imaginary family

• Turn a family request into fields and explicit selection rules.
• Build and test a browser app with empty states and a saved favorite.
• Translate HTML events and controls into React Native components.
• Explain what was actually tested on browser, iOS, or Android.

Settle in together

Laptop or desktop for editing; phones can read and try the browser interaction. This is a browser rehearsal. Native iOS or Android work needs separate adult-prepared tools and actual device testing.

Allow about 5 minutes to get ready. Six missions in order. Try one or two 5–12 minute activities, take a break, and resume at the next activity. Plan several short sittings per mission; the full 75–90 minute lesson remains the detailed reference. End each sitting with a saved copy and one sentence: next time we will… Times are estimates awaiting family pilots.

• For ages 9–12, work beside a parent on a computer with a keyboard. A phone can read the guide and watch; use a computer for editing. Older learners may try the full lesson's stretch task after the core checks.
• Open the first mission's browser workspace and press Run before installing anything. No payment, child account, or AI key is needed for that introduction. If the runtime reports unavailable, keep your files, read its error, and use the course-specific fallback below with adult help.
• The initial browser starter lists all three activities regardless of weather/time. Mission 1 adds origami; mission 2 adds matching; mission 3 adds reasons; mission 4 adds browser-local memory. A Save favorite button initially means temporary memory only.
• Parent-guided same-version local handoff: keep the current workspace tab open and record one exact edited line/value from File index.html (such as your chosen heading or installed matchingActivities). Use Export backup, then the trusted parent-page Download index.html. Keep both downloads; JSON is a backup, not an executable app. Download /lab-starters/family-apps.zip, extract a fresh family-apps folder, and replace only its root index.html with the downloaded current source. Confirm its actual name is index.html, not index.html.txt, and open it as plain text to find the recorded edited line before claiming local evidence. No packages are needed. Open the replaced file in a separate LOCAL app tab and verify the known source edit and its expected behavior. Record/recreate fictional weather, minutes and chosen favorite locally: workspace appStorage does not automatically populate this tab's local app memory. Open DevTools Console for the LOCAL app tab, not the guardian page or opaque preview. If file-origin storage is blocked, a parent runs python3 -m http.server 8080 --bind 127.0.0.1 from that extracted folder and opens http://127.0.0.1:8080/index.html; re-enter the fixture because this is another origin. Keep the workspace/JSON backup if checks fail and mark them pending or failed. A pristine download is baseline evidence only; repeat transfer/verification after code edits. The optional mobile folder is a separate Expo project with its own README/tooling and this-visit memory.
• Full lesson replacements target named functions in index.html's script. Replace each whole function once, preserve render/event handlers and restore standard records before shared checks. The optional mobile folder is a separate Expo project: parent follows mobile/README.txt, npm install, npm run web and prepared npm run ios/android. Its favorite is this-visit React state, not browser localStorage.
• Keep the original starter unchanged as a reference. Export a working copy before a risky edit or reset. Work and the optional progress checklist stay on this device; an export is your portable backup. A checked box records your own report, not a verified assessment.
• Use invented names, notes and records. The parent handles accounts, optional AI and sharing. Predict together, let the child make one choice, change one thing, test it, then explain what happened. An assistant is optional; the supplied code and a partner work too.