ARMarker

• 

  Working together

• 

  Webpage main UI

Inspiration

We were inspired by a video game, Death Stranding, where it allowed players to place flags and messages in the in-game world to communicate with others. We found the concept immensely captivating and decided to apply it to a real world setting.

What it does

ARMarker allows anyone with a phone and access to the internet to both place messages and see other users' placed messages. This is all done in an augmented reality environment displayed on the web app. Users can see, in a circle, all of the messages at their location. They would also use the AR environment to enter a message and place it.

How we built it

We built it by using React as the frontend and Firebase as the backend. Hosted by Firebase, the GPS database is called upon for the accurate locations of each message when displayed in the AR, and to store newly created messages for the future. The transfer of geolocation data from the user's phone to the backend is done via an API.

Challenges we ran into

Some prominent challenges encountered was hosting the server in the first place. Although Firebase hosting took care of the compatibility with the backend, a significant debugging process was required. Another problem was configuring the API, where trying to call the backend fails because of false or non-existent addresses.

Accomplishments that we're proud of

Despite the many challenges, we as a team have managed to finish the project on time and within the scope of our original vision.

What we learned

We learned many things, such as how to implement navigation and basic UI structures in the frontend, along with an AR view for displaying flags in augmented reality.

What's next for ARMarker

For future improvements, we could implement a like system to filter out the non-useful messages from general view, a time limit for messages to expire, and a user account and login system.

Built With

• firebase
• react
• three.js