Learning React Native - SOFT210 Portfolio by mp3li

This repository documents coursework for SOFT210 Mobile Application Development (Expo React Native).
It is organized as an objective-based portfolio showing progression from responsive mobile UI and navigation basics to state persistence, lifecycle-aware behavior, and a final API-driven mobile application.

What This Portfolio Shows:

• Objective-by-objective mobile development progress
• Expo React Native app architecture using TypeScript
• Multi-screen navigation and route-based screen flow
• Data management with React state and AsyncStorage
• API integration with real public web services
• Final project delivery with documentation and testing workflow

---

Table of Contents:

Open Table of Contents

• Portfolio Summary
• How to Run Projects
• Objective Portfolio (All Objectives)
  • Objective 1 - Responsive UI and Accessibility
  • Objective 2 - React Router in Typescript
  • Objective 3 - Lifecycle-Aware UI in React Native Part 1
  • Objective 4 - State Persistence and Error Resilience in React Native
  • Objective 5 - SQLite Schema, Migrations, and CRUD
  • Final Project - Mobile Application Development
• Skills Demonstrated Across the Full Course
• Notes

---

Portfolio Summary:

Open Portfolio Summary

• Course: SOFT210 Mobile Application Development
• Repository purpose: Store and present objective-based Expo React Native coursework
• Primary working app (Objectives 1-5): learning-react-native-app/
• Final project app copy: myDefendtheParksApp - Final Project/learning-react-native-app/
• Structure:
  • Objective prompt files in repository root
  • App code folders for implementation
  • Final project folder containing objective prompt + final app + final README
• Final deliverable:
  • A complete multi-screen mobile app using external APIs and persistent saved data

---

How to Run Projects:

Open How to Run Projects

• Objective app (Objectives 1-5):
  • cd "learning-react-native-app"
  • npm install
  • npx expo start
• Final project app:
  • cd "myDefendtheParksApp - Final Project/learning-react-native-app"
  • npm install
  • npx expo start
• Device targets:
  • Expo Go on physical device (QR scan)
  • iOS simulator (i)
  • Android emulator (a)
  • Web (w)
• Optional checks:
  • npm run lint
  • npx tsc --noEmit

---

Objective Portfolio (All Objectives):

Objective 1 - Responsive UI and Accessibility

Open Objective 1 Details

• Objective focus:
  • Build responsive, accessible React Native UI patterns for mobile devices.
• Contains:
  • Objective 1 - Responsive UI and Accessibility.txt
  • learning-react-native-app/ (implementation base)
• Implementation highlights:
  • Reusable themed components
  • Accessible labels and touch targets
  • Layout behavior adapted for small and larger device sizes

Objective 2 - React Router in Typescript

Open Objective 2 Details

• Objective focus:
  • Implement TypeScript-driven route navigation patterns.
• Contains:
  • Objective 2 - React Router in Typescript.txt
  • learning-react-native-app/ route updates
• Implementation highlights:
  • Route-based screen transitions
  • Typed route parameters and navigation flow
  • Multi-screen organization for core app sections

Objective 3 - Lifecycle-Aware UI in React Native Part 1

Open Objective 3 Details

• Objective focus:
  • Use lifecycle-aware behavior to keep screen data current and stable.
• Contains:
  • Objective 3 - Lifecycle-Aware UI in React Native Part 1.txt
  • learning-react-native-app/ lifecycle updates
• Implementation highlights:
  • Focus-aware refresh patterns
  • Improved data load/error experience
  • Better state transitions during navigation

Objective 4 - State Persistence and Error Resilience in React Native

Open Objective 4 Details

• Objective focus:
  • Persist user-facing data and improve resilience under failures.
• Contains:
  • Objective 4 - State Persistence & Error Resilience in React Native.txt
  • learning-react-native-app/ state/persistence updates
• Implementation highlights:
  • Persistent data storage strategy
  • Error handling and fallback messaging
  • UX behavior for load/retry scenarios

Objective 5 - SQLite Schema, Migrations, and CRUD

Open Objective 5 Details

• Objective focus:
  • Practice local data modeling and CRUD operations with migration-aware structure.
• Contains:
  • Objective 5 - SQLite Schema, Migrations, and CRUD .txt
  • learning-react-native-app/ Objective 5 implementation
• Implementation highlights:
  • SQLite-focused schema/migration workflow
  • CRUD-oriented data operations
  • Integration into app navigation and UI behavior

Final Project - Mobile Application Development

Open Final Project Details

• Objective focus:
  • Deliver a complete Expo React Native mobile app demonstrating course outcomes.
• Contains:
  • myDefendtheParksApp - Final Project/Final Project - Mobile Application Development .txt
  • myDefendtheParksApp - Final Project/README.md
  • myDefendtheParksApp - Final Project/learning-react-native-app/
• Implementation highlights:
  • Featured park of the day
  • All-50-state browsing and state-specific park lists
  • Park detail pages with National Park Service + Native Land data
  • Saved parks with persistent AsyncStorage state
  • Consistent app theming and refined mobile layout behavior

---

Skills Demonstrated Across the Full Course:

Open Skills Demonstrated Across the Full Course

• Expo React Native app architecture
• TypeScript component and route typing
• Navigation and multi-screen UI design
• Lifecycle-aware refresh behavior
• Persistent data storage and retrieval
• API integration and response shaping
• Error handling and user feedback patterns
• Iterative mobile UX refinement
• Final-project packaging and documentation

---

Notes:

Open Notes

• Objective prompts are preserved in the repository root for grading/reference.
• The final project is maintained in a dedicated folder to keep coursework and final delivery separated.
• For final-project specifics, see myDefendtheParksApp - Final Project/README.md.

---