Inspiration
Finding a clean, quiet, and accessible restroom on a massive campus like Ohio State University is surprisingly difficult. Students constantly move between buildings, floors, and class changes, and there’s no centralized way to know which bathrooms are:
- clean
- quiet
- crowded
- accessible
- or even nearby
The idea came from a common student frustration:
“I just want to know where the clean bathrooms are before I get there.”
So I built a tool that gives OSU students real-time insights into restroom quality — powered by student feedback and smart data ranking.
How I Built the Project
To calculate an overall “Bathroom Quality Score,” I created a weighted formula combining cleanliness, noise, crowding, and positive feedback.
Using LaTeX, the scoring formula is:
[ \text{Score} = 0.5C + 0.2(1 - N) + 0.2(1 - R) + 0.1P ]
Where:
- (C) = average cleanliness
- (N) = average noise
- (R) = average crowding
- (P) = number of positive quick-feedback entries
This formula helped produce consistent, data-driven rankings for restrooms across OSU’s campus.
What I Learned
🧩 Working with AI-generated code in a real project
Lovable generated strong starting points, but I had to learn how to:
- refactor AI-generated components
- fix dependency issues
- remove unused or conflicting code
- understand how AI organizes project structure
⚡ Realtime data syncing
Implementing Supabase Realtime taught me how to:
- subscribe to database channels
- merge updates into UI state
- avoid infinite render loops
- prevent stale or duplicated data
🎨 Designing for clarity and usability
Bathrooms are a quick-decision UX problem. I learned how to use:
- color signals
- spacing
- icons
- animations
…to make information immediately scannable.
🔒 Policy-aware design
Due to OSU’s November 2024 restroom regulation changes, I adapted the system to strictly support:
- Men’s restrooms
- Women’s restrooms
and removed all gender-neutral logic from the database, filters, UI, and seed data.
Challenges I Faced
- Handling Supabase configuration errors and environment setup
- Fixing runtime crashes such as
Cannot read properties of null (reading 'useRef') - Ensuring real-time updates did not cause UI flickering
- Balancing AI-generated code with manual cleanup and structure
- Designing a consistent OSU-style UI using ShadCN components
Built With
- custom-css-animations
- date-fns
- frontend:-react
- git
- hosting:
- inter-font-(google-fonts)
- lovable
- lucide-react
- npm/bun
- osu-scarlet-color-palette-(#bb0000)-development-tools:-eslint
- postcss
- radix-ui
- react-hook-form
- react-router
- realtime-subscriptions)-styling-&-design:-shadcn/ui-components
- sonner-backend-&-database:-supabase-(postgresql-with-row-level-security
- tailwind-css
- tanstack-query
- typescript
- vite
- zod
Log in or sign up for Devpost to join the conversation.