134 - Magicard

Bring your cards to life with Magicard!

Comment

Inspiration

Cards are boring and lack emotion. When you talk to someone, you understand so much more by their visual expressions/tone, and it leaves a stronger impact.

What it does

Through Magicard, you're able to create a video of yourself to go along with a card. After printing out the card, the recipient can scan the QR Code on it and view it on their mobile device using AR! They'll be able to see the video you took overlaid on top of the card, which retains the sentimental value of the card while also adding to the experience.

How we built it

We used React and Next.JS for the webapp, Cloudinary for storing the user's recordings and card photos, Niantic's 8th Wall for WebAR, GitHub Issues, Pull Requests, and Branches for collaboration, and lots of boba.

Niantic's 8th Wall was invaluable for our WebAR experience. With it, we were able to add image tracking and AR to our webapp easily. The 8th Wall editor was also really useful for debugging, since it streamed logs from all devices to the editor, allowing access to mobile logs easily (which are usually very hard to access). Overall, 8th Wall made it very easy to create an interactive AR experience, and very easy to set up.

We found GitHub very useful for collaboration. We made use of GitHub Issues as a task list of what needed to be done, and were able to work quickly towards our goal by tackling issues one at a time. Since we were both working on the same project, we used branches and pull requests into the main branch, in order to keep a clean commit history, with each feature separated. This also allowed us to resolve merge conflicts after each feature was done. Finally, we committed often and pushed to GitHub, which allowed us to pull each others' work and work together on it.

Challenges we ran into

We ran into challenges integrating the recording collection with the 8th Wall AR experience. We wanted to pass the video URL into 8th Wall through a QR code, but it was difficult to figure out which parts of the 8th Wall code were able to get the window and modify the loaded video. Eventually, we figured out how to do it -- creating a custom component that would set attributes on its children.

Other than that, we also had issues with 8th Wall videos / images not loading, which we realized were because of a lack of permissions (CORS errors and requiring user action).

Accomplishments that we're proud of

We're proud that we finished the webapp, and that it works! We also both had never used 8th Wall or created Web AR experiences before, so we're proud that we learned a new skill, and were able to successfully integrate it into our webapp.

What we learned

We learned how to create custom AR experiences with 8th Wall, which we both hadn't used before. We also became more familiar with video recording and uploading in the browser.

What's next for Magicard

In the future, we'd like to allow people to create their own custom card designs, allow more personalization, and connecting to printing providers to produce higher quality cards. We'd also like to integrate more of the WebAR experience, maybe with 3D AR characters that appear around the video.

Built With

Share this project:

Updates