Hubin thumbnail image

Initiated on 27 January 2022

  • [PHP]
  • [Bootstrap]
  • [Laravel]
  • [MySQL]

Table of Contents

  1. Story
  2. Design
    1. Old Design
    2. New Design
  3. Tech Stack
    1. Front-End
      1. Bootstrap
      2. Blade
    2. Back-End
      1. MySQL
  4. My Personal Thoughts


Me and 5 of my friends were chosen by our teacher to join in a Project-Based Learning (PJBL). We were given a task to make something, an application, or a website that could be useful, our idea was to make a warehousing web app since a teacher showed us an example project from last year. But another class took the idea and started first before us.

So then our next idea was to make this. An industrial relation helper website, hence the name Hubin as in Hubungan Industri.


I was never in charge of designing (even though I do the Front-End too) so I cannot explain what’s behind all this clearly. Anyway, we had 2 designs: first was when the project was made and second when it was going to be used by school.

Old Design

The old design has a very deep purple color scheme.

Old design of the dashboard
Old design of the dashboard

New Design

The new design now uses a more formal color scheme with brown accents.

New design of the dashboard
New design of the dashboard
New design in Figma
New design in Figma

Tech Stack

This project is made with Laravel 7 framework and obviously the language PHP. This was actually our first time ever to work with Laravel, so you might find obscene things happening in the development phase.



This project entirely relies on Bootstrap, and to make it worse we didn’t even try to compile the styles ourselves, we used the CDN version instead and style them manually with CSS.

A nightmare has come true as Bootstrap uses !important in most utility classes. We have to tinker Bootstrap itself to change this behavior, making it different from the base file.


Templating engine provided with Laravel. This helps us a lot considering the project has a lot of views. At first, we used this just to match the <head> across views and we still copy-paste everything inside the <body>. Only then we do a redesign and fully utiize the much easier layout-based design system.



Using a relational database for a quite big project is very overwhelming. It is my experience as the only sole person as the Back-End Developer. I had to migrate the database for every little changes. What makes it easier though, is just because I only know MySQL back then.

My Personal Thoughts

As I’ve written earlier, I was the only one to do the Back-End, not only that; I had to painfully “convert” plain HTMLs to Blade templates myself as my friends don’t want to use Laravel. They said it’s difficult to set up, which I understand myself.

Well, it’s just sad to be honest but I have to take the positive things ;/