COMP5216 Tutorial 01 Group 03

FOCUS - Group Study and Health Interaction Platform

Objective: Promote collaborative study while promoting good physical and mental health. We want to give users motivation to study, while emphasising a helpful approach which is productive, engaging, and rewarding.

UN Goals: Good Health and Wellbeing (3) and Quality Education (4)

Group Members:

• Siyuan Tan (530055338)
• Chi Tik Denis Leung (520008197)
• Nathan Yuen (510432775)
• Ziqi Xu (540393363)

Key Features

• Study timer with breaks and health challenges spaced throughout study sessions
• Selection menu of health challenges, varying in type and target
• Points rewarded for completing challenges, used to unlock new badges and titles
• Finish a study session by uploading a photo of completed work and adding a caption
• Personal study diary to view a log of past sessions, attached media and statistics
• Groups to study together in synchronised sessions and view each other's study diaries
• Leaderboard to view group member rankings based on points
• User profile to view personal details and see collected badges/titles

Step-by-Step Guide

Prerequisites: NPM, Expo CLI, iOS/Android simulator or device. Install Expo Go if you are not building a Dev Client.

1. Clone the repository:

   git clone git@github.sydney.edu.au:COMP5216-2025-S2/COMP5216-2025-GA-T01-G03.git
   cd COMP5216-2025-GA-T01-G03

2. Install dependencies:

   npm install

3. Configure environment variables:
   • Create a .env file in the project root (see "Services and Configuration" section below).
4. Start development:
   • For Expo Go:

     npx expo start

   • For IOS Dev Client (optional):

     npx expo run:ios

Services and Configuration

Firebase

If you are using your own Firebase project (suggested for developers), follow these steps:

1. Create project, enable Authentication (Email/Password)
2. Create Firestore database in test mode, and copy the config values into .env as per the structure below.
3. Use loose rules for development, but tighten them before production/deployment.

If you are simply building and testing the app, use our provided Firebase project by creating a .env file with the structure below.

Cloudinary (optional, for photo uploads):

Set EXPO_PUBLIC_CLOUDINARY_CLOUD and EXPO_PUBLIC_CLOUDINARY_PRESET in .env.

If not configured, you cannot upload photos, but other features will work normally.

To create your own Cloudinary account:

1. Sign up at https://cloudinary.com/
2. Create an unsigned upload preset in Settings > Upload.
3. Copy your cloud name (found in Dashboard) and preset name into .env.

.env Structure

To meet sensitive data requirements, .env is included in .gitignore and not committed to the repo.

Below is the exact structure of our .env file. Create a .env in the project root and paste your values.

EXPO_PUBLIC_FIREBASE_API_KEY="XXX"
EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN="XXX"
EXPO_PUBLIC_FIREBASE_PROJECT_ID="XXX"
EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET="XXX"
EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="XXX"
EXPO_PUBLIC_FIREBASE_APP_ID="XXX"
EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID="XXX"
EXPO_PUBLIC_IOS_BUNDLE_ID="XXX"
EXPO_PUBLIC_ANDROID_PACKAGE="XXX"
EXPO_PUBLIC_CLOUDINARY_CLOUD="XXXXXXXXX"
EXPO_PUBLIC_CLOUDINARY_PRESET="XXXX"

Demo Account

Use the two accounts for testing, because of the group functionality in the app.

If you switch to your own Firebase project, update it accordingly.

Owner Account:
Email: owner@comp5216.test
Password: owner123

Member Account:
Email: member@comp5216.test
Password: member123

File Structure

/src/app

App entry and top‑level providers. Boots the app shell and mounts the NavigationContainer and global contexts.

/src/features

This is where the the bulk of the application lies, in the frontend React Native pages. They are separated into directories by feature.

/src/navigation

React Navigation setup. Contains the root navigator and feature stacks/tabs; wires the screens and controls app‑level flow between Auth and Main areas.

/src/services

Thin service layer for data access and business logic (mostly Firestore interactions). Encapsulates basic user/group APIs so UI stays declarative.

/src/shared

Cross‑cutting shared modules: reusable UI components, styles/themes, Firebase initialization helpers, notifications, constants, types, and small utilities.

Key Components and Screens

AuthStack

• LoginScreen: User login with email/password.
• RegisterScreen: User registration with email/password.
• VerifyEmailScreen: Prompt to verify email after registration.

MainTab

• HomeScreen: Dashboard with study session overview and quick actions.
• GroupsStack
  • GroupsScreen: List of groups current user is a member of, and join/create options.
  • GroupDetailScreen: View group members, and other group statistics.
  • GroupUsersScreen: View a group member's session diaries within the group.
• SessionStack
  • SessionScreen: Active study session with focus timer, and health challenges during breaks.
  • SessionReviewScreen: After session completion, view summary, upload photo and description, share to social media.
  • GroupSessionSetupScreen: Create a synchronized group study session with invite code, or join an existing one.
• LeaderboardScreen: View group member rankings based on points.
• ProfileStack
  • ProfileScreen: View personal details, select badges and titles.
  • RewardScreen: View and unlock badges and titles using points.
  • RecordScreen: View current user's past study sessions with photos and summaries.

Libraries Used

Core runtime

expo ^54.0.13

react-native 0.81.5

react 19.1.0

Navigation / routing

@react-navigation/native ^7.1.8;

@react-navigation/native-stack ^7.3.16;

@react-navigation/bottom-tabs ^7.4.0

react-native-safe-area-context ~5.6.0

Backend & data layer

firebase ^12.2.1 (Firestore v9 modular API)

@react-native-async-storage/async-storage 2.2.0 (local cache/state)

UI components

@react-native-picker/picker 2.11.1 (focus time selector)

react-native-svg 15.12.1 (countdown progress visuals)

@expo/vector-icons ^14.0.4 (icons, FontAwesome6)

Animation & gestures

react-native-reanimated ~4.1.1 (Expandable cards component)

Media & device features

expo-image-picker ^17.0.8 (camera for Review photos)

expo-notifications ~0.32.11 (local notifications for phase end)

expo-haptics ~15.0.7 (tactile feedback)

expo-clipboard ~8.0.7 (copy groupId/invite code)

expo-device ~8.0.7 (device info)

Future Improvements

• Group number limitations and session records paging
• More auth options (username/password, social login, password reset)
• Challenge pool management for admins to add/edit challenges
• My favorite challenges list for quick access
• Participant list and chat room in group sessions
• Calendar integration for scheduling study sessions
• Dark mode support