AR Postcard | Devpost

Home Page
Creation step 1
Creation step 2
Creation step 3
View Postcard in AR

Inspiration

Hey, many of us are from an era where we used to send postcards to our friends, I mean many of us still do, but that was the mainstream way of showing affection back then. We'd decorate postcards, customize them, put on a stamp that would validate it according to the local laws and then it'll be sent to practically anyone you would want to. We were rooting for that experience in this modern world. And AR/VR are definitely the technologies of the modern time. So we were like won't it be great to make a fusion of both, and come up with something that'll serve as postcards, but with all the information showing through an AR way, to make it spicy and exciting. That is how we came up with our idea AR postcards, straightforward and filled with fun!!

What it does

AR postcards serves as a platform of its own, a social media platform where users can send and scan postcards from their dearest friends. A user can create a personalised postcard, where they can upload the assets (4 images, 1 video and a smol note) as the main content, and then they get to design and cutomise it using AR. They can choose the color, texture, font color of their card, and put on a small message to be displayed over the card, just like normal conventional cards. After this setup it done, the users can get their cards by downloading them, which they can personally print or just send to whosoever they want. Also, once can't really send videos over postcard right? We've made that possible as well.

Image of postcard

The next walkthrough is the scan part. So, each card has a QR code over it, as you can see in the image. Scanning that QR would make you land on our scan page, with the code passed in the url parameter. After pointing the camera on the card, more specifically the landscape stamp that we've made, the users would see a lot of things flying in the sky, in Augmented Reality. They'll see a video which they can play and pause, a cube which will have the images that were uploaded by the sender, and an envelope. The cool thing about envelope is that it is also made keeping the conventional way in mind. At first it'll be unopened, then after tapping it, the envelope would open and you can see the short note on the page that gets out of it. You can tap back again to close it. We're pretty suree if someone gets sent such a personalised surprise, they'll be really happy!

How we built it

Well here comes the interesting part, the project integrates many services and APIs from Zappar as well as third party, and each of them is of fatal importance.

The project has been made in vanilla js, earlier we tried react but then found vanilla js to be better for this use case.
We've used Zapworks AFrame for making the scenes and different objects like the postcard thing, the scan objects like the cube and video section, as well as the envelope.
Zapworks cli was used to serve the pages while testing and training our personal .zpt type file from custom image.
Zapworks was also used to host the project on the internet.
Firebase was used extensively to store all the data of the postcards, and that is what is queried each time while uploading assets or retrieving them while scanning. In firebase, we used firestore, storage and hosting services.
Github was used as our git provider
We used pexels and freepik for getting our assets.

We feel that the technicalities put into it also makes us a worthy contender for the prize of best technical complexity.

Challenges we ran into

We ran into a couple of challenges while making the project, given the fact that it was our first ever proper Augmented Reality web project. Some of the challenges faced were:-

Putting images and videos based on dynamic data was a very difficult experience for us to implement, such as bypassing the CORS access error and changing the entity content dynamically.
Giving customization options to users while making the postcard was throwing many errors at first, which we had to sort out.
Getting the image to show up on postcard while downloading.

Accomplishments that we're proud of

We're very proud that we were able to integrate it all, make it work and make something that is very unique and exciting on its own. We would love to make it better and flawless over time.

What we learned

This was practically our first time working extensively on AFrame and Zappar, which was a great experience. We utilised the APIs to make cool things that are very exciting. We also learnt how to upload files on internet with CORS access.

What's next for AR Postcard

Our next step would be to definitely make the project better and we are also rooting for one more idea. We would love to make an addition where we'll be shipping physical cards to receiver's address, but that's on a much later stage.