Tiberoa

Webdev

Inspiration & purpose

Tibeora was born for my own necessity of keeping track of my projects and having them organized and planned. Heavily inspired by JIRA (which I have been using extensively in my professional career) where the original product is way out of the price for personal use I decided to make my own cheap version using Gitlab as the backend since all of my repositories are actually on it.

Since it was a side project, I used it as an excuse to:

• Learn Vue.js

• Apply UI/UX trends I was fascinated about.

The name is a quite funny anecdote, it's the name of a fictitious kingdom of one of my childhood favorite games Legend of the Dragoon 😍

Right away I started to think how to incorporate all these elements into an actual app.

Use Cases

Gitlab has its own amazing interface to add milestones and boards (Mostly Kanban Boards) to your repos, the possibility of creating tickets (features, bugs, defects). Having got used to Jira workflow, I was missing a few things:

• The ability to have several repos in one project (In Gitlab, the concept of Project inherently meant Repository).

• Automatically add a prefix for all the tickets created under a project with a numerical progression, for example TIB-102 Add subtle transitions.

• When creating a new repo, automatize the creation of meaningful Project Labels, such as prioritization (major, minor, critical), and status (To do, doing, closed, on-hold).

• Create gitlab branches from tickets directly, and automatically change status (Label) when the branch was merged.

• Overall view of issues between projects.

• Quick ways of creating new projects, issues, and milestones.

• A better milestone presentation, with visual feedback of the actual progress (see picture below in the Design section).

The design

My two first concerns were: I want this app to be practical and look awesome, needs to have a cheerful design where data can be easily found and meaningful to any user that wants to keep track of his/her personal projects.

In the view shown above, you can see a summary of the look and feel of the app:

• First of all, clean, with lots of white space mixed with a cheerful palette of teal and tangerine yellow in symphony with the logo colors.

• Rounded shapes.

• Big bolded typography for headlines

• The flat design combined with largely blurred drop-shadows on cards, profile badges, and others to create that subtle feeling of contrast.

• Non-continuous bold line stroked icons with color shapes

Vue + Gitlab = awesomeness

The tech stack was as simple as the idea behind it, create a Vue client that communicates to an already existing Gitlab API (in summary, using Gitlab as the backend 😜)

For this, I had to implement the authentication flow with Gitlab through token in this beautiful and tropical login screen 😂.

The project was the perfect excuse to deeply understand Vue.js which was on my radar for a long time, after it, I learned how to integrate with a Vuex to create a proper store, best practices for fetching data asynchronously with axios and async await like this.

const getMilestoneIssues = async (projectId, milestoneId) => {
  let issues = [];
  try {
    issues = await api.gitlabApi.get(
      `projects/${projectId}/milestones/${milestoneId}/issues`,
    );
    return issues;
  } catch (error) {
    return error;
  }
};

But it wasn't all just code related, my ambition was big enough to create complex but beautiful UI components such as the Milestone progress:Or even, the loading screen with random quotes generator (some Gitlab requests were really heavy)

Summary

Eventually, I ended up abandoning the project a year ago, for several reasons, like the time required for maintenance vs actual workload, Gitlab ended up having just the necessary features for PM and I found I could live without all the extra stuff I wanted in the beginning.

That being said I did enjoy a lot this project, it was challenging and I'm really proud of the result considering it was my first Vue.js project. Sometimes I feel the tick of updating it and focusing on the just barely necessary features, but more interesting new projects keep appearing on my radar. Maybe in the future?.