TandasFind

• 

  Sign-in form

• 

  Log-in form

• 

  Search bar

• 

  Map with filters disabled

• 

  Map with filters enabled

• 

  Toilet community summary

• 

  Toilet rating submission form

• 

  Toilet rating submission confirmation

Inspiration behind TandasFind

The idea for TandasFind came from a very real, everyday frustration: finding a clean public restroom is often a gamble.

While our cities are developing rapidly, the basic maintenance of public facilities hasn't always kept up, especially in Malaysia. For many people, especially women, this creates a quiet but serious daily problem. It is incredibly common for women to just "hold it in" rather than deal with a noticeably unhygienic toilet. Over time, this fear of dirty restrooms could lead to actual health issues, like urinary tract infections and unnecessary physical discomfort.

I wanted to build a practical, grounded solution to this. TandasFind was created to take the guesswork out of finding a decent restroom. By relying on a community-driven map, users can share data on cleanliness and accessibility. It is a straightforward way to help each other avoid the bad facilities, highlight the good ones, and make it easier for everyone to find a safe, clean place to go.

In addition, this could serve to motivate and encourage businesses to place more focus on the maintenance and upkeep of their restrooms by turning a private oversight into a public metric. When cleanliness and accessibility - like having proper sanitary bins, working bidets, or nursing rooms, become visible community data, it naturally incentivizes a higher standard.

Ultimately, TandasFind isn't just a map - it's a tool to collectively raise the standard for public facilities across Malaysia.

What TandasFind Does

TandasFind is a community-driven map application focused on the Malaysia that helps users locate and evaluate restroom facilities. Built using OpenStreetMap data, the platform treats local points of interests, such as shops, malls, and restaurants, as potential toilet locations.

When a user selects a location, they can view a detailed summary of the community ratings for that toilet, including an overall cleanliness rating, the access type (Public, Patron-Only, or Paid), and a community-verified confidence score for specific amenities. The application tracks highly localized needs, categorizing data into internal facilities like bidets, sanitary bins, and menstrual products, as well as external features like OKU accessibility and nursing rooms. Through an integrated rating system, users can submit real-time evaluations, report non-existent toilets to hide them from the map, and filter their search results to meet their exact hygiene and accessibility requirements.

How TandasFind Was Built

TandasFind is built as a lightweight, purely client-side web application using HTML, CSS, and modular Vanilla JavaScript to prioritize performance and responsiveness. For the core mapping interface, the application integrates Leaflet.js alongside Stadia Maps for base tile rendering, ensuring smooth navigation and rapid load times.

Rather than relying on a static, hardcoded database, the platform dynamically sources location data using the OpenStreetMap (OSM) Overpass API. It queries named Points of Interest (POIs) directly within the user's viewport to identify potential restroom locations. Additionally, Nominatim is implemented to power live, as-you-type search functionality and reverse geocoding for accurate address displays.

To manage the crowdsourced data, the application utilizes Firebase Cloud Firestore. Firestore acts as the real-time backend, securely handling user authentication, star ratings, access types, and facility verifications. To ensure system resilience against third-party API instability, a custom fetching utility was engineered with exponential backoff and automatic mirror cycling. If one Overpass endpoint fails, the system silently retries across alternative servers to maintain uninterrupted access to map data.

Challenges Faced

Relying on the OpenStreetMap Overpass API for live spatial data presented significant stability issues, as endpoints frequently time out or fail under load. To ensure continuous access, we engineered a custom fetching utility that implements unlimited retries with exponential backoff. The system automatically cycles through four different Overpass mirror servers, preventing a single dead endpoint from blocking the application.

In addition, achieving precise UI behavior with Leaflet's map panning required overcoming specific coordinate math challenges. Centering the custom popup cards smoothly on click involved calculating accurate panBy offsets, which required subtracting the target coordinates from the anchor to prevent the map from panning in the wrong direction and pushing the popup off-screen. Additionally, we implemented a vertical margin clamp to guarantee that taller detail cards would not be cut off at the top edge on smaller screens.

Accomplishments

I was able to successfully engineer a highly fault-tolerant fetching utility for the OpenStreetMap Overpass API. To prevent application downtime during third-party server failures, the system automatically cycles through multiple mirror servers utilizing exponential backoff. This architectural decision ensures the mapping interface remains continuously functional and reliable for end users.

Besides that, I am particularly proud of seamlessly bridging static spatial data with real-time community insights. By integrating Firebase Cloud Firestore, I transitioned the application from a standard location viewer into a live, crowdsourced database. The backend architecture successfully aggregates individual user votes and translates them into actionable confidence percentages for specific sanitation facilities.

Lessons Learnt

Through building TandasFind, I significantly deepened my understanding of resilient API management and asynchronous JavaScript. I learned how to handle unstable third-party endpoints by engineering custom fetch utilities that utilize exponential backoff and mirror cycling. Additionally, I gained valuable experience in managing complex promise chains and request superseding, ensuring that delayed server responses wouldn't overwrite newer user interactions on the map.

Moreover, developing the application entirely in Vanilla HTML, CSS, and JavaScript strengthened my core DOM manipulation and state management skills. I learned how to effectively bridge a real-time NoSQL backend like Firebase Cloud Firestore with a custom frontend, writing logic to aggregate crowdsourced data and compute confidence percentages without relying on heavy frontend frameworks.

What's next for TandasFind

Moving forward, the roadmap for TandasFind focuses heavily on expanding core functionality and refining data accuracy. I plan to introduce a feature allowing users to manually add custom toilet locations that may not yet exist on the map. To enhance the application's practicality, integrated navigation will be implemented to guide users directly to their chosen facilities. Additionally, the rating system requires refinement to address demographic data skew; for instance, male users cannot accurately verify the presence of menstrual products or sanitary bins in women's restrooms. The data architecture will be updated to account for these specific perspectives. I will also introduce time-sensitive ratings, ensuring that recent maintenance improvements or facility upgrades carry more weight in the system than outdated reviews.

On the user experience and community front, the interface will be upgraded with richer visual displays to better represent various restroom types and their specific facilities. To foster a dedicated user base, I will implement deeper profile customizations alongside gamified elements, rewarding users for their consistent and accurate contributions. Finally, to maximize the platform's local impact, TandasFind's evaluation metrics will be explicitly aligned with Malaysia's "BMW" (Bersih, Menawan, Wangi) hygiene standards. This alignment will position the application as a critical tool for promoting and maintaining top-tier public sanitation infrastructure.

Built With

• firestore
• leaflet.js
• openstreetmap
• overpass-openstreetmap
• stadia-maps