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

+ 4 more
Share this project: