C384 — AI Vibe Coding for React Native

High-depth non-WSQ courseware for a one-day, 7.5-hour intermediate adult-learning programme. Learners build PocketTasks, a cross-platform Expo React Native app, through an agentic engineering loop:

Frame → Plan → Challenge → Authorise → Inspect → Verify → Checkpoint

Preview

Package depth

• 104-slide facilitator deck adapted directly from the supplied Tertiary courseware standard
• Reference-standard learning rhythm: orientation, topic arcs, and four-slide Build Target → Concept Map → Agentic Build Sequence → Quality Gate lab cycles
• 103-page detailed Learner Guide plus aligned Markdown source
• 24 progressive hands-on labs with approximately 30,000 words of lab guidance
• Detailed facilitator Lesson Plan for a 450-minute course day
• One continuous PocketTasks capstone with a Git checkpoint after every lab
• QA report covering counts, duration, traceability, prohibited language and render checks

Course structure

1. Get Started on React Native
2. Introducing JSX and Rendering Elements
3. Components and Props
4. State and Lifecycle

The published C384 topic order, intermediate level and 7.5-hour duration are preserved while the implementation target is adapted to Expo React Native and agent-assisted software engineering.

Lab design

Every lab includes:

• Build-so-far context and an observable goal
• Concepts and prerequisites
• Baseline proof and acceptance criteria
• A bounded coding-agent prompt
• Plan challenge and scope approval
• Step-by-step implementation and code-reading guidance
• Diff inspection and classification
• Static checks, target testing and deliberate failure diagnosis
• Checklist, independent variation, evidence and reflection
• Recoverable Git checkpoint

Rebuild

The reproducible project-scoped generators are:

python non-wsq-build-courseware.py
TEMPLATE_STARTER=/path/to/template-starter.pptx \
TEMPLATE_EDIT_PLAN=/path/to/template-edit-plan.json \
node non-wsq-build-template-presentation.mjs

The presentation generator edits inherited elements from a mapped template starter and uses the bundled @oai/artifact-tool runtime described by the Codex presentation workflow.

Sources

• Published C384 course page: https://www.tertiarycourses.com.sg/basic-react-js-training.html
• Quality benchmark: https://github.com/tertiarycourses/TGS-2020505042-Build-Full-Stack-React-Web-App-with-Vibe-Coding
• Expo documentation: https://docs.expo.dev/
• React Native documentation: https://reactnative.dev/docs/getting-started

Credits

Developed for Tertiary Infotech Academy Pte Ltd.