ATTEND-OT

Student attendance and classroom map tracker.
Explore the docs »

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
     • Cloud Functions
     • Instructor App
     • Student Mobile App
3. Additional Resources

About The Project

Ontario Tech University student tracking system that streamlines classroom attendance monitoring. This solution consists of a mobile application for students and a web portal for professors. Students log in through the mobile app. Inside the classroom, they scan a QR code located at their chosen seat. This action signals their presence, and the information is transmitted to a cloud database. The database updates a real-time map on the professor's web portal, displaying the students' seat locations based on the scanned QR codes. When a professor hovers over a student's marker on the map, they can access relevant student information such as name, pronouns, and student ID number.

Built With

• 
• 
• 
• 
• 

Getting Started

This guide can be used to set up an instance of the attendance tracker and services. This guide assumes that you have Node.js installed on your system and an existing Firebase project.

Prerequisites

You will need the latest version of NPM, along with the Firebase CLI.

• npm

  npm install npm@latest -g

• firebase-tools

  npm install -g firebase-tools

For the mobile application, it is recommended that you use the Expo Go app to sideload the application on your device

Installation

1. Fork this repo here.
2. Clone the repo.

   git clone https://github.com/github_username/repo_name.git

Cloud Functions

It should be noted that unless you have Firebase CLI emulator set up, Cloud Function services will run in production. As such, you will need to have an existing Firebase project. Details on Firebase CLI emulator can be found here.

Hosting Cloud Functions will require an active Firebase Blaze plan for your project, more details can be found here.

All files associated with the Cloud Functions can be found in the cloud-functions folder of this repo.

1. Follow the instructions for setting up Cloud Functions using Firebase integration.
2. Deploy your functions.

    firebase deploy --only functions

Instructor App

1. In the instructor-app folder, run npm install to load project dependencies.

2. Create an .env.local file to store the necessary environment variables. Note that these variables should never be committed to a public repository. Most of these variables will be found from your Firebase project. The remaining variables are used for NextAuth.js, which can be found here.

   The general format of your file will include the following:

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

FIREBASE_PROJECT_ID=your_project_id
FIREBASE_CLIENT_EMAIL=your_client_email
FIREBASE_PRIVATE_KEY=your_private_key
FIREBASE_API_KEY=your_api_key
FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
FIREBASE_DATABASE_URL=your_firebase_db_url
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
FIREBASE_APP_ID=your_firebase_app_id
FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id

NEXTAUTH_URL=_your_nextauth_url
NEXTAUTH_SECRET=your_nextauth_secret
NEXT_PUBLIC_API_URL=your_next_public_api_url

3. Refer to the README.md for instructions on running the web app locally.

4. Deploy on a platform of your choice, the easiest method would be using Vercel. Instructions can be found here.

Student Mobile Application

Note that this component will require deployment through the Apple and Google Play stores.

1. Clone the repo as provided.

   git clone https://github.com/MFrackCA/React-Mobile-Student-app.git

2. In the project directory, run npm install to load project dependencies.
3. Start the Expo server

   npx expo start

4. Refer to further development instructions

Additional Resources

Next.js

https://nextjs.org/docs/app

Firebase Cloud Functions

https://firebase.google.com/docs/functions

Expo Go

https://expo.dev/