Architecture
- JavaScript
- React-Native: React native is the ideal choice for our applications development because of its cross-platforming capabilities. It allows for rapid development on both android and iOS.
- React Navigation - React navigation allows for navigation through the react application. This will allow us to transition between screens and much more.
- React Native Firebase - We use this in order to connect to the firebase API.
We are going to use firebase's firestore for storing and managing our data, and firebase authentication for our user's accounts.
We will be using the npm package manager and will use the react native cli and android studio to build an apk.
This is our database schema. We will be using the the Firebase Firestore to store user data. Detailed in this image are the Documents that will be present in our database. You can see that we will have Users, DMs, Events, Groups, and Posts. These data structures will contain all relevant information for the app, to be displayed to the user.
name: String
bio: String
major: String
firstLogin: boolean
profilePic: Image
DMs: DM[]
sender: Users
recipient: Users
message: String
date: Date
title: String
description: String
date: Date
upvoteCount: int
picture: Image
title: String
users: Users[]
DMs: DM[]
body: String
date: Date
upvoteCount: int
replies: Replies[]
creator: Users
body: String
date: Date
creator: Users
This is our top down view of Campus Connect. We have detailed all of the potential screens that can be shown within the app, as well as a general navigation schema. At the top, we have our Firebase server, which will store all user data and provide authentication services. From there our app begins.
First is the LoginPage, which will have all of the necessary screens to welcome the user, log them in, or allow them to register. This page will validate the current user against the firebase server and then pass this state onto the rest of the app. Depending on whether it is the User's first login, this page will either redirect to the RegistrationPage or to the HomePage.
After completing registration and logging in, the user will be brought to the HomePage. This page will provide the general navigational layer for the rest of the app. Using React Native's Drawer Navigator, we will have a single homepage that has links to various other pages that provide different functionality throughout our app. From here, you can view the PostsPage, the DMs Page, the GroupsPage, or the EventsPage. All of these sub-pages will be displayed within the framework of the HomePage, using the Drawer Navigator. From this page, there will also be an option to view the BioPage, which will offer the ability to change profile pic, edit bio, and change any other relevant user information. All of the subpages of the HomePage will contain the necessary data structures to display the data of their respective pages. For instance, the EventsPage will have a list of events to be displayed to the user.
Erik
Erik, Tim, Neekon
Coby
Chase
Chase
Neekon
Coby, Erik
Tim, Coby