Hidden Gems

Inspiration

As explorers, we crave experiences beyond the typical tourist traps, places that reflect the heart of a community. We built Hidden Gems to help people discover and share these underrated spots. Whether it's a cozy café, a hole-in-the-wall lunch joint, or a scenic overlook, the app empowers locals and travelers alike to crowdsource the real, authentic experiences that make a place special.

What it does

Hidden Gems is a crowdsourced interactive map that lets users discover, add, and share hidden local spots. Users can tap on the map to add a new gem, complete with a name, description, tags (like “Breakfast” or “Cafe”), and a price range. They can also filter existing locations by tag, price, or distance from a selected center point. Each gem is stored in Firebase Firestore, so the map updates in real time across all users. It’s a simple and intuitive way to find authentic experiences nearby—powered by the community.

How we built it

We built Hidden Gems using React and Leaflet to create an interactive map interface, paired with Firebase Firestore for real-time data storage and syncing. Users can add locations by clicking on the map, which triggers a custom form component built with React hooks. All gem data—name, description, tags, price, and coordinates—is stored in Firestore using Firebase’s SDK. We also implemented features to filter gems by tag, price, and proximity, using the Haversine formula to calculate distance from a selected center point. The app supports editing and deleting gems and displays markers dynamically based on user input.

Challenges we ran into

One of the biggest challenges was working with Firebase Firestore. Early on, we thought gems were being saved, but they weren’t appearing in the database—this was due to missing location data and project misconfigurations. It took time to debug the structure of our data and confirm that we were writing to the correct Firestore instance. Another ongoing challenge is deployment: while the app works locally, we’re still struggling to correctly deploy it in a way that allows users to write to the database. We suspect this has to do with Firebase project permissions, environments, or configuration inconsistencies between local and production.

Accomplishments that we're proud of

We’re proud of building a fully functional and user-friendly app that allows people to collaboratively discover and share hidden gems in their community. From integrating Leaflet with React to setting up real-time database syncing with Firebase Firestore, we overcame several technical hurdles to make the app dynamic and interactive. Features like distance-based filtering, tag-based discovery, and live editing/deletion of gems all came together smoothly. It’s rewarding to see the vision of a crowdsourced map take shape with solid functionality.

What we learned

We learned a lot about working with Firebase, especially the importance of proper configuration when dealing with project environments, rules, and permissions. Debugging Firestore writes taught us to pay close attention to the structure and completeness of the data we’re submitting. We also deepened our understanding of React hooks, component-driven design, and integrating third-party libraries like Leaflet for geospatial interaction. Most importantly, we learned how to work through complex issues methodically, both individually and as a team.

What's next for Hidden Gems

Next, we want to fully deploy Hidden Gems so users can contribute in real-time from anywhere. We'll also improve the user experience with authentication, allowing users to manage their own submissions. Other planned features include image uploads, a review/rating system, and mobile responsiveness for on-the-go discovery. Long term, we hope to build a community-driven platform that uncovers the best under-the-radar places in every city.

Built With

• css
• firestore
• html
• javascript
• leaflet.js
• react