Skip to content
logonoff edited this page Aug 16, 2023 · 5 revisions

Project Overview

Introduction

This document describes the Hacklab Booking System. It outlines its high-level purpose, design, and documentation for the backend API and frontend components. There is also a brief software bill of materials and a rationale for each dependency.

Revision History

Version Date Changelog
2.1 2023-08-17 Final document
2.0 2023-06-07 Initial release

Background and Motivation

The Hacklab is a space for students and student organizations to work, socialize, learn, and develop their skills. As of now, few groups can use Hacklab for meetings because it requires TCard access. Our solution makes Hacklab a more accessible place for everyone who needs it. For example, groups for upper-year courses may want Hacklab to host standups but are unable due to access control restrictions on Hacklab. To allow clubs and student groups to access the Hacklab for these meetings, we proposed a booking system allowing students to book the Hacklab. Any current bookings may then be viewed on the Hacklab iPad that will be placed in front of the Hacklab, alerting students of private meeting occupancy. The Hacklab Booking System project from Winter 2023 is the solution to this problem, but it currently needs features and stability for production deployment.

Scope

The goal of the Hacklab Booking System is to make it ready for production use. First and foremost, a rewrite of the backend server is needed to scale better with users and rooms. For instance, some backend routes currently run at O(n) with respect to the number of users, which would be unacceptable for a production environment. Another issue is that our backend routes are integrated too tightly with the frontend, which makes our API less extensible for people who would like to use it. Our proposed solution is to migrate the current database from MongoDB to PostgreSQL.

Next, the current booking system allows faculty to approve and deny requests; however, there is only one avenue for notifications–email, which not everyone may check frequently. This issue may be solved by adding more venues for notifications, including Discord, Slack, and Web notifications via service workers. Furthermore, the user experience for request approvers to approve and deny requests in the notification itself is also improved.

Finally, the code quality of the existing codebase is improved by using TypeScript, which would increase the readability and predictability of our codebase. There is also a GitHub Wiki to document backend routes and functions to improve maintainability for future teams, decreasing the need to first acquire tribal knowledge. This would allow our booking system to be safely deployed for the Hacklab for years to come.

System Overview

Technology Stack

Tech Stack diagram

A full software bill of materials may be found in the backend package.json, the frontend package.json, and in the Dockerfiles of both.

For our backend and frontend, we aim to use TypeScript as much as possible for easier readability. We also aim to use ESLint as a pre-commit hoot for the same reason.

Our code will be hosted on our GitHub repository and production servers are deployed with Docker Compose using Docker containers.

The Docker containers will be hosted in a UofT-provided virtual machine, and authentication is handled by UofT's SSO auth, Shibboleth.

Frontend

  • React - A component-based library for JavaScript. Our frontend is bootstrapped with create-react-app.
  • Material UI - A majority of our frontend components are from MaterialUI, which are a library of components implementing Google's Material Design.
  • Axios - An HTTP client for JavaScript, which simplifies network requests to the backend API.
  • DayJS - Required for the MaterialUI DatePicker component to work. Also simplifies the manipulation of dates for the booking pages.
  • Apple iPad - For displaying current events in front of Hacklab

The Material UI component library was chosen as our project is under GDSC UTM, a club affiliated with Google. Thus, a component library that mimics Google's design language will better align with our organization's design.

Backend

  • NGINX - Reverse proxy that allows our web app to be hosted on port 443.
  • NodeJS - JavaScript on server side 😋
  • ExpressJS - An RESTful backend web application framework for NodeJS.
  • Prisma - Next-generation Node.js and TypeScript ORM that supports PostgreSQL

Database

  • PostgreSQL - An open source SQL-compliant relational database system. A relational database was chosen for this project as a replacement for the previous MongoDB, as our dataset is highly relational. For instance, each request has an author (which is a User), a Group, and a Room. Groups store different arrays for Users depending on whether they're a member, invited, or a group manager, and so on.