A couple weeks ago, I tried playing Fallout 3 for the first time and the first thing that you have to is design your character. While I was doing it, I started to think about how many times I've done the exact same thing in the past. "Set your eye color", "Choose your body type". There have been so many times I've needed to stop what I was doing to spend 20 minutes designing my own avatar, emoji, gamer icon, etc. And it's not like my appearence changes much, so why can't something like that be centralized? When I saw the physical attributes that Genomelink offered, I suddenly got the idea.

What it does

Basically, DNAvatar is an alternative way to create your own Bitmoji using that frame of mind. It starts out the similar to the bitmoji customization page, with a bunch of buttons and options that determine the appearance of your personal avatar. However, before you can press any of them, it asks you to log in with Genomelink. Once you do, you're physical data from Genomelink will be imported and DNAvatar will add them to your image. For example, if you DNA says you are prone to day time sleepiness, you're avatar might have some wrinkles. If you are likely to have brown eyes, so will your avatar. Of course, not everything can be determine by your DNA, so we also allow you to customize your character with any other options you might expect.

How I built it

I couldn't have done it without libmoji, an unoffical API to Bitmoji that lets you get a list of traits that make up your avatar, and then convert them to a URL which fully renders your character. From there, it was basically a matter of mapping physical properties extracted from Genomelink to physical traits in libmoji. There was also a good portion of time dedicated to making the customization buttons store all possible options for each trait so that the user could cycle through properties that can't be dictated by DNA, such as glasses, hair styles, and more.

Challenges I ran into

This was my first React app, so if you look at the code you'll probably notice it's pretty messy. I didn't know where to store traits and their associated IDs exactly, so they're kept at the top level and kept passing them to every possible child field. Authentication is also kind of touchy. Working with a react app embeded in an express app meant that any server stuff had to be handled by a proxy, so having an actual callback ended up being a hassle. Instead, all authentication has to be done through AJAX, which can be kind of spotty.

Accomplishments that I'm proud of

Like I said, it's my first React app, so that's pretty exciting. I kind of get the hype now. There is also something very thrilling about getting the mappings from Genomelink to Bitmoji to work the first time. You just refresh the page and suddenly you're looking at complete avatar. With a specific hair color, body type, and face. I didn't have time to get my own DNA swabbed so he didn't look anything like me, but still...

What's next for DNAvatar

So many things. The most important feature that I unfortunately had to leave out due to time constraints was a gender chooser. Genomelink doesn't currently let you derive your gender from your DNA, and even if they did, there are specific traits that Bitmoji only let's you apply to a man or a woman, so the UI would need to automatically update once the gender is set. I have a pretty good idea on how to do it, but it would've taken at least a couple more days and made the code even messier. The other big thing I'd like to have is an API. Like I said in the intro, there's no reason we couldn't centralize a person's physical data and let them offer it to other apps. Imagine next time you start a video game instead of having to create your character from scratch, you just click "Connect with Genomelink" and there they are.

Share this project: