JunoJR Learning
← All courses
🏡 Builder · 6 missions · First edition

Family App Studio: Web to iPhone

Build an activity-choice helper, explain its rules, save a favorite, and translate the core interaction into an adult-prepared Expo iOS app.

Browser · iOS with adult-prepared Expo tooling · Android extension with Expo · Ages 9-10, 11-13, 14-16

Open the first mission →Download starter project ↓

A parent or guardian unlocks the missions. Starter projects use fictional data and require no paid AI key.

Course readiness: Authored draft for educator review and pilot teaching. Starter files are original, self-contained classroom adaptations; classroom timing and age fit have not been learner-tested.

Your project

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.

Before you begin

  • Can edit and save a text file with adult support.
  • Can open a local HTML file or a school-hosted copy in a browser.
  • No previous AI account, backend service, or paid API is required.

Materials

  • Computer with a browser and text editor.
  • Download /lab-starters/family-apps/index.html.
  • Lesson 5 uses the included mobile/ Expo project. An adult installs its pinned dependencies with npm ci and prepares Xcode/iOS Simulator on a Mac or a school-approved iPhone runtime. The included README.txt gives exact commands. Browser-only learners can complete a translation rehearsal while the facilitator demonstrates iOS.

Your tools

Browser and text editor
Build, inspect, and revise one small app.
An adult downloads /lab-starters/family-apps/index.html, saves a working copy named index.html, and opens it in a browser. Reopen or reload after saving edits. If local-file storage is blocked, use an adult-hosted local server; the app itself needs no network.
JR Playground or adult-operated approved assistant
Ask for explanations or compare a suggested revision with observable behavior.
Use only fictional lesson inputs. An adult operates the approved assistant. Every required build has supplied code and works without an AI service.
Adult-prepared Expo workspace
Run the same activity decision as a native iOS interaction in lesson 5.
Use the included mobile/ directory and README.txt. The adult runs npm ci inside mobile/, then npm run ios on a Mac with Xcode/iOS Simulator. npm run web provides an Expo browser preview; npm run android requires an Android SDK/emulator or USB device. Native tooling is separate from index.html; account-free simulator operation is sufficient and store distribution is outside this lab.

Your mission sequence

  1. MISSION 1 · 75 MINUTES

    A small problem deserves a small app

    Turn “What can we do together?” into a screen with a clear input and an observable result.

    Architect skill: Define the user and the smallest useful interaction.

  2. MISSION 2 · 75 MINUTES

    Teach the app clear matching rules

    Show only activities that fit the time and weather, then put shorter activities first.

    Architect skill: Turn human rules into filters and ordering.

  3. MISSION 3 · 75 MINUTES

    Explain each recommendation

    Make every suggested activity explain why it fits, and improve one confusing message.

    Architect skill: Make rules visible so people can challenge the result.

  4. MISSION 4 · 75 MINUTES

    Remember a favorite responsibly

    Keep one favorite after reload and make it easy to clear on a shared device.

    Architect skill: Separate interface state, saved state, and failure states.

  5. MISSION 5 · 75 MINUTES

    Translate the interaction to iPhone

    Run a small React Native screen with the same activity rule in an adult-prepared Expo workspace.

    Architect skill: Reuse the decision model while adapting controls and platform behavior.

  6. MISSION 6 · 75 MINUTES

    Ship a tested family demo

    Demonstrate a useful app and prove one improvement with evidence.

    Architect skill: Treat a release as a set of checked promises.

Learn online

Six 75-minute sessions: 10 minutes predict/design, 40 minutes build, 15 minutes test with evidence, 10 minutes explain and save. One numbered lesson per session.

Plan around 75 minutes per session; pause and revisit at your own pace.

Adult support: Prepare files and tools, operate any AI service, support reading and debugging, and require the learner to explain and test each adopted change.

Build at camp

Five days with 180 planned minutes per day, including project work and group activities. The course outline does not reserve a camp place.

  1. Day 1: Day 1 — Discover and build

    • Run lesson 1, interview a partner using the fictional scenario, and sketch a clearer screen.
    • Use the remaining lab time for pair programming, movement breaks, and saving a checkpoint.

  2. Day 2: Day 2 — Make rules visible

    • Complete lessons 2 and 3 in two 75-minute blocks.
    • Use 30 minutes for a paper prediction game, break, and comparing actual results.

  3. Day 3: Day 3 — Make it useful

    • Complete lesson 4 and swap devices or roles for a usability test.
    • Spend the remaining time on the lesson camp activity, improvement, and a screen-reader or keyboard check.

  4. Day 4: Day 4 — Connect the pieces

    • Complete lesson 5 with facilitator setup ready before the session.
    • Run a challenge station, peer debugging, and capstone preparation.

  5. Day 5: Day 5 — Test and demonstrate

    • Complete lesson 6 and collect rubric evidence.
    • Use the remaining time for rehearsal, a family-facing demo using fictional data, and individual reflection.
Facilitator preparation
  • The three-hour day includes short movement breaks; do not require uninterrupted screen time.
  • Use driver/navigator pairs and rotate every 15 minutes. Keep an individual prediction and explanation from each learner.
  • Bring a known-working teacher copy and preserve a learner checkpoint before replacing functions. The second camp day contains two complete lesson blocks.

Show what you built

Deliver the browser activity helper with a truthful decision explanation and persistent favorite, plus the included mobile/ Expo project adapted and run on iOS. Record native platform execution separately; unavailable native tooling leaves that requirement explicitly pending.

Useful decision
Rain/20, sun/20, rain/5, and exact-duration cases match the documented rule.
Understandable interface
A partner completes a request and explains a card reason without coaching.
Reliable browser memory
Save/reload, clear/reload, and removed-record checks are recorded.
Native translation
App.js runs on an adult-prepared iOS simulator/device and matches the three stated input cases; platform and temporary-favorite limitation are recorded.
Architect explanation
Learner explains data, rule, UI, storage, and one evidence-backed revision.

Portfolio badge: Family App Architect

Use the rubric with a guardian or mentor and record your evidence in your builder notebook.

Build with care

  • Use fictional people, tasks, places, and records. Do not import family repositories, private photos, health information, or real junior-player records.
  • Store only classroom sample data. Demonstrate the clear-data control before using a shared computer.
  • Any assistant is adult-operated through JR Playground or an approved classroom setup; keep provider credentials out of browser files.
  • The source app includes food suggestions, but this adaptation makes activity choices. No lesson evaluates allergies, nutrition, or medical suitability.

Inspired by our projects

Food Decider
Preference quiz, rule-based matching, favorites, and persistent lists in an Expo web/iOS/Android codebase. This course uses non-food activity data and original classroom code.