# ๐Ÿ—๏ธ CityPulse - Smart Citizen-Driven Urban Maintenance Platform CityPulse is a comprehensive citizen reporting application that combines **Flutter frontend** with **Python FastAPI backend** and **AI-powered image classification**. Users can capture urban issues (potholes, broken streetlights, trash, etc.), get automatic AI classification, and track their reports through a complete management system. ## ๐ŸŽฏ System Architecture ### Frontend (Flutterrr) - **Location**: Root directory - **Technology**: Flutter (Dart) with Material Design - **Purpose**: Cross-platform mobile and web interface for citizens - **Features**: Camera integration, GPS location, map visualization, bilingual support (EN/BM) ### Backend (Python FastAPI) - **Location**: `backend/` directory - **Technology**: Python FastAPI with SQLAlchemy + SQLite - **Purpose**: RESTful API server with AI-powered image classification - **Features**: YOLO-based object detection, severity classification, ticket management ### Data Flow ``` User takes photo โ†’ Flutter App โ†’ FastAPI Backend โ†’ AI Analysis โ†’ Database โ†“ โ†“ โ†“ โ†“ โ†“ Reports List โ†โ”€โ”€โ”€โ”€โ”€โ”€ API Calls โ†โ”€โ”€โ”€ HTTP/REST โ”€โ”€โ†’ YOLO Model โ”€โ†’ SQLite ``` ## ๐Ÿš€ Quick Start Guide ### Prerequisites - **Flutter SDK** 3.8.1+ ([Install Guide](https://docs.flutter.dev/get-started/install)) - **Python** 3.11+ ([Install Guide](https://python.org/downloads/)) - **Git** for version control ### 1. Clone and Setup ```bash git clone cd fixmate-frontend ``` ### 2. Install Flutter Dependencies ```bash flutter pub get ``` ### 3. Setup Backend ```bash cd backend pip install -r requirements.txt ``` ### 4. Start Backend Server (Terminal 1) ```bash cd backend python main.py ``` โœ… Backend will run on: `http://127.0.0.1:8000` ### 5. Start Flutter App (Terminal 2) ```bash # Navigate back to project root cd .. # Start Flutter app (choose your target) flutter run # Mobile (Android/iOS) # OR flutter run -d chrome # Web (Chrome) # OR flutter run -d web-server # Web Server ``` ## ๐Ÿ”ง Alternative Startup Methods ### Method A: Backend Only ```bash cd backend python main.py ``` ### Method B: Using Uvicorn (Alternative) ```bash cd backend uvicorn main:app --host 127.0.0.1 --port 8000 --reload ``` ### Method C: Flutter Web (Web Version) ```bash flutter run -d chrome # or firefox, edge ``` ### Method D: Development Mode (Hot Reload) ```bash # Terminal 1 - Backend with auto-reload cd backend uvicorn main:app --reload # Terminal 2 - Flutter with hot reload flutter run ``` ### Method E: Dashboard Access (Web Interface) ```bash # Terminal 1 - Start Backend Server cd backend python main.py # OR (if port conflicts occur): uvicorn main:app --host 127.0.0.1 --port 8000 --reload # Terminal 2 - Start Dashboard Server cd dashboard python -m http.server 3000 # Open browser and navigate to: # http://localhost:3000 ``` **Dashboard Features:** - ๐Ÿ—บ๏ธ Interactive map with report visualization - ๐Ÿ” Advanced filtering by category, severity, status, and date - ๐Ÿ“Š Real-time statistics and analytics - ๐ŸŒก๏ธ Heatmap toggle for density visualization - ๐Ÿ”„ Status management (submitted โ†’ in_progress โ†’ fixed) - ๐Ÿ“ฑ Responsive design for desktop and mobile - ๐ŸŒ Bilingual support (English/Bahasa Malaysia) **Troubleshooting Dashboard:** - **Port 8000 in use?** Try: `uvicorn main:app --host 127.0.0.1 --port 8080 --reload` (then update dashboard to use port 8080) - **Port 3000 in use?** Try: `python -m http.server 3001` - **Backend connection fails?** Dashboard will automatically use demo data - **CORS issues?** Ensure backend allows requests from `http://localhost:3000` ## ๐Ÿ“ฑ API Endpoints The Flutter app communicates with these backend endpoints: | Endpoint | Method | Purpose | |----------|--------|---------| | `/api/tickets` | GET | Fetch all reports | | `/api/report` | POST | Submit new report with image | | `/api/tickets/{id}` | GET | Get specific report | | `/api/tickets/{id}` | PATCH | Update report status | | `/api/analytics` | GET | Get dashboard analytics | | `/api/users` | POST | Create user account | ### API Documentation View interactive API documentation at: `http://127.0.0.1:8000/docs` --- ## ๐ŸŽฎ Features Overview ### Flutter Frontend Features - โœ… **Report Flow**: Camera/gallery photo capture with GPS location - โœ… **AI Classification**: Automatic issue type and severity detection - โœ… **Map View**: Interactive OpenStreetMap with clustering and filtering - โœ… **Report Management**: View, edit, and track report status - โœ… **Bilingual Support**: English and Bahasa Malaysia - โœ… **Settings**: Language toggle and data management ### Backend AI Features - โœ… **YOLO Object Detection**: Detects urban issues from images - โœ… **Severity Classification**: ML model assesses issue severity - โœ… **SQLite Database**: Local data storage with full CRUD operations - โœ… **RESTful API**: Complete API for mobile app integration - โœ… **File Upload**: Image storage and processing ## ๐Ÿ“ Project Structure ### Frontend (Flutter) ``` lib/ โ”œโ”€โ”€ app.dart # Main app widget and routing โ”œโ”€โ”€ main.dart # App entry point โ”œโ”€โ”€ models/ โ”‚ โ”œโ”€โ”€ report.dart # Report data model โ”‚ โ””โ”€โ”€ enums.dart # Category, severity, status enums โ”œโ”€โ”€ screens/ โ”‚ โ”œโ”€โ”€ report_flow/ # Photo capture flow โ”‚ โ”œโ”€โ”€ map/ # Map visualization screen โ”‚ โ”œโ”€โ”€ my_reports/ # User reports management โ”‚ โ””โ”€โ”€ settings/ # App settings โ”œโ”€โ”€ services/ โ”‚ โ”œโ”€โ”€ api_service.dart # Backend API communication โ”‚ โ”œโ”€โ”€ storage.dart # Local data storage โ”‚ โ”œโ”€โ”€ location_service.dart # GPS location services โ”‚ โ””โ”€โ”€ mock_ai.dart # AI classification logic โ”œโ”€โ”€ theme/ โ”‚ โ””โ”€โ”€ themes.dart # App theming โ”œโ”€โ”€ widgets/ # Reusable UI components โ””โ”€โ”€ l10n/ # Internationalization ``` ### Backend (Python) ``` backend/ โ”œโ”€โ”€ main.py # FastAPI server entry point โ”œโ”€โ”€ requirements.txt # Python dependencies โ”œโ”€โ”€ app/ โ”‚ โ”œโ”€โ”€ database.py # SQLite database setup โ”‚ โ”œโ”€โ”€ models/ # Database models โ”‚ โ”œโ”€โ”€ routes/ # API route handlers โ”‚ โ”œโ”€โ”€ services/ # Business logic and AI services โ”‚ โ”œโ”€โ”€ schemas/ # Pydantic data models โ”‚ โ””โ”€โ”€ static/uploads/ # Image storage โ””โ”€โ”€ test/ # Test files and utilities ``` ## ๐Ÿ› ๏ธ Technology Stack ### Frontend Technology Stack - **Flutter**: 3.8.1+ with Material Design - **Key Packages**: - `flutter_map` + `flutter_map_marker_cluster` (Interactive maps) - `geolocator` (GPS location services) - `image_picker` (Camera integration) - `http` (API communication) - `provider` (State management) - `shared_preferences` (Local storage) ### Backend Technology Stack - **FastAPI**: 0.117.1+ (Modern Python web framework) - **SQLAlchemy**: 2.0.43+ (ORM for database operations) - **PyTorch**: 2.8.0+ (Machine learning framework) - **Ultralytics YOLO**: 8.3.203+ (Object detection) - **SQLite**: Local database for data persistence ### AI Models - **Object Detection**: YOLOv12n for issue identification - **Severity Classification**: Custom PyTorch model - **Model Storage**: `backend/app/models/` directory ## ๐Ÿ› ๏ธ Troubleshooting ### Backend Issues **Port 8000 already in use:** ```bash # Windows netstat -ano | findstr :8000 taskkill /F /IM python.exe # Alternative: Kill specific process Get-Process -Name python | Stop-Process -Force ``` **Missing dependencies:** ```bash cd backend pip install -r requirements.txt pip install python-multipart pydantic[email] ``` **Backend not starting:** ```bash # Test if modules can be imported cd backend python -c "import main; print('Import successful')" ``` ### Frontend Issues **Flutter dependencies:** ```bash flutter clean flutter pub get ``` **Device connection issues:** ```bash flutter devices # List connected devices flutter doctor # Check Flutter installation ``` **Web-specific issues:** ```bash flutter config --enable-web ``` ### Common Issues **"Connection refused" errors:** - Ensure backend server is running on port 8000 - Check firewall settings - Verify API base URL in `lib/services/api_service.dart` - For dashboard: Check browser console for CORS errors **Camera/Geolocation not working:** - Grant permissions in device settings - Use HTTPS for web deployment - Check browser permissions **Slow AI processing:** - First startup downloads ML models (may take time) - Consider using CPU-only builds for faster startup - Check available memory ## ๐Ÿงช Testing & Development ### Backend Testing ```bash cd backend python -m pytest test/ # Run all tests python test/check_torch.py # Verify PyTorch setup ``` ### Flutter Testing ```bash flutter test # Run unit tests flutter test --coverage # With coverage report ``` ### Database Management ```bash cd backend python -c "from app.database import engine; print('Database file:', engine.url.database)" # Database file: backend/app/db/fixmate.db ``` ## ๐Ÿ“Š Performance Considerations ### Backend Performance - **First Startup**: ML models download (~200MB) - may take several minutes - **Memory Usage**: PyTorch models require significant RAM - **CPU vs GPU**: CPU-only builds available for compatibility - **Database**: SQLite suitable for small-scale deployments ### Frontend Performance - **Image Processing**: Images compressed before upload - **Map Rendering**: Clustering optimizes marker display - **Caching**: Local storage for offline functionality ## ๐Ÿš€ Production Deployment ### Backend Deployment ```bash cd backend # Production server uvicorn main:app --host 0.0.0.0 --port 8000 --workers 4 # Or with Gunicorn gunicorn main:app -w 4 -k uvicorn.workers.UvicornWorker ``` ### Flutter Deployment ```bash # Build for production flutter build apk --release # Android flutter build ios --release # iOS flutter build web --release # Web # Build for specific targets flutter build appbundle # Android App Bundle flutter build ipa # iOS Archive ``` ## ๐Ÿ“š Key Files Reference ### Essential Flutter Files - `lib/main.dart` - App entry point - `lib/app.dart` - Main app widget and navigation - `lib/services/api_service.dart` - Backend communication - `lib/models/report.dart` - Data models - `pubspec.yaml` - Flutter dependencies ### Essential Backend Files - `backend/main.py` - FastAPI server - `backend/app/database.py` - Database configuration - `backend/app/routes/tickets.py` - Ticket API endpoints - `backend/app/services/ai_service.py` - AI classification logic - `backend/requirements.txt` - Python dependencies ## ๐ŸŽฏ Future Enhancements ### Planned Features - [ ] Real-time notifications for status updates - [ ] Advanced filtering and search capabilities - [ ] User authentication and profiles - [ ] Admin dashboard for report management - [ ] Push notifications for mobile - [ ] Offline mode with sync capabilities - [ ] Multi-language support expansion - [ ] Analytics and reporting dashboard ### Technical Improvements - [ ] Database optimization for large datasets - [ ] Caching layer implementation - [ ] API rate limiting - [ ] Image compression optimization - [ ] Background processing for AI tasks - [ ] Monitoring and logging enhancement ## ๐Ÿ“„ License & Acknowledgments ### License - Placeholder: Add appropriate license for your project ### Acknowledgments - **OpenStreetMap** - Map data and tile services - **Leaflet** - Interactive mapping library - **Flutter Community** - Dart packages and plugins - **Ultralytics** - YOLO implementation - **PyTorch** - Machine learning framework - **FastAPI** - Modern Python web framework ### References 1. [Flutter Documentation](https://docs.flutter.dev/) 2. [FastAPI Documentation](https://fastapi.tiangolo.com/) 3. [YOLOv12 Implementation](https://github.com/ultralytics/ultralytics) 4. [PyTorch Models](https://pytorch.org/)