Inspiration
Periods are a natural part of life, yet access to feminine hygiene products in public spaces can be inconsistent and stressful, especially in emergencies. We wanted to create a solution that empowers people by showing real-time availability of pads and tampons in restrooms around campus or other facilities. Luna Grid aims to reduce stress and make essential products easily accessible when people need them most.
What it does
Luna Grid provides a live interactive map of women's restrooms, displaying the current stock of pads and tampons in each cabinet. Users can quickly identify which restroom nearby has the products they need. The system is designed for real-time updates using an ESP32 camera in each cabinet, which counts products and updates the map automatically. Privacy is maintained with a servo-controlled flap that covers the camera when the cabinet is opened.
How we built it
- Frontend: Next.js 13 with React Leaflet for the interactive map.
- Data: Used mock data to simulate a variety of cabinet product counts. Then we incoproated Supabase to create an API endpoint for images captured by ESP32 to reflect the count of pads and tampons live on the website.
- Hardware: ESP32 with camera for scanning pads and tampons in the cabinets, plus a photoresistor and servo for privacy management.
- Object Identification: Using the Edge Impulse platform, we train and deploy a machine learning model to run directly on the ESP32-CAM. Uploaded photos (30-50+ images per class — pads, tampons, empty), assigned labels, trained the model, and checked accuracy. (future implementation)
- Styling: External CSS for map and popup styling.
- Deployment: Vercel for hosting the live site, ready to integrate the ESP32 backend later.
Challenges we ran into
- Client-only rendering for Leaflet: Leaflet doesn’t work with server-side rendering, so we had to use dynamic imports to ensure the map loads only in the browser.
- Privacy concerns: Ensuring the camera respects privacy required designing a mechanism for a servo flap that hides the camera when the cabinet is opened.
- Vercel deployment: Initially, the Next.js framework was not detected because the project was inside a subfolder, which caused 404 errors. We resolved this by correctly setting the root directory.
- Model training: The view of the ESP32-CAM was very dim and grainy so we had to tinker with settings and cabinet lighting in an attempt to get the images as clear and consistent as we could.
Accomplishments that we're proud of
- Successfully created a fully functional interactive map with color-coded markers for pad and tampon stock levels.
- Designed the privacy mechanism concept for the camera using a servo and photoresistor.
- Built a Vercel-deployable Next.js project with client-only Leaflet rendering, mock data, and clear external CSS styling.
- Created a foundation that can easily integrate ESP32 and real-time backend data. (future implementation)
- Integrated ESP32 cameras for automatic product counting in cabinets. (future implementation)
- Built a backend database to store real-time counts.
What we learned
- How to dynamically load Leaflet in a Next.js app to avoid SSR issues.
- Best practices for client-only components in Next.js.
- How to structure a project for Vercel deployment when the project isn’t at the repository root.
- How to design a hardware + software workflow that maintains privacy while providing live IoT updates.
- The importance of mock data for rapid frontend development before backend integration.
What's next for Luna Grid
- Redesign of the structure so it is dispensor based and change mechanisms so users can interact and grab products with ease.
- Implement notifications when stock is low so staff are alereted to restock restrooms.
- Add user location awareness to suggest the nearest stocked restroom.
- Expand to other public facilities beyond campus, creating a network of live hygiene supply maps.
Log in or sign up for Devpost to join the conversation.