X Marks the Spot

Home Screen for webapp

Inspiration

Our inspirations for this project are connected with XHacks' theme of bridging together the past, present, and future. While brainstorming things we could build, a compass stuck out to us as an obsolete technology that could be made fun and relevant with modern features. Then, we wanted to incorporate elements from the past that would be an interesting theme for our product; and at XHacks, what better than a classic treasure map, where X marks the spot?

Thus, the idea was born for a compass that could lead you on "treasure hunt" wherever you are. This was perfect for us, as it brought back our childhood dreams of going on exciting adventures, and also made it easier to plan trips and discover new places.

What it does

X Marks the Spot is a compass that connects to your phone to automatically find nearby points of interests like restaurants, landmarks, parks, and stores. Starting an "adventure" will cause the compass to lock onto a point of interest and always point towards that location. The only way to find out what place the compass is leading you to is to follow the compass and walk your way over.

In the webapp for X Marks the Spot, you can configure the distance radius of your adventure, so how far you want to travel, as well as the number of destinations you want to stop by along the way. Thus our compass serves a dual purpose of being a fun way of going outside and getting some steps in, as well as plan a unique kind of trip.

How we built it

We used ESP32 with IMU, and servos for the physical compass, and Google Maps API with Gemini for trip information generation and directions. Our webapp was built in HTML code.

Challenges we ran into

Since we had custom UI elements and graphics, we first designed the webapp in Figma, but thus we struggled a lot with carrying the Figma mockup over to HTML code. Some elements were not at the right resolution, or special effects were lost, or the placements were off. We also struggled a lot with the hardware side; at one point we accidentally shorted the ESP32 by having batteries attached while connected to the computer, so we had to restart with another ESP32.

Accomplishments that we're proud of

We had our amazing artist draw out all the graphics by herself, creating a truly unique experience that's not just another AI generated project. It meant the visual elements and style of our project really tied into the theme we were going for.

What we learned

Sometimes ambitions in UI had to be sacrificed in favour of ease of transfer to code and efficiency. We also now better understood the difficulties of building complex hardware in a short period of time, and learned that it is best to get started with it earlier rather than later.

What's next for X Marks the Spot

We had many more ideas for features for X Marks the Spot that we did not have the time to deliver, but could add in the future. These included a gamification aspect with in-app currency, a social media feature that could connect you with friends and see where they were travelling to, and a multiplayer function that would let your friends choose their own "treasure spot" for your compass to point to lead you to.

Tech stack: React PWA Web App Web socket for communication between compass and phone.