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
Share this project:

Updates