HighFive

A peer-to-peer help and volunteering mobile application built with React Native (Expo) and Supabase. ConnectCare connects people who need help (Beneficiary) with volunteers who want to assist.

Features

• Role-based Access: Beneficiary can request help, Volunteers can offer assistance
• Help Requests: Create, browse, and manage help requests with categories and urgency levels
• In-App Messaging: Real-time chat between donors and volunteers
• Volunteer Matching: Accept/decline volunteer offers for requests
• Rating System: Rate volunteers after completed requests
• Session Persistence: Stay logged in across app restarts

Tech Stack

• Frontend: React Native 0.81.5 with Expo SDK 54
• Backend: Supabase (PostgreSQL with Row Level Security)
• Authentication: Supabase Auth
• Real-time: Supabase Realtime for chat functionality

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or newer) - Download
• npm (comes with Node.js) or yarn
• Git - Download
• Expo Go app on your mobile device (optional, for testing on physical device)
  • Android Play Store
  • iOS App Store

For running on emulators/simulators:

• Android Studio (for Android Emulator) - Download
• Xcode (for iOS Simulator, macOS only) - Available on Mac App Store

Installation

1. Clone the Repository

git clone <repository-url>
cd gsc-1125

2. Install Dependencies

npm install

3. Set Up Supabase

Create a Supabase Project

1. Go to https://supabase.com and sign up/login
2. Click New Project
3. Enter a project name and database password
4. Select a region closest to your users
5. Wait for the project to be created (takes ~2 minutes)

Get Your API Keys

1. In your Supabase project dashboard, go to Settings (gear icon) > API
2. Copy the following values:
   • Project URL (looks like https://xxxxx.supabase.co)
   • anon public key (a long string starting with eyJ...)

4. Configure Environment Variables

1. Copy the example environment file:

cp .env.example .env

2. Open .env and add your Supabase credentials:

EXPO_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

Important: Replace the placeholder values with your actual Supabase credentials.

5. Set Up the Database

Run the SQL migrations in your Supabase project:

1. Go to your Supabase project dashboard
2. Click SQL Editor in the left sidebar
3. Click New Query
4. Run each migration file in order (copy and paste the contents, then click Run):

Order	File	Description
1	supabase-schema.sql	Initial database schema (profiles, help_requests, volunteers)
2	supabase-roles-migration.sql	Role-based access control
3	supabase-chat-migration.sql	Chat/messaging tables
4	supabase-ratings-migration.sql	Volunteer rating system
5	supabase-update-categories-migration.sql	Category updates
6	supabase-fix-volunteer-update-policy.sql	RLS policy fixes

Tip: You can also run all files in one query by concatenating them, but running separately helps identify any issues.

6. Configure Supabase Auth (Optional but Recommended)

For easier testing, you can disable email confirmation:

1. Go to Authentication > Providers in your Supabase dashboard
2. Click on Email
3. Toggle off Confirm email (for development only)
4. Click Save

Note: Enable email confirmation for production use.

Running the App

Start the Development Server

npm start

This will start the Expo development server and display a QR code.

Running on Different Platforms

Platform	Command	Notes
Expo Go (Phone)	Scan QR code with Expo Go app	Easiest for testing
Android Emulator	Press a in terminal	Requires Android Studio
iOS Simulator	Press i in terminal	macOS only, requires Xcode
Web Browser	Press w in terminal	Limited functionality

Direct Platform Commands

npm run android   # Run on Android
npm run ios       # Run on iOS (macOS only)
npm run web       # Run in web browser

Project Structure

gsc-1125/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Button.js
│   │   ├── RequestCard.js
│   │   ├── VolunteerOfferCard.js
│   │   ├── ConversationCard.js
│   │   ├── MessageBubble.js
│   │   ├── MessageInput.js
│   │   └── RatingModal.js
│   │
│   ├── screens/             # App screens
│   │   ├── HomeScreen.js
│   │   ├── LoginScreen.js
│   │   ├── SignupScreen.js
│   │   ├── BrowseRequestsScreen.js
│   │   ├── RequestDetailScreen.js
│   │   ├── CreateRequestScreen.js
│   │   ├── MyRequestsScreen.js
│   │   ├── VolunteerProfileScreen.js
│   │   ├── ConversationsScreen.js
│   │   └── ChatScreen.js
│   │
│   ├── services/            # API and business logic
│   │   ├── supabase.js      # Supabase client config
│   │   ├── authService.js   # Authentication
│   │   ├── requestService.js # Help requests
│   │   └── chatService.js   # Messaging
│   │
│   ├── constants/
│   │   └── theme.js         # Colors, sizes, fonts
│   │
│   └── assets/
│       └── images/          # App images
│
├── assets/                  # Expo default assets
├── App.js                   # Root component
├── app.json                 # Expo configuration
├── package.json             # Dependencies
├── .env.example             # Environment template
└── supabase-*.sql           # Database migrations

User Roles

The app has two distinct user roles:

Beneficiary (Help Seeker)

• Create help requests
• Browse all requests
• Manage their own requests
• Accept/decline volunteer offers
• Rate volunteers after completion
• Chat with volunteers

Volunteer (Helper)

• Browse help requests
• Offer help on requests
• View their submitted offers
• Chat with donors

Roles are selected during signup and determine what features are visible and accessible.

Troubleshooting

Common Issues

"Missing Supabase environment variables"

• Ensure .env file exists in the project root
• Verify both EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY are set
• Restart the Expo dev server after modifying .env

"new row violates row-level security policy"

• Ensure you're logged in
• Verify your user has the correct role for the operation
• Run all migration SQL files in the correct order

Authentication not working

• Check that Email Auth is enabled in Supabase (Authentication > Providers > Email)
• Verify your anon key is correct in .env
• Check Supabase logs for detailed error messages

App not connecting to Supabase

• Verify your Supabase project URL is correct
• Check your internet connection
• Ensure the Supabase project is active (not paused)

Metro bundler issues

# Clear cache and restart
npm start -- --clear

Environment Variables

Variable	Description	Required
EXPO_PUBLIC_SUPABASE_URL	Your Supabase project URL	Yes
EXPO_PUBLIC_SUPABASE_ANON_KEY	Your Supabase anon/public key	Yes

Note: Variables must be prefixed with EXPO_PUBLIC_ to be accessible in Expo apps.

Security Notes

• The anon key is safe to expose in client-side code (it's designed for this)
• All database operations are protected by Row Level Security (RLS)
• Users can only access data they're authorized to see
• Role-based restrictions are enforced at both UI and database levels

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Support

If you encounter any issues or have questions:

1. Check the Troubleshooting section
2. Review Supabase Documentation
3. Review Expo Documentation
4. Open an issue in this repository