Attendance

How it works

The project is written using NuxtJS for the frontend and Rust with Actix-web for the backend API. Communication is done using standard REST, as well as websockets for real-time updates in the admin editor. The project is designed with student data security in mind—all sensitive info is end-to-end encrypted.

Admin Flows

• Login as admin using your password

  • Authentication is done using srp6a, a zero-knowledge password proof protocol
  • The admin password also serves as a decryption key AES-GCM to protect sensitive data in the database

• Start attendance for either learning, build, offseason, or demo hours

  • First-time sign ins require students to enter their first and last name, which are encrypted before being stored in the database
  • Subsequent sign ins only require student IDs
  • Records, as well as student data, are keyed by a hash of the student ID

• The editor (server)

  • On the server, websockets are used to push real-time updates to all connected clients
  • PostgreSQL listens for changes using the LISTEN/NOTIFY feature
  • Admins can add or remove hours, or change sign in and sign out times for students

• The editor (client)

  • On the client side, the editor uses ag-grid for the data table UI
  • I moved from a completely custom canvas-based implementation for maintainability reasons
    • I just want to note that the canvas implementation was really cool and super performant when the DOM failed me.

Student Flows

• Login as student using your ID
  • View your hours, collected by the server using the hashed student ID as a key

Usage

Attendance

To start attendance, login as an admin, and go to the attendance tab. From there, you can select outreach (demo), build season, or learning hours.

Editor

To use the editor, login as admin, and go to the editor tab. From there you can:

• Give students hours
• Remove hours from students
• Change sign in and sign out times

These changes will be reflected in the database immediately.

Students

To view your hours, login as a student using your ID, and select the "view hours" option.

Behaviors

The student ID is, by default, five numeric digits. Change this in:

• app/components/forms/StudentId.vue:25

The admin password is, by default, eight alphanumeric characters. Change this in:

• app/components/forms/Password.vue:5
• app/components/forms/Password.vue:58

The UI changes between allowing build, learning, and offseason hours depending on the month. The API doesn't allow incorrect hour types. Change this in:

• src-api/src/http/roster.rs:57-65
• app/pages/attendance/index.vue:10