Architecture

Project Architecture

Overview

App Type: Mobile app

Description

This will be a React Native app developed with Expo. It uses Firebase for authentication for user accounts, notifications, one-time phone passcodes, and messaging. We will store any other data related to the user/user account in MongoDB. We will use GitHub Actions for the deployment pipeline. We plan on eventually integrating Steam API's as well to draw user data about their played games instead of having users manually input data, saving time. React Native also has a vast array of libraries to draw from. We will use its Firebase libraries for authentication, its Maps libraries for location-based features and services, navigation and stack libraries for page navigation, Elements/Papers libraries for UI design, etc.

---

Languages, Frameworks, Libraries, and Services

Languages

Our app will be written primarily in TypeScript for type safety, as well as JavaScript for other app functionalities. Both are interchangeable with each other and fully supported by React Native + Expo.

Frameworks

React Native is an open-source framework used for developing cross-platform mobile apps using React. Expo simplifies the development process with built-in tools for debugging, live testing, asset management, and deployment.

IDE

We are using VS Code for our IDE as it is ideal for JavaScript-based projects. It has a lightweight interface, a large array of React Native extensions, GitHub integration, and a built-in terminal with debugging tools.

Libraries

Library	Description
expo	Provides React Native development tools, build configurations, and simplified deployments
react-navigation	Handles stack and tab navigation between app screens
react-native-maps	integrates map functionality for displaying locations and user positions
react-native-paper	Provides cross-platform UI components that follow Material Design guidelines
react-native=elements	Provides cross-platform UI components that follow Material Design guidelines
firebase	Handles authentication, cloud messaging (notifications), and real-time updates
react-native-firebase	Firebases React Native SDK wrapper that helps integrate services like Firestore, Authentication, and Cloud messaging
axios/fetch API	Used for making HTTP requests to API's (Steam, Firebase, MongoDB backend)
mongoose/express	For handling database operations and connecting the mobile app to MongoDB via backend endpoints

Services and API's

Firebase We will use Firebase Authentication for managing user accounts/logins, Cloud Messaging for notifications, and Firestore for lightweight storage and real-time updates.

MongoDB User-related and persistent data will be stored and hosted through MongoDB and its free "MongoDB Atlas" for simplicity and scalability.

Steam Web API We plan to integrate the Steam Web API to fetch user game statistics and activity data automatically.

Optional Custom REST API, like Node.js or Express, to bridge the gap between MongoDB and our app.

Package/Build Managers

Tool	Purpose
npm/yarn	Used for managing React Native dependencies
Expo CLI	Handles building, testing, publishing for our app (both Android and IOS)

---

Authentication & Hosting

Authentication: Firebase Authentication Firebase Authentication will handle secure user signups and logins via email and password, or through social logins (optional). It ensures user identity is verified before allowing access to sensitive features like messaging or profile editing.

Hosting: Firebase Hosting Firebase Hosting will serve both our static assets and backend endpoints, simplifying deployment and ensuring fast global performance through built-in CDN support.

---

Real-Time Communication

Primary Approach -- Firebase Firestone Messaging

Service: Firebase Firestone

Library: React Native Firebase SDK

Protocol: WebSockets (these are managed internally by Firebase)

We will use Firebase Firestore (FBFS) as our main solution for real-time chats between users. Each conversation will exist as a Firestore document with a nested /messages subcollection to store individual messages. FBFS supports bi-directional chats with low-latency synchronization. This means both users' chat screens should instantly update when a message is sent.

Using FBFS's built-in listeners called "onSnapshot", we can automatically detect and display new messages without needing to manually refresh or poll. Firebase Cloud Messaging will also be integrated to deliver push notifications when there are new messages received (including when the app is closed).

However, if Firestore becomes limiting or cost-prohibitive, we will consider the following alternative approach:

Firebase Realtime Database

This is essentially a simpler, JSON-based alternative to FBFS. Instead of documents, we provide instant data synchronization via WebSockets, which are already optimized for low-latency updates.

We are not going with this approach originally, though, due to less flexible data querying and complexity issues when growing to scale.

---

Checklist for Making a Mobile App

Release: We will use Expo to create and distribute app binaries, specifically generating an .apk file and uploading it to GitHub Releases for testing.

Each release will be built using the Expo CI/CD process and distributed for easy installation.

Virtual Machines/Containers We are not using anything for our app development. Our workflow does not require Docker or any other Virtual Machines since Expo's local development environment is cross-platform and uses device simulators like:

- Android Emulator (Pixel 7) via Android Studio
- iOS Simulator (iPhone 13) via Xcode for Mac users

We will also test the app on physical devices and web browsers using the Expo Go app and web functionality, allowing for real time testing and debugging through a QR code.

Github Actions

We will use GitHub Actions for continuous integration and deployment automation. Our pipeline is as follows:

1. Run linting and tests on every push
2. Build the Expo project
3. Optionally trigger a release upload to Expo or GitHub Releases

---

UML Class Diagram

Database

Maintaining State

We will maintain states in memory through the above-mentioned navigation stack library that comes with React Native. This will track the current state of the user. Our database is simply for storing and retrieving information in said state.

It has features like "useState" and "useContext" for state hooks that are locally managed. This provides instant updates to the UI when the user navigates between screens.

However, if the data is persistent (user accounts, saved preferences, game activity, messages, etc), it will be stored in the Firebase Firestore and MongoDB Atlas.

• Firebase will handle the authentication and message notifications
• Mongo will store structured gameplay data (like user-linked stats) from Steam integration data, and other various profile information.

Essentially, Firebase manages the "who", MongoDB manages the "what".

MongoDB Atlas

MongoDB Atlas is our cloud-hosted database solution that stores collections for users, matches, messages, and preferences. Its flexibility allows us to store dynamic user data such as interests, favorite games, and experience levels without strict schema constraints. The database will interact with the backend via Mongoose models for easy querying and validation.

Example Collections:

• Users: profile info, trust rating, game preferences
• Matches: user IDs, compatibility score, match status
• Messages: sender, receiver, timestamp, and message body

---

Database Schema

1. Users Collection

Description: Stores user information for authentication.

Attribute	Type	Description
_id	ObjectID	unique identifier for each user (Primary key)
phone_number	String	user’s phone number for one-time passcode authentication
otp	String	one-time passcode for authentication (expires after a certain duration)
email	String	user’s email for app recovery and notifications (optional)
isVerified	Boolean	status of whether the user's phone number is verified with the otp for their most recent session
lastLogin	Date	date and time of the last login on their device
sessionToken	String	unique identifier generated by a server to confirm a user's identity after they log in
created_at	Date	date and time when the user account was created

2. User Profiles Collection

Description: Stores all user information for the user profile and matching.

Attribute	Type	Description
_id	ObjectID	unique identifier for each user (Primary key)
display_name	String	the user’s chosen display name
profile_picture_url	String	link to the user’s profile picture
bio	String	short description for the user’s profile
age	Int32	the user’s age
gender	String	the user’s gender
updated_at	Date	date and time of the last update to the user’s profile

3. Games Collection

Description: Contains information about all the games available for matching.

Attribute	Type	Description
_id	ObjectID	unique identifier for each game (Primary Key)
title	String	the name of the game
genre	String	the game's genre
platform	String	the platforms the game is available on

4. User Games Collection

Description: Stores which games each user plays and their specific in-game details.

Attribute	Type	Description
_id	ObjectID	unique identifier for each user game (Primary Key)
user_id	ObjectID	ID of the user
game_id	ObjectID	ID of the game

5. Preferences Collection

Description: Contains user-specified criteria for finding a match.

Attribute	Type	Description
_id	ObjectID	unique identifier for each user preference (Primary key)
user_id	ObjectID	ID of the user
favorite_games	String	the user's favorite games to play
play_style	String	the user’s preferred playstyles (e.g., ”Competitive,” “Relaxed”)
genre	String	the user’s preferred gaming genres
platform	String	the user’s preferred gaming platforms

6. Match Requests Collection

Description: Stores when one user expresses interest in another.

Attribute	Type	Description
_id	ObjectID	unique identifier for each request (Primary key)
requester_id	ObjectID	ID of the requester
receiver_id	ObjectID	ID of the receiver
requested_game_id	ObjectID	the game for which the match was proposed
request_status	Boolean	the state of the request (e.g., “Pending,” “Accepted,” “Rejected”)
requested_at	Date	date and time when the request was made

7. Matches Collection

Description: Stores confirmed matches.

Attribute	Type	Description
_id	ObjectID	unique identifier for each confirmed match (Primary key)
user1_id	ObjectID	ID of user 1
user2_id	ObjectID	ID of user 2
game_id	ObjectID	ID of the game
match_score	Int32	the user’s calculated match compatibility score
matched_at	Date	date and time when the match was confirmed

8. Chats Collection

Description: Stores communication between matched users.

Attribute	Type	Description
_id	ObjectID	unique identifier for each chat (Primary key)
match_id	ObjectID	ID of match
user_id	ObjectID	ID of the user who sent the message
message_text	String	the content of the message
sent_at	Date	date and time when the message was sent

9. Blocked Users Collection

Description: Stores blocked users.

Attribute	Type	Description
_id	ObjectID	unique identifier of each block (Primary key)
user_id	ObjectID	ID of the user performing the block
blocked_user_id	ObjectID	ID of the user being blocked
blocked_at	Date	date and time of the block

10. Prompts Collection

Description: Stores the title of each prompt.

Attribute	Type	Description
_id	ObjectID	unique identifier for each prompt title (Primary key)
prompt_title	String	title of the prompt (e.g., “Favorite Game”)
prompt_type	String	the type (e.g., the prompt requires a text or image response only)

11. User Prompt Responses Collection

Description: Stores the responses provided by users to specific prompts.

Attribute	Type	Description
_id	ObjectID	unique identifier for each prompt response (Primary key)
user_id	ObjectID	ID of the user
prompt_id	ObjectID	ID of the prompt
response_type	Array	categorizes the response (e.g., “text,” ”image”)
response_text	String	stores the text response if the response_type is ‘text’
response_image_url	String	stores the URL to the image if response_type is ‘image’
responded_at	Date	date and time when the response was recorded

12. Notifications Collection

Description: Stores notifications for users about matches or messages.

Attribute	Type	Description
_id	ObjectID	unique identifier for each notification (Primary key)
user_id	ObjectID	ID of the user
notif_type	Array	type of notification (e.g., “match,” “message”)
notif_text	String	content of the notification message
read_status	Boolean	status indicating if the notification has been read
created_at	Date	date and time when the notification was created

Common Queries

1. Check if a user profile exists by phone number

• Example Query:

db.users.findOne({ phoneNumber: “+15551234567” });

2. Insert new user on signup

• Example Query:

db.users.insertOne({
	phoneNumber: “+15551234567”,
	isVerified: false,
	createdAt: new Date()
});

3. Update OTP and expiry

• Example Query:

db.users.updateOne(
{phoneNumber: "+15551234567"},
{$set:{otp:{code:"123456",expiresAt: new Date(Date.now() + 5 * 60000)}}}

);

4. Verify OTP

• Example Query:

Example: db.users.findOne({
  	phoneNumber: "+15551234567",
  	"otp.code": "123456",
  	"otp.expiresAt": { $gt: new Date() }
});

5. Create or update profile

• Example Query:

db.profiles.updateOne(
  { userId: ObjectId("USER_ID") },
  {
    $set: {
      name: "Luna",
      bio: "Casual gamer exploring co-op worlds.",
      reasonForJoining: "Looking for co-op partners",
      photoUrl: "https://cdn.app/profile123.jpg",
      updatedAt: new Date()
    }
  },
  { upsert: true }
);

6. Get messages between two users

• Example Query:

db.chats.find({match_id: ObjectID(abcd1234) }).sort({sent_at: -1});

7. Get matches for a user

• Example Query:

db.matches.find({
	$or: [
	{ user1_id: ObjectID(abcd1234)},
	{user2_id: ObjectID(efgh5678)} ]
});

8. Retrieve user profiles by tag/filter

• Example Query:

db.preferences.find({
	platform: “PC”,
	play_style: "Competitive",
	genre: “FPS”,
});

Dummy/Placeholder Documents

Similar to Firestore's best practices, if a collection risks becoming empty, we will insert dummy document(s) to prevent automatic cleanup during development testing. This will ensure collections persist even when temporarily empty during account resets or test runs.

---

The Views

1. Login View Descriptions

• Welcome Text: Greets the user when they open the app.
• Phone Number Input Field: Allows users to enter their phone number securely.
• Continue Button: Proceeds to the verification stage after a valid number is entered.
• Verification Header: Confirms that a code has been sent to the user’s device.
• Code Input Boxes: The user enters the five-digit verification code received via text.
• Verify Button: Confirms the code and logs the user in.

2. Profile View Descriptions

• Profile Button (Bottom Navigation): Navigates the user from other app screens (like Discovery or Chat) to the Profile page.
• Profile Picture Circle: Displays the user’s chosen profile picture. Users can tap “Edit Profile Picture” to upload or change their photo.
• Name Text Box: Shows or allows editing of the user’s display name.
• Bio Text Box: A short introduction or message about the user (e.g., what games they play or why they’re joining).
• Prompt Section: Displays custom prompts (like “Favorite Pastime Outside of Games”) and user responses such as text or images.
• Settings Button: Opens the settings menu for managing account options (like privacy, logout, etc.).
• Notifications Button: Displays alerts for new messages, matches, or friend requests.

3. Discovery View Descriptions

• Profile Header (Name & Picture): Displays the other user’s name and profile image.
• Tags Section: Shows quick info tags such as age, location, and preferred gaming styles or genres.
• About Me Box: Contains a short introduction written by the user.
• Prompt Section: Displays responses to fun or interest-based prompts like “My Best Build” or “Favorite Games.”
• Image Cards: Allow users to share photos or in-game screenshots that represent their interests or achievements.
• Pass Button (Left, Bamboo Icon): Skips the profile if the user is not interested.
• Like Button (Right, Panda Icon): Indicates interest in connecting with that user.
• Discovery Button (Bottom Navigation): Navigates the user from other app screens (like Profile or Chat) to the Discovery page.

4. Chat View Descriptions

• Chat List Screen: Displays all ongoing conversations with other users.
• Notification Bubbles: Indicate unread messages on each chat preview.
• Chat Card: Shows the user’s name, profile photo, and a message preview from the latest conversation.
• Conversation Header: Displays the name, profile picture, and current activity status (e.g., “Playing Fortnite”) of the person you’re chatting with.
• Message Bubbles: Contain all messages exchanged between users, displayed chronologically.
• Prompt Reply Card: Highlights when a message originated from a profile prompt (e.g., “My Best Build”) for context.
• Message Input Bar: Text box at the bottom where users type their messages.
• Green “+” Button: Opens media-sharing options for attaching photos, GIFs, or other media to messages.
• Chat Button (Bottom Navigation): Navigates the user from other app screens (like Profile or Discovery) to the Chat page.

---

What Each Person Will Work On

Note

All members will contribute to every aspect of the code. However, these roles are assigned to ensure everyone's strengths are focused on specific areas of the code.

1. Full-Stack Developer (Ian & Justin)

• Code the logic-heavy React components.
• Code features across both the frontend and backend as needed.
• Perform consistent testing and debugging.
• Utilize frontend frameworks and libraries throughout the code.
• Implement unit tests and integration tests for key functionalities.
• Code features to implement real-time updates using WebSockets.
• Code authentication logic using Firebase Authentication.
• Integrate the Steam API into the backend.

2. Database Administrator and UI/UX Designer (Lia)

• Code functions for database schema setup and backend interactions
• Assist in quality assurance support.
• Create prototypes.
• Code that improves the React CSS components to align with the desired visual design.
• Code NoSQL query logic and ensure backend compatibility.
• Conduct consistent research to communicate findings to team members.

3. Frontend Development and Quality Assurance Tester (Casey)

• Contribute to writing test scripts to ensure code quality.
• Collaborate with full-stack developers during testing processes to identify issues early.
• Document and report potential bugs.
• Code features across the frontend.

4. Full-Stack Development Support (Yasmine)

• Create and maintain code documentation.
• Code features across the frontend and backend.
• Contribute to UI/UX design and development.
• Contribute to coding functions for database backend interactions.
• Contribute to both client-side and server-side logic.
• Contribute to authentication logic.