25CSCI38H · Course workspace
MobileDevelopment
Learn, build, experiment, and ship mobile applications through hands-on labs, coursework, a capstone project, tools, and practical development guides.
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.
- labs/Labs — Step-by-step practical sessions02
- coursework/Coursework — Graded assignments & deadlines02
- project/Course Project — The capstone app you ship01
- commands/Command Handbook — Searchable, copyable commands53
- tools/Development Tools — Everything you install & why08
- setup/Setup & Installation — From zero to a working machine07
- troubleshooting/Troubleshooting — Errors, causes and fixes22
- resources/Resources — Docs, tutorials & cheat sheets17
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.
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
You'll build
A series of small lab apps that grow into one polished course project you can put in your portfolio.
You'll use
React Native + Expo, Expo Go, VS Code, Node.js/npm, Git & GitHub, NativeWind and the Android emulator. See the toolkit →
Assessment
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
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
Development Environment
Editor, SDK, emulator and Git — a setup you can trust for the rest of the term.
editorsdk-emulatorgit-github
Mobile UI
Components, layout with Flexbox, styling, images and touch interactions.
componentsflexboxstylinglists
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
Debugging & Testing
Reading errors, using dev tools, logging and writing your first tests.
dev-toolslogsunit-tests
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
Labs
Learn by building.
Guided, hands-on sessions. Each lab has objectives, steps, testing, troubleshooting and a submission checklist.
All labsCoursework
Assessed work,
clearly explained.
Objectives, tasks, deliverables, grading and deadlines — one readable page per assignment.
View courseworkPhase 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.
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.
Design, build and ship one complete mobile app.
In teams of up to 4, 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
Command handbook
Stop Googling
the same commands.
53 commands across Git, terminal, packages, Android, builds and debugging — searchable and one-click copyable.
Open handbookadb devicesList connected Android devices. Show emulators and USB devices visible to the Android Debug Bridge.
adb logcat *:EShow Android error logs. Stream device logs, filtered to errors only.
emulator -list-avdsList virtual devices. Print the names of every Android Virtual Device you created.
cd <folder>Change directory. Move into another folder. Use `..` to go up one level.
code .Open folder in editor. Open the current folder in VS Code.
code --install-extension <extension-id>Install a VS Code extension. Install an editor extension from the terminal.
lsList files. Show the files and folders in the current directory.
mkdir <folder-name>Create a folder. Make a new directory.
npx expo start --clearClear bundler cache. Fix stale or strange bundling errors by resetting the cache.
npx kill-port 8081Free a busy port. Stop whatever process is holding the Metro bundler port.
npx create-expo-app@latest <app-name>Create a new app. Scaffold a new mobile project from the official template.
npx expo-doctorDiagnose project problems. Check the project for version mismatches and common configuration issues.
npx expo install <package>Install a compatible package. Install a library at the version that matches your SDK.
npx expo install --fixFix package versions. Update installed packages to the versions your Expo SDK expects. Run it after expo-doctor reports a mismatch.
npx expo startStart the dev server. Start Metro and show a QR code to open the app on a device.
curl -i <api-url>Test an API endpoint. Send a GET request and print the status, headers and body.
ipconfigFind your local IP address. Show your computer's network addresses — needed when a phone must reach a local server.
Development toolkit
The tools of the trade.
What each tool is, why we use it, how to install it, and what to do when it breaks.
EditorVS CodeThe code editor for every lab. It includes a built-in terminal, Git support and React Native extensions.Windows · macOS · Linux
FrameworkReact NativeThe framework we build every app with. One JavaScript/TypeScript codebase renders real native UI on Android and iOS.Windows · macOS · Linux
FrameworkExpoThe toolkit on top of React Native. It creates projects, runs the dev server and handles the native setup for you.Windows · macOS · LinuxDevicesExpo GoA free phone app that runs your project instantly. Scan a QR code and the app opens on your phone, with no build step.Windows · macOS · Linux
RuntimeNode.js, npm & npxNode.js runs the JavaScript tooling. npm installs packages. npx runs a package's command without installing it.Windows · macOS · Linux
Version ControlGit & GitHubGit records every change to your code. GitHub hosts the shared team repository online.Windows · macOS · Linux
StylingNativeWindTailwind CSS for React Native. Style components with short class names instead of long style objects.Windows · macOS · Linux
DevicesAndroid Studio & EmulatorProvides the Android SDK and a virtual Android phone (emulator) that runs on your laptop.Windows · macOS · LinuxSetup & installation
From “I just started”
to “my machine is ready.”
7 guided steps for Windows, macOS and Linux — each with verification commands and fixes for common errors.
Resources
Curated, not collected.
Official docs, tutorials and references chosen for this course.
All resourcesExtra learning
Not required for grades. For students who want to go further.