Imagine yourself as a weary student on a late Sunday night. You look anxiously at the laundry bin brimming with 2 weeks worth of clothes. Filled with dread, you drag down your clothes three flights of stairs to the laundry room. You enter only to be met with this disappointing sight: all the machines in use. You drop to your knees in defeat. Our project goal is to avoid this situation and save student hours in wasted laundry-lugging time.
Our website is a community-powered interface for residents to view the current status of the machines. Residents use the website the update the status of the machines and the website presents this data to all other residents in the dorms. By showing this information remotely, residents are better informed on machine availability before they leave their dorm.
The front end was built with React.js, HTML, and CSS and the back end was made with mongoDB to hold the information and pymongo plus axios to handle the data.
Our first challenge came in the first minutes of starting the hackathon. With this event being our initial experience in any hackathon, we took a lot of time to set up the tools we would be using in the project. Most of our members had to be taught about github repos, react.js, installing from terminal, and a lot more. Another problem that plagued our entire development process was the web design. Trying to use HTML to perfectly align elements and CSS to make an appealing design was unexpectedly harder than it should have been. Creating the websites felt like a game of whack-a-mole; when one problem was solved, another readily popped up in its place. We struggled to create the appropriate layout for the homepage and laundry page, on top of having to search for colors which would fit the style and theme. We eventually settled on a design that followed the colors of UCI and was visually appealing. The last major issue came from the backend. With all of our experience, trying to connect the front end to the back end was far from a walk in the park. Small problems kept cropping up which prevented the data from our database being understood by the front end. Through a lot of trail and error, we eventually formatted the data so that it could be read and displayed by the front end.
The overall design of the website made major improvements throughout the process. The originally theme for the webpages was default colors with a splash of olive green on the background. When we realized how repulsive this design was, we embraced the "Zot" part of our project and adopted the UC color scheme. In addition to this, we quickly designed a logo for the website. It is simple but creatively utilizes our project idea in the design. For something made in 5 minutes in MS Paint it is surprisingly satisfying.
The time constraints of the Hackathon heightened our focus and forced us to learn many things on the fly. In addition to the experience gained in react, we also learned how a back end connects to the front end. The mentors were also a valuable resource when it came to researching for our project. Their expansive knowledge helped to fill the gaps in our own and assisted our understanding in how full stack development works. The most valuable lesson was that large projects are not impossible, and that working toward completion will eventually result in a final product.
We hope to have all dorms represented by our interface. We also hope to implement many additional features to enhance user experience. Some ideas we have are: graphs to show the times machines are most used, QR codes on each machine for users to quickly access the interface, and a notification system to alert users when their laundry is done.