CivicIssue User App

A React Native mobile application for reporting civic issues and community problems. This app connects to the CivicIssue Admin Dashboard for issue management and tracking.

Features

🏛️ Modern UI/UX: Clean, engaging interface with professional design 📍 Location-based Reporting: GPS integration for accurate issue location 📸 Photo Documentation: Camera and gallery integration for visual evidence 🗺️ Interactive Map: View reported issues on an interactive map 📱 Real-time Updates: Track the progress of your reported issues 👤 User Profiles: Manage personal information and view statistics 🔔 Push Notifications: Stay updated on issue status changes

Tech Stack

• React Native with Expo
• TypeScript for type safety
• React Navigation for navigation
• Expo Location for GPS functionality
• Expo Image Picker for camera/gallery access
• React Native Maps for map integration
• AsyncStorage for local data persistence

Project Structure

src/
├── components/          # Reusable UI components
├── constants/          # App constants and themes
├── navigation/         # Navigation configuration
├── screens/           # App screens
├── services/          # API services
├── types/             # TypeScript type definitions
└── utils/             # Utility functions

Installation

1. Clone the repository:

   git clone https://github.com/SadiqueCodes/CivicIssue_userapp.git
   cd CivicIssue_userapp

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Run on your preferred platform:

   • iOS: npm run ios
   • Android: npm run android
   • Web: npm run web

Configuration

API Connection

Update the BASE_URL in src/services/api.ts to point to your admin dashboard API:

const BASE_URL = 'https://your-admin-dashboard-api.com/api';

Map Configuration

For production, you may need to configure map providers:

• Google Maps API key for Android
• Apple Maps for iOS (built-in)

Key Screens

Welcome Screen

• App introduction and onboarding
• Navigation to login/register

Authentication

• User login and registration
• Form validation and error handling

Home Screen

• Quick report button
• Category selection
• Recent issues overview
• Community statistics

Report Issue Screen

• Category selection with visual icons
• Priority setting
• Photo attachment
• GPS location detection
• Form validation

Map Screen

• Interactive map with issue markers
• Color-coded status indicators
• Issue details on marker tap

My Issues Screen

• Personal issue history
• Status filtering
• Progress tracking

Profile Screen

• User information management
• Personal statistics
• Account settings

Design System

The app follows a consistent design system:

• Colors: Professional blue primary with semantic colors
• Typography: Clear hierarchy with readable font sizes
• Spacing: Consistent spacing scale
• Shadows: Subtle elevation for depth
• Border Radius: Rounded corners for modern feel

API Integration

The app includes a comprehensive API service (src/services/api.ts) that handles:

• User authentication (login/register/logout)
• Issue CRUD operations
• Image uploads
• User profile management
• Statistics and analytics

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For issues and support, please contact the development team or create an issue in the repository.