HoNUS Facility Checker

Login Page
Main Page
Hall Facilities
Block Facilities

Inspiration

After one too many treks to the laundrette only to find that every washing machine was taken, our team began to lament the inability to check beforehand if there were any vacancies. Fortunately, as developers we need not only complain about our situation, but instead we could take charge and attempt to solve it. We initially envisioned a website with which we could check washing machine vacancies, but we quickly realised that we could expand the functionality to cover not just the laundrette but also many other hall facilities where the problem is frequent.

What it does

The HoNUS Facility Checker reads data from Firebase and compiles it into a easily readable format for the user. It requires the user to sign in to not only verify that they're a member of HoNUS, but also to check which hall and block they're in to streamline them to the correct information.

How we built it

The web design was done entirely on Figma. The process began with a user flow sketch, of which two were drawn up before eventually deciding on the current user flow design. Then, a wireframe was made to decide on the placement of every element such that the website would be intuitive and simple to use. Finally, a prototype was made to test the UX in action and to showcase to the frontend and backend how the website would function.

From the backend side of things, we used imported packages from flask and pyrebase in python to integrate the frontend solution to the database. For each route that we want the user to utilise within the website, we then created methods allowing the database to be updated, for example login/logout methods, as well as when the user is required to update vacancy of a facility when they are using it.

The frontend was built with React JS by using the Material UI library. Custom modifications were made to the theme to fit that designed on Figma. Protected routes were implemented so unauthenticated users can be redirected back to the login page.

Finally, the project was deployed on AWS Lightsail and Google Cloud Platform Compute Engine.

Challenges we ran into

In the midst of deploying our website, especially the frontend part, the npm service from Node.js went down. As a result, there was some delay in bringing our project live.

Accomplishments that we're proud of

Completing the entire process from idea creation to website deployment within 3 days is definitely an accomplishment for the team, as most of the tools we used to build the project were new to us and at times it was essentially learning everything from scratch.

What we learned

Web design is a collaborative process and should not be done in a vacuum. The designer should work in a team whenever possible. When designing alone, they should still approach colleagues and users to occasionally bounce ideas off to gain new perspectives.

Before starting on a backend project, the backend developer should plan out all the methods that are required. This allows the coding process to be more straightforward.

When working on the frontend project, the frontend developer should engage in more discussion with the web designer while implementing the project so that feedback can be provided.

What's next for HoNUS Facility Checker

Instead of merely showing the vacancy of the facilities, we can do more by allowing users to input their estimated amount of time they will be using the facility, allowing the next user to know when they will be able to access the facility.