Inspiration

A few of us were used to attending several events and hackathons, and we noticed how much paper waste would occur when event organizers would hang up posters and display countdowns on TVs. These methods of displaying information just seemed to be very temporary and unsustainable. That's when we realized we could use AR to make it easier for event organizers to share their event information through a platform and for participants to see this through their mobile phones.

What it does

Mantis is a web platform for event organizers to organize their event by inputting locations for the signs they want to include--a sustainable alternative for displaying information that doesn't require tearing down posters after the closure of the event--as well as a map / description of the event space for VoiceAI to make navigating the space easier for visually impaired people. What's more, people can view the information from their phones from afar, so this can prevent crowding in areas where visibility is low (such as booths). On the participant (user) side, users can use their phones to walk around the event and see where these signs are in Augmented Reality. For ease of accessibility, users can use our VoiceAI implemented that helps them navigate the space.

How we built it

We used Next.js and TailwindCSS for the frontend of our app where the event organizers can move to specific locations in the event space and place add a sign. This information is stored in MongoDB and sent to an AR server we set up using Python and Node.js. AR was implemented using AR.js using A-frames in our mobile-friendly web app.

Challenges we ran into

All of us were very new to backend development (especially MongoDB) and some of us had never done web development before. Augmented Reality with AR.js was the most challenging aspect of this project since documentation wasn't up-to-date and there were many incompatibilities since all of us had iOS mobile devices (which have many security features set by Apple). It was an extremely dense information-packed night, but in the end we were able to finish an MVP that has the potential to actually save waste and make coordinating events easier for both organizations and users.

Accomplishments that we're proud of

Implementing AR and creating our first full-stack app!

What we learned

All of us had learned a completely new technology during these past two nights. For some of us, it was coming in with 0 web development experience and coming out with knowing how to route Next.js pages together and send information to a backend! For the rest of us, it was learning how to use VoiceAI, AR.js, and implementing a backend for the first time.

What's next for Mantis

Utilizing 3D interactive models rather than text signs for the location-based AR inputs to make it more dynamic.

Built With

Share this project:

Updates