Social AR incentives for goal tracking

Habit tracker design
Screenshot from running application
QR code to Project

Inspiration 💡🎆

We're at the very beginning of the year, a time for many to set goals! What could goal-tracking look like in the future, and with help of AR?
Could it be, for example, a social version of AR + bullet journaling? I have several friends who are into bullet journaling, myself included, and I know how rewarding it is to fill all todos and habit trackers that you prepared. It's also quite a social thing, you sometimes meet up, chat, and fill the pages (when you're lucky to live close by). So here came the idea of a social and futuristic version of a bullet journal, with the first use case of acting as a habit tracker.

What it does

Users team up and configure a custom habit tracker in the application, and print the tracker image.
Each day the AR app can be used to view the habit tracker through the user's phone and:
- Log check marks on your goals
- See the progress of your goal peers

How we built it 🛠️

List of platforms, asset libraries, and tools:

SDK: ZapWorks Universal AR SDK via the library zappar-react-three-fiber.
Used the example project zappar-react-three-fiber-image-tracking-webpack-bootstrap-typescript as base.
Firestore Database (free tier), provided by Firebase.
For a full list of dependencies of the web app, please see this file.

Steps to build the project:
-> Designed the habit tracker in Figma, and used ZapWorks CLI to train a tracker file that was then included in the source code. The design was also printed in A4 format so it could be tested during development.
-> First verified that the Image tracking worked by placing the background (same design) and some text and image content in the ZapparCanvas.
-> Then introduced logic and the use of Firestore Database to load content dynamically based on what social group was created/entered.
-> Introduced and improved AR interaction, like clicking to mark today's goal as completed.

Challenges we ran into ⛓️

Placement of action buttons and content. This was a bit of trial and error, however - please see the "what's next section" for ideas for improvements on it!
Using onClick on the AR elements didn't work at first, which blocked me for some time from adding interaction logic. Luckily the ZapWorks Forum provided the answer to it that was to make sure to use version 2.1.1. or higher of the SDK.

Accomplishments that we're proud of 🏆

Finishing an MVP of the application! From brainstorming the idea to a version that works, both the VR aspect with the image tracking and interaction, but also that people can already use it by creating groups and inviting each other by the group code.

What we learned 📚

Working practically with AR!
Also, always good with some web app practice. :)

What's next for Social AR incentives for goal tracking ⏭️

Extend dynamic features to create custom habit trackers.
- To really go for the bullet journal approach, it would be neat if users can upload their own designs of the tracker. I'd set up a web service that has the ZapWorks CLI installed and run the train command on user-uploaded tracker images and be bound to the group instance in Firebase. The placement of content could be defined with bounding boxes on a new page in the web app.
Save stats and a print of the page at the end of the month, so the end result can be printed or stored digitally.
React to each other's activity by e.g: press and hold someone else's daily check mark and record a voice message or video that will pop up the next time the user opens the app.
Add gamification like:
- more visual effects when logging, and custom sounds.
- game/show off on the last day of the month. Each daily check could translate into valuable game assets.