File size: 4,418 Bytes
71638d4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | # City Issue Reporter - Mobile App
A React Native + Expo mobile application for citizens to report city infrastructure issues with AI-powered classification and real-time tracking.
## Features
### Authentication
- **Google OAuth only** via Supabase Auth
- Secure session management with auto-refresh
- No anonymous reporting (prevents spam)
### Anti-Fraud Protection
- **Mandatory GPS**: Camera access blocked until GPS is enabled on device
- **GPS Precision Lock**: Captures blocked until GPS accuracy < 10 meters
- **Live Camera Only**: No gallery access - photos must be captured in real-time
- **Location Verification**: Continuous GPS monitoring during capture session
### Issue Reporting
- Live camera capture with frame guides
- Real-time GPS accuracy indicator
- AI-powered classification visualization
- Status: VisionAgent → GeoAgent → PriorityAgent → RoutingAgent → NotificationAgent
### Issue Tracking
- View all your reported issues
- Filter by status (Reported, In Progress, Resolved)
- Detailed issue view with:
- Original vs AI-annotated image toggle
- Priority and status badges
- Confidence score visualization
- Location details
- Status timeline
### Profile & Gamification
- Civic badges and contribution stats
- Report history stats
- Settings management
## Tech Stack
- **Framework**: React Native + Expo (SDK 54)
- **Language**: TypeScript
- **Auth**: Supabase + Google OAuth
- **Camera**: expo-camera
- **Location**: expo-location
- **Navigation**: @react-navigation/native
- **Styling**: Custom dark theme with glassmorphism
## Prerequisites
- Node.js 18+
- npm or yarn
- Expo CLI
- Expo Go app on your device (for testing)
- Google OAuth configured in Supabase
## Installation
```bash
cd User
npm install
```
## Configuration
1. Update Supabase credentials in `src/config/supabase.ts`:
- `SUPABASE_URL`: Your Supabase project URL
- `SUPABASE_ANON_KEY`: Your Supabase anon key
2. Configure Google OAuth in Supabase Dashboard:
- Enable Google provider
- Add your OAuth client credentials
3. Update `app.json` with your bundle identifiers if needed
## Running the App
### Development
```bash
npx expo start
```
### iOS Simulator
```bash
npx expo start --ios
```
### Android Emulator
```bash
npx expo start --android
```
### Physical Device
Scan the QR code with Expo Go app
## Project Structure
```
src/
├── components/
│ ├── ui/
│ │ ├── Button.tsx # Gradient button with variants
│ │ └── Card.tsx # Glass/gradient card component
│ └── issues/
│ └── IssueCard.tsx # Issue list item component
├── config/
│ └── supabase.ts # Supabase client configuration
├── context/
│ └── AuthContext.tsx # Auth state management
├── navigation/
│ └── AppNavigator.tsx # Navigation structure
├── screens/
│ ├── auth/
│ │ └── LoginScreen.tsx # Google OAuth login
│ ├── capture/
│ │ ├── CaptureScreen.tsx # Camera with GPS enforcement
│ │ └── ProcessingScreen.tsx # AI agent progress
│ ├── home/
│ │ └── HomeScreen.tsx # Dashboard
│ ├── issues/
│ │ ├── MyIssuesScreen.tsx # Issue list
│ │ └── IssueDetailScreen.tsx # Issue details
│ └── profile/
│ └── ProfileScreen.tsx # User profile
├── services/
│ ├── issueService.ts # API communication
│ └── locationService.ts # GPS utilities
├── theme/
│ └── index.ts # Colors, typography, spacing
└── types/
└── index.ts # TypeScript interfaces
```
## API Integration
The app connects to the Backend API at:
- Development: `http://10.0.2.2:8000` (Android emulator)
- Update `API_BASE_URL` in `src/config/supabase.ts` for other environments
## Backend Endpoints Used
- `POST /issues/stream` - Create issue with background processing
- `GET /issues` - List issues with pagination
- `GET /issues/{id}` - Get issue details
- `GET /flow/flow/{id}` - SSE stream for agent progress
## Building for Production
### EAS Build (Recommended)
```bash
npx eas build --platform all
```
### Local Build
```bash
npx expo run:android
npx expo run:ios
```
## License
Part of the Autonomous City Issue Resolution Agent project.
|