WEB107 · Mobile Apps with Cross-Platform Tools
About Course
Build a mobile app for Android and iOS from one JavaScript codebase with React Native and Expo, including navigation, device features, offline data and your own API. You will create a working loyalty app prototype for a small business.
Who it is for
Web developers who know React and want to deliver mobile apps without learning two native languages first.
Prerequisites
Complete WEB104 and WEB105, or be comfortable with React components, state and consuming a REST API.
What you will be able to do
- Compare native, cross-platform and progressive web app approaches and choose one for a given business case.
- Build screens with React Native core components, Flexbox layout and stack and tab navigation.
- Integrate device features such as the camera and notifications while handling permissions respectfully.
- Persist data locally, sync with a REST API and handle offline and error states.
Lessons
- Lesson 1 · Choosing a mobile approach
- Lesson 2 · React Native and Expo essentials
- Lesson 3 · Device features, data and offline behavior
- Lesson 4 · Lab and assignment
Lab: Build a loyalty card app with Expo
You will create an Expo project with tab navigation, a screen that lists rewards from your API, a stamp card stored on the device, and a QR code scanner using the camera. You will test on a real phone with Expo Go and simulate offline mode to check how the app behaves.
Free tools: Node.js LTS, Expo (free) with the Expo Go app on your own phone or an Android emulator from Android Studio; Expo Snack in the browser as an alternative
Assessed assignment
Build a mobile prototype for a small business, such as a loyalty program for a juice bar or an appointment app for a physiotherapy clinic. It must have at least three screens with navigation, load data from a REST API (your WEB105 API or a local mock), store something on the device so it survives restarts, use one device feature with a clear permission explanation, and show sensible loading, empty and offline states. Submit the repository, a two-minute screen recording and a one-page note explaining why a cross-platform app fits this business better than, or not as well as, a progressive web app.
| Criterion | Weight | What excellent work looks like |
|---|---|---|
| Functionality and navigation | 30% | All screens work, navigation is intuitive, and data loads and updates correctly. |
| Mobile UX quality | 25% | Layouts fit small screens, touch targets are large, text is readable and states are handled gracefully. |
| Device features and data | 25% | The device feature and local storage work, permissions are requested in context and denial is handled. |
| Platform decision note | 20% | The note compares options with concrete reasons tied to the business, including cost and maintenance. |
Portfolio piece
A working cross-platform mobile app prototype with a screen recording and a reasoned platform decision note.
Next step
Continue with WEB108 · Testing, Security and Deployment of Web Apps · 8 hours · $56.00
Course Content
WEB107 · Mobile Apps with Cross-Platform Tools (8 h)
-
Lesson 1 · Choosing a mobile approach
-
Lesson 2 · React Native and Expo essentials
-
Lesson 3 · Device features, data and offline behavior
-
Lesson 4 · Lab and assignment
-
WEB107 Assessment · Mobile Apps with Cross-Platform Tools