UGMTC-2024

UGMTC (Universitas Gadjah Mada Taekwondo Championship) 2024, a nationwide taekwondo competition. It’s the longest-running and most complex project I've ever handled, spanning from November 2023 to August 2024. So, what makes this project so intricate? Let’s dive in!

Requirements

As Ryan from Pitch Meeting would say: "Unclear!" That pretty much sums up the project requirements, which evolved progressively over time. Initially, I was asked to build a website to promote the competition, manage participant registration, and display match brackets. Sounds simple, right? Well, it wasn't.

One major takeaway from this project was understanding how crucial the context is. I had little knowledge of Taekwondo as a sport, which made designing a fitting system even harder—especially since client requests often strayed far from practicality. When we started in November 2023, I had very limited technical information. The only concrete data I had was for the participant registration form, and even that was quite challenging.

The athlete registration was split into two categories: "Prestasi" and "Festival," each featuring two Taekwondo competition types—Kyorugi and Poomsae. On top of that, there were various additional attributes such as weight classes and belt classes. And, just as I was wrapping my head around it, major details like weight class, belt class and age class kept changing up until the event in August 2024. Just look at this illustration to get a glimpse of the athlete's type:

In the end, given the constraints in budget and personnel, I had to make significant compromises while still trying to meet the client's needs. The final requirements can be summarized as:

Develop a website for the Taekwondo competition, including a landing page and a dashboard for athlete registration, ensuring all technical details are included, and handle payments at checkout."

Development

I stuck with my preferred tech stack for web projects: Next.js, Firebase, and Vercel. Here’s a breakdown of some major components I developed:

• Landing Page: This was relatively straightforward, and I closely followed the UI design by Wenka Wendira. However, the custom belt design took more time than anticipated.

• Dashboard Page: One of my biggest challenges was optimizing the loading speed for athlete data, which included various filters for athlete types, weight classes, belt classes, and more. The solution lay in properly architecting the Firestore database and tweaking queries with React Hooks.

• Payment System: Originally, I implemented Midtrans as the payment gateway, but due to document limitations, we switched to manual payment confirmation. To ensure order security, I used Google Cloud’s Cloud Task to create a Cron job that automatically cancels unconfirmed orders after 24 hours. Combined with Cloud Functions, this dynamically updated the athletes' registration status.

• Mailing: User notifications were handled seamlessly through Sendpulse’s free SMTP service.

• Bracket Chart: This was, by far, the most challenging aspect. Initially, I planned to design a custom bracket using CSS. However, after testing a few libraries, I settled on one, only to realize it couldn’t handle unbalanced trees. The final solution involved adding bye-charts or empty nodes to balance the tree. Thankfully, everything worked fine on D-Day, with only a few empty nodes.

UGMTC 2024 pushed me to the limits of my development skills. From learning the intricacies of a sport I was unfamiliar with to balancing evolving requirements, the project taught me the importance of having a clear requirement.