Toilets @ Cornell

Inspiration

The idea for this project stemmed from a common experience on campus: finding a clean, accessible bathroom can sometimes be tricky. We wanted to create a useful tool for Cornell students to locate and review bathrooms around campus, making it easier for everyone to find the best spots. This project combines our passion for technology and a simple, yet practical, solution to an everyday problem.

What it does

Toilets@Cornell is a web app that helps students and visitors find the best bathrooms on campus. It allows users to browse and filter bathrooms by location, gender, and floor, view ratings and reviews, and leave their own feedback. The app dynamically updates bathroom rankings based on user reviews and recalculates average ratings in real-time, providing an up-to-date guide for finding clean, accessible restrooms across Cornell's campus. With a user-friendly interface and interactive features, it serves as a practical tool for navigating campus facilities efficiently.

How we built it

The project was built using React for the frontend, with components like BathroomList and BathroomDetail rendering bathroom data dynamically. The backend was powered by Express.js, which served bathroom data stored in a JSON file and handled POST requests for adding reviews. We used Node.js to handle the server-side logic and incorporated CORS to allow cross-origin requests between the frontend and backend.

Challenges we ran into

One of the biggest challenges we faced was implementing a dynamic rating system that updated both the individual bathroom ratings and the overall ranking based on user reviews. Additionally, managing state between components and ensuring the backend properly stored and updated data without using a database was tricky but rewarding. Debugging CORS issues between the frontend and backend also took some effort to resolve.

Accomplishments that we're proud of

We're proud of successfully building a full-stack web app that dynamically updates bathroom rankings based on user reviews. Managing real-time updates and recalculating average ratings was a rewarding achievement, especially when combined with seamless state management in React and backend integration via RESTful APIs.

What we learned

Throughout this project, we deepened our understanding of full-stack development, particularly in building a React frontend integrated with an Express.js backend. We learned how to fetch and manage data using RESTful APIs, store data in a JSON file, and handle dynamic updates like recalculating bathroom ratings after each review. Additionally, we gained experience in user interface design, ensuring the site is intuitive and easy to navigate with features like pagination, filtering, and sorting.

What's next for Toilets @ Cornell

Next for Toilets@Cornell is transitioning to a database like MongoDB for scalable data storage and improved performance. We plan to add user authentication for personalized reviews and moderation, and integrate an interactive campus map to make finding bathrooms easier. Optimizing for mobile responsiveness and offering more advanced search filters (like cleanliness or gender-neutral options) will enhance the user experience. These updates aim to make Toilets@Cornell a more comprehensive and indispensable tool for students and visitors alike.