Sportsphere App

Overview

Sportsphere is a mobile application designed to help users manage their sports activities, reminders, and chats. The app integrates with Firebase for authentication and database functionalities, allowing users to create, read, update, and delete activities and reminders.

Third-party API Key

Please add these lines of code to the .env file:

EXPO_PUBLIC_weatherApiKey= "J2NKBPU16GeykqzL"
EXPO_PUBLIC_mapApiKey= "AIzaSyA_0463EzbY9HcbMhb0OaZveUkFKvyqArc"

Firebase Database Rule

Please use the following as the firebase database rule:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {

    // Rules for the 'users' collection
    match /users/{user} {
     allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && request.auth.uid == resource.data.uid;

     // Rules for the 'reminders' subcollection
      match /reminders/{reminder} {
      allow read: if true;
     allow create: if request.auth != null;
      allow update, delete: if request.auth != null && request.auth.uid == resource.data.owner;
      }
    }

    match /activities/{activity} {
      allow read: if true;
     allow create: if request.auth != null;
     allow update, delete: if request.auth != null && request.auth.uid == resource.data.owner;
    }

    // Rules for the 'messages' collection
    match /messages/{messageId} {
      allow read, write: if request.auth != null && (
        request.auth.uid == resource.data.sender || 
        request.auth.uid == resource.data.recipient
      );
    }

    // Rules for all other access
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Collections

activities

users

reminders (a subcollection of users)

messages

Data Model

activities

• activityName: string
• date: timestamp
• description: string
• owner: string
• peopleGoing: array<string>
• time: timestamp
• totalMembers: string
• venue: string
• venuePosition: latitude: number, longitude: number

---

users

• bio: string
• email: string
• uid: string
• username: string

---

reminders (subcollection of users)

• date: timestamp
• owner: string
• time: timestamp
• title: string
• turnedOn: boolean

---

messages

• participants: array<string>
• recipient: string
• sender: string
• text: string
• timestamp: timestamp
• isUnread: boolean

Features

• Activity Management: Users can create, view, edit, and delete sports activities. Users can add picture to the activity using camera or existing photos.
• Reminder Management: Users can set reminders for their activities and get notification at a particular time.
• Profile Management: Users can create, view and edit their profiles. Users can reset password if needed.
• View Local Weather: Users can view the current temperature and weather condition at their location.
• Firebase Integration: The app uses Firebase for authentication and database management.
• Instant Messaging: Users can chat with the organizers of activities.
• Map Functionality: Users can view activities nearby on a map.

Screenshots

Installation

1. Clone the repository and navigate to the project directory:

   git clone https://github.com/claireyyu/SportSphere.git
   cd SportSphere/sportsphere-app

2. Install dependencies:

   npm install

3. Set up Firebase:

   • Create a Firebase project.
   • Copy the .env.example file, rename it to .env.
   • Add the Firebase configuration to .env.
   • Add third party API keys to .env. (mentioned above)
   • Modify firebase database's security rule. (mentioned above)

4. Run the app:

   npx expo start

Contributions

Yue (Claire) Yu

• Designed and implemented the UI for the main screens, including frontend placeholders to ensure data integration.
• Developed and configured navigation workflows using a combination of Tab Navigator and Stack Navigator for an intuitive user experience.
• Implemented the instant messaging feature, allowing participants to send messages to organizers.
• Implemented the notification feature for user's workout reminder.
• Integrated the third-party weather API for better user experience.
• Implemented the reset password feature to allow changing user's password.

Xinxin (Amelia) Li

• Built and integrated full CRUD functionality for activities and reminders.
• Implemented secure user authentication using Firebase.
• Implemented Map features to show user's current location and display activities on the map
• Integrated Google places and auto-complete API for user experience
• Implemented Camera features for uploading activity images, take activity pictures, and changing profile photo

Usage

Activity Management

• Navigate to the Activity tab to view all activities.
• Click on an activity to view details.
• Use the add button to create a new activity.
• Join or leave activities.
• Edit or delete existing activities.
• Sort activity by date or distance.
• Search (filter) activities by activity name, location and date.
• Attach a picture using the camera or an existing photo.

Instant Messaging

• Choose an activity by clicking on "learn more". In the activity detail page, click on the organizer's avatar and get navigated to her/his profile page. Click on "Message" button to start a conversation.
• Navigate to the Chat tab to view all chats.
• Click on a chat to view details and send messages.
• Long press on a chat to delete the chat.

Map Management

• Click on icons of different activities on the map for information
• Click on the information callout to navigate to activity details page
• Edit/delete/join/leave activities from the details page

Image Management

• Use camera to take photos or select photos from library to upload in activities
• In edit activity page, long press image to delete an image, click on camera/photo icon to upload more images
• In edit profile page, click on profile to select image from library to change profile

Profile Management

• Navigate to the Profile screen to view and edit your profile.

Current Weather

• View current temperature and weather condition in the home page.

Reminder Management

• Navigate to the Reminder screen to view all reminders.
• Use the add button to create a new reminder.
• Edit (press) or delete (long press) existing reminders.