25CSCI38H · Course workspace

MobileDevelopment

Learn, build, experiment, and ship mobile applications through hands-on labs, coursework, a capstone project, tools, and practical development guides.

Start Learning Explore Labs

TaskRow.tsx

export function TaskRow({ title }) {
  return (
    <Pressable style={s.row}>
      <Text>{title}</Text>
    </Pressable>
  );
}

zsh — lab-01

$ npx expo start

Starting Metro Bundler…

› Android Bundled 842ms

› Reloading apps

main ← feature

GET/api/tasks200

buildpassing

60fps
UI thread

MON · WEEK 05

Daily Focus

3 / 5

tasks done today

Set up emulator
Build first screen
Add navigation
Fetch tasks from API API
Push to GitHub

scroll

Where is everything?

Your Mobile Development workspace.

Every lab, deadline, command, installer and fix for this course lives here. Bookmark this page — it's the only one you need.

~/mobile-development8 dirs

Course overview

Build real apps.
Understand every layer.

A practical, build-first course on designing and shipping mobile applications — from your first running screen to a complete, tested app on a real device.

Labs: 02
Coursework: 02
Course project: 01
Tools: 08
Commands: 53

01 — You'll learn

How mobile apps are structured, rendered and run
Building responsive interfaces from reusable components
State, navigation and application logic
Consuming REST APIs and persisting data on-device
Debugging, testing and preparing an app for release

02 — You'll build

A series of small lab apps that grow into one polished course project you can put in your portfolio.

03 — You'll use

React Native + Expo, Expo Go, VS Code, Node.js/npm, Git & GitHub, NativeWind and the Android emulator. See the toolkit →

04 — Assessment

Coursework breakdown →

05 — Teaching team

Dr. Amira AbdelazizModule leaderamira.abdelaziz@bue.edu.eg
Ramy AbousaifTAramy.abousaif@bue.edu.eg
Ali MotaweaTAali.motawea@bue.edu.eg
Youssef MahmoudTAyoussef.elbashary@bue.edu.eg

06 — By the end

Plan, build, debug and present a working mobile application — and explain the engineering decisions behind it.

Learning roadmap

One course.
One path through it.

Each stage builds on the last. Labs, coursework and resources are attached to the stage where you need them.

Getting Started
Teaching team, coursework, why React Native + Expo, your first app and the team Git workflow.
react-native-vs-native-vs-flutterexpoui-basicsgit-branches
LAB 01Kick-off — Tools, Git & Your First Expo App Teaching team →Coursework →
Development Environment
Editor, SDK, emulator and Git — a setup you can trust for the rest of the term.
editorsdk-emulatorgit-github
Setup center →Tools →
Mobile UI
Components, layout with Flexbox, styling, images and touch interactions.
componentsflexboxstylinglists
LAB 02React & React Native: Syntax, Hooks & Your First Multi-Page App
Application Logic
State, events, forms and organising code so it stays readable as the app grows.
statehooksforms-validation
Navigation
Stacks, tabs, parameters and deep links between screens.
stacktabsparamsdeep-links
Data & APIs
Fetching from REST APIs, loading and error states, and storing data on the device.
fetch-asyncrestlocal-storage
Networking commands →
Debugging & Testing
Reading errors, using dev tools, logging and writing your first tests.
dev-toolslogsunit-tests
Troubleshooting →
Advanced Concepts
Device APIs, performance, animations and preparing a build for release.
device-apisperformancebuilds
Course Project
Plan, build and present a complete mobile application.
planningbuildpresentation
Project brief →

Labs

Learn by building.

Guided, hands-on sessions. Each lab has objectives, steps, testing, troubleshooting and a submission checklist.

All labs

LAB01Kick-off — Tools, Git & Your First Expo AppMeet the course and the tools, build a tiny React Native app, then put it on GitHub: create a repo, push, make one branch, merge it on GitHub and pull it back.Beginner1.5 hours LAB02React & React Native: Syntax, Hooks & Your First Multi-Page AppLearn React and React Native through 17 interactive exercises, study a complete Expo Router app, then build and publish your own four-screen Movies watchlist.Beginner3 hours

Coursework

Assessed work,
clearly explained.

Objectives, tasks, deliverables, grading and deadlines — one readable page per assignment.

View coursework

CW01 Due Week 6

Phase 1 — Analysis, Architecture & Prototype

Analyse your app idea, design it (use case + activity diagrams, architecture, data plan) and implement the first 9 UI screens — 3 per team member.

6 tasks · 2 deliverables

CW02 Due Week 12

Phase 2 — Final Implementation, Testing & AI Log

Finish the app, including architecture, persistent storage, a Google API, a device feature, validation and error handling. Add 3 unit tests and a complete AI engineering log.

7 tasks · 3 deliverables

CapstoneDue Week 12

Design, build and ship one complete mobile app.

In teams of up to 3, you build a mobile app from your own new idea: analysis, design, implementation, testing and a live demo. It is worth 60% of the module.

M1Team + ideaWeek 2
M2Phase 1Week 6
M3BuildWeeks 7–11
M4Phase 2Week 12
M5DemoFinal week

Open the project brief 5 required features · 5 deliverables

Command handbook

Stop Googling
the same commands.

53 commands across Git, terminal, packages, Android, builds and debugging — searchable and one-click copyable.

Open handbook

cd <folder>

Change directory. Move into another folder. Use `..` to go up one level.

ls

List files. Show the files and folders in the current directory.

pwd

Print working directory. Show the full path of the folder you are currently in.

mkdir <folder-name>

Create a folder. Make a new directory.

code .

Open folder in editor. Open the current folder in VS Code.

→ all Terminal commands

git clone <repository-url>

Clone a repository. Download a copy of a remote repository, including its full history.

git status

Check repository status. See which files changed, which are staged and which branch you are on.

git init

Start a repository. Turn the current folder into a Git repository. Only needed if `git status` says "not a git repository".

git config --global user.name "<Your Name>"

Set your Git identity. Tell Git who you are. Every commit is labelled with this name and email.

git add <file>

Stage changes. Choose which changes go into the next commit.

→ all Git commands

gh repo create <name> --public --source=. --push

Create a GitHub repo from a folder. Using the GitHub CLI, create a remote repository and push your current project in one step.

gh auth login

Sign in to GitHub CLI. Authenticate the GitHub CLI with your account through the browser.

gh pr create --fill

Open a Pull Request. Open a Pull Request from your current branch to main. On the website, use the **Compare & pull request** button instead.

→ all GitHub commands

npm install

Install dependencies. Install every package listed in package.json into node_modules.

npm install -D <package-name>

Install a dev dependency. Install a tool the project needs only during development (linters, test tools).

npx <package>

Run a package (npx). npx = Node Package eXecute. It runs a package's command without installing it globally. npm installs, npx runs.

npm run <script>

Run a package script. Run a script defined in the "scripts" section of package.json.

node -v

Check Node.js version. Print the installed Node.js version — the first thing to check when tooling misbehaves.

→ all Package Management commands

npx create-expo-app@latest <app-name>

Create a new app. Scaffold a new mobile project from the official template.

npm run reset-project

Reset the starter project. Clear the demo screens from a new Expo app and leave a blank `app/index.tsx`. Answer `Y` to keep the old files in `app-example/`.

npx expo start

Start the dev server. Start Metro and show a QR code to open the app on a device.

npx expo install <package>

Install a compatible package. Install a library at the version that matches your SDK.

npx expo-doctor

Diagnose project problems. Check the project for version mismatches and common configuration issues.

→ all Mobile Development commands

Development toolkit