HelpSync

HelpSync is a mobile application designed to help communities respond to and recover from disasters. The app provides features for emergency alerts, disaster reporting, donations, news updates, and community coordination.

Features

• 🚨 Emergency Alerts: Receive real-time emergency notifications
• 📝 Disaster Reporting: Report incidents and affected areas
• 💰 Donations: Contribute to disaster relief efforts
• 📰 News Updates: Stay informed with the latest developments
• 🔐 User Authentication: Secure account system
• 📍 Location Services: Find nearby emergency services and resources

Design & User Experience

HelpSync's design is inspired by Wecare - Disaster Concierge Mobile App on Behance. Following its design principles, our app features:

• Clean, Accessible Interface: Prioritizing readability and ease of use during emergencies
• Calming Color Scheme: Using soothing blues and whites with high-contrast orange accents for critical actions
• Card-Based Layout: Information is presented in clear, digestible card components
• Intuitive Navigation: Streamlined experience with minimal taps to access critical features
• Visual Hierarchy: Important alerts and actions are highlighted visually
• User-Centric Flows: Designed for quick understanding and action during stressful situations

Our UI/UX philosophy centers on creating an interface that's both emotionally supportive and practically efficient during crisis situations.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v22 or later)
• npm or Yarn
• Expo CLI
• iOS/Android simulator or physical device for testing

Installation

1. Clone the repository:

   git clone https://github.com/Team-Compact/HelpSync.git
   cd HelpSync

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables:

   cp .env.example .env

   Edit the .env file and add your configuration values:

   • EXPO_PUBLIC_SUPABASE_URL: Your Supabase project URL
   • EXPO_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key

4. Configure Google Maps API:

   • Get a Google Maps API key from Google Cloud Console
   • Update the API key in app.json for both iOS and Android configurations:

     "ios": {
       "config": {
         "googleMapsApiKey": "your_google_maps_api_key_here"
       }
     },
     "android": {
       "config": {
         "googleMaps": {
           "apiKey": "your_google_maps_api_key_here"
         }
       }
     }

Running the Application

Development Mode

Start the Expo development server:

npx expo start

This will open a new browser window with the Expo developer tools. From here, you can:

• Press i to open in iOS simulator
• Press a to open in Android simulator
• Scan the QR code with the Expo Go app on your physical device

Building for Production

Set up EAS (Expo Application Services) by updating your project ID in app.json:

"extra": {
  "eas": {
    "projectId": "your_project_id_here"
  }
}

To create a production build:

npx eas build --platform ios
# or
npx eas build --platform android

For more details on building with EAS, see the EAS documentation.

Project Structure

HelpSync/
├── app/                   # Main application screens using Expo Router
│   ├── (tabs)/            # Tab-based navigation screens
│   ├── (welcome)/         # Welcome/onboarding screens
│   ├── auth/              # Authentication screens
│   ├── disaster/          # Disaster information screens
│   ├── donations.tsx      # Donations screen
│   ├── emergency.tsx      # Emergency information screen
│   └── report.tsx         # Incident reporting screen
├── assets/                # Static assets (images, fonts)
├── components/            # Reusable UI components
├── config/                # App configuration (colors, themes)
├── contexts/              # React context providers
├── data/                  # Static data and models
├── hooks/                 # Custom React hooks
├── lib/                   # External library integrations (Supabase)
├── services/              # API and service integrations
└── utils/                 # Utility functions

App Permissions

The app requires the following permissions:

• Location: Used to show nearby emergency services and disaster alerts
• Internet: Required for accessing online services and data

Screenshots

Home Screen

Emergency Screen

News Feed

Profile Screen

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Expo
• React Native
• Supabase
• Google Maps Platform
• Wecare Design for UI/UX inspiration
• All contributors and supporters