What Is It?

PocketSpace is a QR code based web application that requires no download to view personalized AR profiles. You register an account and a QR code for you is generated. What you do with the code is up to you! You can print it out and carry it in your wallet, or you can save it to your phone. Anyone with a phone can then scan your QR code to view your personal PocketSpace in augmented reality. All of this is done without anyone having to download an app; the AR experience is powered by mobile web browsers. For now, your PocketSpace can only contain your Facebook profile information and the ability to add as a friend, but we were aiming to allow for full customization of the space, such as editing its design, and sharing links/images.

What Inspired Us

AR is a rapidly growing field and we wanted to . At the same time, we were curious as to what kind of interesting twist we could apply to the Facebook API, and this is what we came up with!

What We Learnt

We learned how to work with AR, the Facebook Graph API, and Firebase. We had not dabbled with any of these in the past except Firebase, but we certainly learned some new things with Firebase, such as authentication and OAuth2.

How We Built It

  • We used the AR.js library to render the AR experience on mobile web browsers.
  • The registration and backend was handled by Firebase
  • The client side was written using React
  • When users register, a QR code would be generated based on their userId
  • The QR code holds a link to the webapp, which when scanned on a mobile device, will enable the AR experience

Challenges We Faced

We faced many devastating challenges during the development process. AR is still a relatively new technology, and so it was quite difficult to shape the layout of the PocketSpaces to our liking. Another big challenge was connecting the Facebook API to the AR interface.

Share this project: