[Badge System 🏅] Project sections and technologies used

Carlos Córdova Sáenz — Mon, 21 Dec 2020 15:49:13 +0000

We at omegaUp built a badge system for the platform almost one year ago. In this set of tutorials, I'll describe how we did it so this could serve as a guide for you to build your own badge system on any of your platforms.

This post will cover the following topics:

How was the project divided?
What are the technologies used on each part of the project?

So, let's start!

How was the project divided?

To reduce the complexity of the project, we divided it into three parts, which are:

Badges creation: how the new badges proposed by our contributors will be created, processed, and put into execution?
Badges assignation: how and when will the badges that correspond to each user be assigned?
Badges display: how are the badges going to be shown to users?

What are the technologies used on each part of the project?

Badges creation:

PHP (vanilla PHP)
Python (vanilla Python)
MySQL
JSON

Badges assignation:

Python (vanilla Python)
MySQL

Badges display:

Vue.js
TypeScript
PHP (vanilla PHP)

In the following posts in this series of tutorials, we will finally start with the technical part of implementing the badge system. Starting with Badges creation.

Until the next post! 👋

[Badge System 🏅] Project description and motivation

Carlos Córdova Sáenz — Mon, 21 Dec 2020 13:03:29 +0000

We at omegaUp built a badge system for the platform almost one year ago. In the following set of tutorials, I'll describe how we did it so this could serve as a guide for you to build your own badge system on any of your platforms.

This post will cover the following topics:

What is omegaUp?
Why did we need something like the Badge System?
What exactly is the Badge System we wanted to build?
What technologies were used to build the Badge System? (Prerequisites)

So, let's start!

What is omegaUp?

omegaUp is an open-source online platform that helps students improve their programming skills through competitive programming.

The platform can be used not only by students but also by teachers.

Teachers can create courses (with assignments and tests) about different Computer Science topics, host competitive programming contests, and even create programming problems.

Students, on the other hand, could use the courses to learn new CS concepts, solve problems to improve what they've learned and participate in contests to compare their skills against their schoolfellows.

omegaUp is also the official hosting platform for the Mexican Informatics Olympiad (OMI)!!

Why did we need something like the Badge System?

In order to reward the best students (users) on the platform, we used to have only two methods:

Students ranking: a ranking historical of all the students since the beginning of the platform
Coder of the month: a monthly ranking in order to identify the best student each month

They were a great way to recognize the best students, however, recognition for a single student each month made it very difficult to achieve.

That is why we came up with developing our badges, such as those that exist on sites like Stack Overflow, HackerRank, or even right here, in DEV, that allow any student to be rewarded for small or large achievements, they achieve on the platform.

What exactly was the Badge System we wanted to build?

We named our project "Badge System" and not just "Badges" because we wanted a framework through which anyone, with just a little knowledge of the rules, could create new badges for the platform.

So basically, what we wanted to create was a system capable of:

create new badges from a simple configuration;
display the badges in many locations on the platform;
assign badges to users where appropriate;

and we managed to do it as is!

This post ends here, in the following part of this series of posts, I'll describe how the project was divided and what technologies were used for each of the parts.

I hope that this series of tutorials will be helpful for you, any questions you have, I will gladly answer them if you send them to me by any means.

DEV Community: Carlos Córdova Sáenz