Mobile Part of the Implementation Milestone Report - bounswe/bounswe2025group8 GitHub Wiki
Mobile Implementation
Deadline: May 13, 2025 @ 23:59
Team Process and Organization
- Collaboration: Four mobile developers used GitHub issues and pull requests in the bounswe2025group8 repository, working in short micro-sprints with daily stand-ups via Slack.
- Workflow: All code reviews happened through PRs on
mobile/development
until the deliverable was ready and merged intomain
Design Decisions & Standards
- Framework & Language: React Native with Expo and TypeScript.(Issue #97: Determine Mobile Tech Stack)
- Navigation: Expo Router’s file-based routing; consistent header/back-button across screens.(Issue #168: Update Mobile Tech Stack Documentation)
- Networking: A centralized HTTP client for API calls with automatic token injection and error handling.
- Styling: Shared theming hooks for colors and typography.(Issue #108: Design UI/UX for mobile application)
- State Management: React hooks for runtime state; AsyncStorage for persisting user sessions.
Code Highlights
- Design and Implementation of Pages: Application pages created with hardcoded values.(Issues #178-#182: Implement Mobile Application Pages)
- Auth Flow: Login and profile screens integrate with backend auth endpoints.(Issue #199: Connect Mobile App to Backend API Environment)
- Request Management: Dynamic fetch and filter of requests from the API.(Issue #199: Connect Mobile App to Backend API)
- Category Navigation: Category and search screens pull live data rather than using hardcoded values.
- Shared Utilities: Reusable hooks and validators reside in a shared utilities folder.
Major Challenge: Backend Connectivity
Our primary hurdle was connecting the Expo client to the Docker-hosted Django backend in the development stage:
- Symptoms: “Network Error” in Expo Go; unresolved hostnames on Android emulators, unresolved
localhost
in IOS. - Solution: Pointing mobile app directly to the host devices IP address.
- Docker Compose: Ensured backend services resolve by service name so containers can communicate directly.
- Outcome: Stable, consistent API connectivity across all development environments.
Additional Challenges
- Android HTTP Restriction in APK: Since Android disallows plain HTTP connections in production builds by default, we encountered a “Network Error” when accessing the backend from the APK. We resolved this by generating a prebuild and modifying the AndroidManifest to allow cleartext traffic specifically for our backend URL.
- Dependency Installation: Resolved peer-dependency conflicts by locking package versions and using
--legacy-peer-deps
. - TypeScript Setup: Aligned VS Code to workspace TS version and restarted language services.
- Navigation Consistency: Standardized default exports and header components to avoid crashes.
Deployment
- To generate a production APK, we used the Expo build service EAS. (Issue #198: Deploy Mobile App to Production)
- APK File: Download APK
- Demo Video: Watch Demo