Frontend

Frontend

Local Deployment for Development

A local instance may be deployed either

1. On the host machine using npm, or
2. Using docker-compose.

npm installation

• install npm:

  > npm install npm@latest -g

• install dependencies:

  > cd frontend
  > npm install

• start the app:

  > npm start

Folder structure

Only important files and relevant directories are shown below.

frontend
├── public                      # All public-facing assets/files
│   ├── index.html
├── contexts
│   ├── UserContext.tsx
├── components
│   ├── index.tsx
│   ├── utils.tsx
├── pages
│   ├── Admin
│   ├── Calendar
│   ├── CreateBooking
│   ├── Dashboard
│   ├── Group
│   ├── NotFound
│   └── Settings
│       ├── Webhooks
├── layouts
│   ├── ErrorPage.tsx
│   ├── SubPage.tsx
├── theme
├── axios.ts
└── App.tsx                     # Starting point of the client

Components

Each component is documented using the JSDoc Standard, which allows compatibility with VS Code Intellisense. To learn more about each component, please refer to the components folder and view the JSDoc written in each file.

Human Interface Design

Overview of User Interface

View the original Figma mockup

Student

The groups page can be reached by clicking "Your Groups" on the Dashboard. By clicking "view" on each group card, more information about the group can be viewed.

The booking creation page can be reached by clicking "Book" on the Dashboard. After being prompted some information about the booking, it is created and sent to the select approver for review.

Request tracking changes state from sent, to pending T-Card access, to complete.

Approver

All approvers have to do is click "Approve" or "Deny", then provide a reason for doing so.

Administrator

Administrators can view users who are approved for T-Card access to the Hacklab but do not have it.

User flow

Main flow

When a user logs in, their role is identified by the backend. If the user is new, they are given the student role.

Student flow

Upon being recognized as a student, relevant booking information and user information is retrieved. Students are given the base permissions as shown in the flowchart above.

Approver flow

Upon being recognized as an approver, active request information and user information is retrieved. Approvers are given the base permissions plus permissions to approve/deny requests, as shown in the flowchart above.

Admin flow

Upon being recognized as a admin, active request information and user information is retrieved. Admins are given all permissions as shown in the flowchart above. They also have permission to use a special "Admin" page, where they can view a history of all requests, and modify a list of people who need TCard access to each room which that requires it.

Settings user flow

All users can control the same settings, including webhook notifications, light/dark themes, and profile information.

Group directory user flow

Upon opening the groups' directory, a list of all groups a user is in is shown. Users are also given the opportunity to accept any group invitations they may have, or create a new group. They can also view details groups they may be in.

Create booking user flow

The booking process follows the flow chart process above. When creating a booking, a user has to input an explanation, room, event title, group, and time. Then, they have to select an approver to notify. Upon approval, the request is marked as accepted and TCard access is provided by admins.