David Trinh

Appearance

The Creation of Zagrock ​

Covid Times ​

Around the time when the Covid pandemic hit, I was looking for something to do while I was stuck at home. So I thought about creating a project, but not just any project. There was one project that I had wanted to work on for a while, but I never really had the time to get around to it.

A couple of years before Covid, I took a small step toward creating this project. That step was a 3D avatar demo, which allowed users to customize a 3D avatar by changing hair color, eye color, etc. This project was built using Vue 2 and BabylonJS. It was used as part of a technical demo for a lunch-and-learn at my workplace at the time, as well as a proof of concept that something like this was possible on the web.

Fast forward to the Covid shutdown — I decided now would be a good time to build upon that project.

Thus, Zagrock was born.

So What is Zagrock? ​

Zagrock is a 3D avatar-based community platform.

Within Zagrock, you select a 3D avatar that represents you. You can customize certain features of this avatar, such as hair color, eye color, etc.

You can also customize your avatar’s cosmetics, such as choosing a certain hat or sweater. You have up to three cosmetic slots to choose from, so choose wisely!

Your 3D avatar appears when you make posts and comments in the community. Each time you create a post or comment, you can potentially be rewarded with a virtual currency (not a cryptocurrency) called Bolt, which can be used to purchase cosmetics for your avatar from the cosmetic store.

Inspiration Behind Zagrock ​

I’ve always wanted to create a community-based web application. As a kid, I ran several Pokémon forums on the InvisionFree platform.

During my last year of college, I also lived in a dorm centered around community. I really enjoyed my time there and made so many great memories. That experience stuck with me.

So I wanted this project to be centered around community, but also give users a creative way to represent themselves.

I used to play a game called Team Fortress 2, which allows you to heavily customize your characters. I built a similar customization system so users could personalize their 3D avatars using that flexible system.

The Technical Beginnings of Zagrock ​

As with all tech projects, one of the first things to do is choose a tech stack.

One of my objectives with Zagrock was to learn something new while still building something that could realistically be deployed one day.

With that in mind, I chose the following stack:

UI ​

  • Plain CSS using BEM (now using Tailwind instead)
  • Vue 3, now built with Nuxt (a meta-framework built on top of Vue 3)
  • Urql for GraphQL
  • BabylonJS - a 3D game engine for the web

API Layer ​

  • GraphQL for communication between the UI and API
  • Golang with the gqlgen
  • SQLBoiler as an ORM
  • Postgres
  • Valkey for caching and pub/sub
  • MinIO/S3 for blob storage

Ops ​

  • GitHub Actions
  • Docker and Docker Compose
  • Posthog for analytics
  • Sentry for error logging (looking to migrate over to Posthog at some point)

You might be wondering why I didn’t choose more commonly used technologies like React, REST, or ThreeJS.

The reason is simple: I wanted to work with technologies that I wouldn’t normally get to use in a typical professional setting. And honestly, Vue 3 is such a joy to work with that I would choose it over React any day.

Here is a quick peak of what the app looks like today. Note: All of the assets are test assets and will be replaced with real assets when it gets deployed to producation.

In follow-up blog posts, I’ll share some of the challenges I faced while building Zagrock and go into more detail about how some of these technologies work behind the scenes.

See you next time!