Journey through Journaly (Badges)
English

Journey through Journaly (Badges)

by

language learning
programming

In this text we're going to take a close look under the Matrix. We're going to find the exact place where your consciousness is located and start hacking on it until you become someone else.

Just kidding.

Welcome to a jolly journey through Journaly! The idea of this post is to give you a first taste of how the platform you're (hopefully) using everyday looks like from a technical point of view.

First of all: I am not part of the Journaly team, so everything I'll say is just my very superficial take on very concrete things. It most certainly won't be fully correct. I only had the epiphany that led me to write this article today, so please don't expect an utterly thorough coverage of the technicalities. But I assume most of the readers won't, so we're fine.

Let's get started!

I'm going to talk about the badge that most of you'll already have gotten by now. I refer to the badge of having written ten posts in Journaly. If you are anything like me, you'll by now have undoubtedly asked yourself: Where does that come from?

Well, obviously it comes from having written at least ten posts. But that's not what I mean. What I mean is: Where does it technically come from? Where are the nitty gritty details behind that functionality? How does it work under the hood? Where does that information come from?

In short: Where is the code?

This won't be a programming crash course or anything. It will just be a very fast round around the corner. We'll get straight to the core. I mean the code.

Journaly is (obviously) a web application. The source code of what all of us are using right now is hosted on GitHub. Journaly seems to be mostly written in TypeScript (I had no idea, that's a nice thing to know!) and uses a relational database called PostgreSQL. This database contains all our posts, the users (us!), the comments we write to each other, the likes (the hearts) we give us, absolutely every type of information that comes from the users. Yes, that's what a database is for, of course. The visual aspects of the web application (what all of you see and use in the browser) are written in a framework called React.

Let's go a little bit deeper.

There is another layer on top of the SQL database, which is called Prisma. I don't know much (i.e. anything) about web development with JavaScript, but as a working Java programmer I can reasonably understand what the components of Journaly are and what they're good for. Prisma seems to be mostly an Object Relational Mapping (ORM) on top of the PostgreSQL database.

And what does that mean?

It means that you interact with the database in a certain way. Instead of writing in the SQL language of the database (SQL statements), you do that in your programming language of choice, i.e. in this case TypeScript. Without technicalities, this just means that your life working with the database is easier. The central idea of an ORM tool is the mapping it provides: It is a sort of bridge between the database world and the code world.

And why do I talk about that?

Because the badges can be found here!

This file lists (declares) all sorts of types (kinds of information) that the Journaly database knows about. Well, not really the database, but how Prisma sees it and exposes it to the TypeScript code. Without understanding anything about programming, one can get a very precise idea as to what the database contains. The names are really very readable (good job, Journaly team!) and the structure seems to be quite transparent (the relations between the different types of information are mostly intuitively understandable).

For example, there are easily identifiable concepts such as Post, Comment or User. What are those? Well, they are the posts, the comments and the users. These and other concepts are declared in form of types.

The badges are thus declared in the enumeration (enum) BadgeType. We can see that there are currently badges for alpha and beta users (like Linda) and for users who wrote ten posts or more. I was personally curious about what comes next, and now I know it: Authors get another badge at the respectable amount of 100 posts. And the heroes who work on Journaly itself get another one as code contributors.

Okay, now we know what kinds of badges are there. But I want to know more. Where is the code that rewards users with the badge of 10 posts? In other words: Where is the badge assigned?

The answer is here.

Without getting too much into details, the easier part of the code is here. One can read this SQL statement in plain English: "select the badge type of ten posts and the user ID from all posts where the count is larger or equal than ten". Or more tersely: Gimme my badge!

The part of the code that takes care of sending a notification email to every user with a new badge is here. More concretely, the name sendNewBadgeEmail should be already quite descriptive. It tells exactly what it does: It sends an email notification because of a new badge. The mentioned Promise has nothing to do with promising you a new badge (that's something you have to earn!) but with the way the email is sent (in parallel, or better said, concurrently).

That's it. Quite nice, right?

2