As Rice students, we frequently run into the issue of going to the laundry room, only to find out there are no washers or dryers available. We wanted to make the process of laundry more streamlined and convenient for Rice students. For this hackathon, we began to build a website that can inform users from each college what laundry machines are open and how much time is left on any machines that are currently in use.
What it does
The website is a prototype that allows users to select a laundry machine as in use and set a timer for how long the machine is supposed to run. Afterwards, it will appear for all users that the machine is in use and how long it will be until the machine is available again. There is a timer tab that allows users to see what machines they are running currently and how long it will be until their laundry is ready in a grid format. There is a settings menu that shows the user's username and residential college and has the ability to logout.
How we built it
The team consisted of four people. We had two people work on the frontend and two people work on the backend. The frontend team started by laying out the UI, and then coded the buttons. We wanted to make a mobile-friendly website, as we anticipate that the majority of users would be using it from their phones. Therefore, we created a large and easy to use touch interface using Bootstrap. Next, we created the buttons for the machines. Finally, we made sure that the username was displayed and that the buttons would change color when needed. We built the backend using a hosting service with a free database. We began by making tables for sign up/log in user information in the database (login and residential college). Next, we worked on making sure the user stays logged in. Next, we worked on storing the times on the washers and dryers. The backend is primarily used to store user information and machine timer data. We worked together in the final stages of the product to make sure that the relevant information was always displayed properly on the front end.
Challenges we ran into
This is first hackathon and we didn't have prior experience in the languages we were using (i.e., most of us had never done web development before). Therefore, we had to learn concepts from scratch during the hackathon. Issues in UI development included formatting. Because we wanted to make a mobile-friendly site, we needed to make the website look accessible for mobile users. We needed to find a way to continuously update the time without having the page continuously reload. To fix it, we used JQuery HTTP requests to be able to update the frontend without having the page refresh itself.
Accomplishments that we're proud of
As we said, this is our first hackathon. This was a great first experience for all us that forced us to think of creative solutions to problems. As we had little experience in these languages prior to these projects, we are extremely proud of everything we've managed to accomplish in this timeframe. We were able to figure out most issues that we encountered regarding coding and bugs. The frontend team worked on making sure that the website was mobile-friendly and able to be accessed on mobile. The backend team worked extensively on coding timer events and making sure that they were synchronized across devices by combining front end and back end use.
What we learned
We learned the basics to several languages which we needed to develop the website in a short period of time. We also learned how to create and update an online database and how to connect our frontend and backend via an api. We were also forced to come up with more efficient methods of keeping track of our data and thus learned how to delegate certain tasks between our frontend and backend (ie our frontend will refresh every one second to receive and display data from the backend database, thus acting as a timer)
What's next for Rice Laundry App
Currently, the app is user-based and requires the user to input the time data personally. We hope that in the future, the machine itself can send the data to the app. We also want to be able to expand the website so that every college's laundry room is included. Currently, for the prototype, only Duncan's laundry room can be displayed.