Waitless

Landing Page
Available Machines
Queue for machine
Machine ready for user

Inspiration

As UCI students, walking into the Anteater Recreation Center (university gym) after 5 pm is dreadful. All the machines and equipment are in use. Asking each person at each machine if you can use the machine after them is a hassle. Many times, someone who may come at the opportune moment takes the spot you had been waiting for. It would be nice if there was a way to enroll in a queue for a wanted machine and know exactly when the machine opens up. In fact, this is an issue with all crowded gyms.

What it does

Introducing, Waitless, an online platform targeted for all crowded gyms. Users will go on the website hosting our web application and sign in with their school ID using their phone. Once they are signed in, they will see a list of available machines, such as bench press, and how many people are in queue for it. The user can then enroll in a queue for a wanted machine. When their turn arrives, they will get a text sent to their phone informing them that the machine is ready for them to use. When the user arrives at the machine, they scan a QR code to confirm they are starting their workout on the machine. When they finish, the user removes themselves from the machine's queue.

How we built it

The decision to build a web app was made so that any mobile device can visit the application through their browser and start using the application. To make a mobile web application, we used HTML, CSS, and client-side JavaScript to dynamically render content on the web page. To store all the gym machines and user data, we use a real-time database through Google Firebase. When additions to the database are made, the web page responds in real-time to show relevant data. We also implemented a local server using Express and Axios so we can call APIs using NodeJS. We used the Twilio API to send text messages from the web page to the user's telephone number.

Challenges we ran into

An important part of the project was to send text messages to the user's phone. We utilized the Twilio API to achieve this. However, the API works with NodeJS and not client-side JavaScript. This means that the client-side code cannot directly call the Twilio API. With this obstacle, we decided to host a local server through Express JS and have the client send an HTTP request to the server. The server will then work with the NodeJS application to call the Twilio API.

A big feature of the application is showing real-time updates to the queues for the different gym machines. After looking into the different platforms and databases that could achieve this task, we decided to use Google Firebase and their Firestore Database for real-time updates. Since Google Firebase had other features such as providing an authentication feature, it worked well with our project. However, none of us had used Google Firebase before so there was a learning curve involved with learning the technicalities and how database operations work.

Additionally, the team members had very limited knowledge of HTML and CSS. Learning these languages and applying them into creating an aesthetic user interface was another challenge.

Accomplishments that we're proud of

Gaining knowledge on combining front-end and back-end technologies into making a full-stack web application in 36 hours is something the whole team is proud of. Learning a new service such as real-time databases and using Google Firebase with making a user-friendly product took time and effort. We were pleased with the end result of the application. Another feature that we are proud of is the text notification. Having the client-side application go through a local server we created to use the Twilio API was an involved process and we are glad we were able to learn it in such a short time.

What we learned

Google Firebase features
Real-time database operations and real-time rendering on the application
Creating a local server
Sending HTTP requests from client-side to server-side code
Prototyping and wireframing the user-interface

What's next for Waitless

To maintain a fair environment for gym-goers using the application, there need to be additional checks so users get the best experience. One example is adding a QR code at each machine which the user will scan using the app, proving they are physically at the machine. This functionality will prevent the user from entering multiple queues and attempting to use multiple machines at the same time, which will make space for other users.

With development, Waitless could function with any gym that assigns ID numbers to its members. In the future, Waitless could include a log-in system that can both be used at any commercial gym as well as track user data like the average amount of time spent at a machine to better waiting time estimates for users in queues. Waitless can also easily be expanded for use at public services such as washing and drying machines in laundromats.

Built With

axios
express.js
googlefirebase
html
javascript
node.js
realtimedatabase
twilio

Submitted to

HackUCI 2022
- Winner Social Good Hack
- Winner Best Product Pitch (MAISS)

Created by

I worked on a lot of the back-end and front-end of this project. The main features that I was able to implement was real-time interaction from the front-end to our Google Firebase Database and updating the website in real time to reflect those changes. I worked together with my teammates in a way to ensure that the features that I was implementing were something the whole team could agree on, and I feel accomplished and proud of the final result :)

Emil Zublin
I came up with the idea for Waitless after my experience going to the Anteater Recreation Center at UCI. I introduced Google Firebase to the team after researching about its use cases and features. I additionally created the local server using ExpressJS and pipelined the HTTP request from the client-side code to the back-end NodeJS code. I organized the team in such a way that we deleted tasks that utilized our strengths and talents.

Adil Murtaza Quamar
I worked on designing, requirement gathering, development (Full-Stack) and testing phases of our project. It was a wonderful experience to create a full-fledged project from scratch by learning new things and implementing them at the same time. I learned how to implement and integrate Google Firebase and Twilio API in this project. I got familiar with the real-time rendering and processing of data by modifying the Firebase database through our JavaScript code from different screens with authentication. I feel accomplished that we completed the project in the timeline and I believe the reason being is the great teamwork, proper discussions on functionalities and using each other's strengths.

Abhishek Jha
I took charge on UI/UX and media production. After discussing what features the app should have, I sketched and produced the interface of the project from the ground up using Adobe Photoshop. I additionally developed and produced the video showcasing the app using Adobe Premiere Pro. I communicated and used team feedback to develop a high quality final design for Waitless.

Brandon Zehao Chan
Lee Austin Uy