logo
Event TechnologyWeb PlatformCompletedFeatured

MABACUP ITS 2022

Leading a cross-functional engineering team to power one of ITS' largest freshmen events.

MABACUP ITS 2022 is the largest annual freshmen competition event at Institut Teknologi Sepuluh Nopember (ITS). As Head of Web Development, I led an 8-member cross-functional team consisting of frontend engineers, backend engineers, and UI/UX designers to design, develop, and maintain the official event platform. The platform streamlined committee recruitment, competition registrations, participant management, real-time announcements, and event operations for thousands of students throughout the six-month development period.

My Role
Head of Web Development
Year
2022
Duration
6 Months
MABACUP ITS 2022
6 Months
Development Duration
8 Members
Team Size
1,400+
Committee Applicants
2,200+
Closing Party Registrations

The Journey

Building and Leading the Web Development Division

From team formation to successful event execution

I was appointed as the Head of Web Development for MABACUP ITS 2022 before development began. My first responsibility was establishing the entire Web Development Division. I recruited the team, conducted onboarding sessions, and organized the development structure consisting of: • 3 Frontend Developers • 3 Backend Developers • 2 UI/UX Designers Beyond technical leadership, I became the primary liaison between Web Development and every event division. Every new feature request first went through requirement gathering sessions where I discussed business objectives, user flows, launch deadlines, and technical feasibility before translating them into engineering requirements.

Leading Agile Development Across Multiple Teams

Managing people, priorities, and product delivery

After gathering requirements, I transformed them into development roadmaps and system flows that were presented to both developers and UI/UX designers during Sprint Planning. Throughout the six-month development cycle, I led weekly Agile ceremonies including: • Sprint Planning every week • Sprint Review • Sprint Retrospective every month • Backlog prioritization • Requirement clarification I reviewed every developer's progress, identified blockers, prevented sprint carry-over, and distributed tasks based on each member's expertise. Complex technical work was assigned to senior members, while beginner-friendly tasks became learning opportunities for junior developers. To improve development efficiency, backend development and UI/UX design always started first, allowing frontend developers to begin implementation and API integration in the following sprint. This workflow significantly reduced idle time between teams and accelerated feature delivery.

Powering Thousands of Freshmen Throughout MABACUP

Delivering a complete digital ecosystem for the event

The final platform became the official digital hub for MABACUP ITS 2022 and supported every major event operation. The platform included: • Event Landing Page • About MABACUP • Pre-Event Pages • Competition Pages • Closing Party Page • Merchandise Page • User Dashboard • Admin Dashboard • Login System • Registration System • Error Handling Pages • Responsive Mobile Experience The User Dashboard enabled: • Committee (Staff) Open Recruitment • Competition Registration • Closing Party Registration • Staff Selection Result Checker using NIM/NRP • Direct contact links to division leaders for accepted applicants The Admin Dashboard enabled committee leaders to: • Review applicant profiles • View applicant details • Accept or reject committee applicants • Manage recruitment workflow efficiently The platform successfully handled: • 1,400+ freshmen applying as MABACUP committee members • 2,200+ Closing Party registrations • Responsive experiences across desktop, tablet, and mobile devices This project became one of my earliest experiences leading a real engineering organization, balancing product management, technical leadership, stakeholder communication, agile delivery, and software architecture while delivering a production-ready platform used by thousands of ITS students.

Technologies Used

Next.js
JavaScript
Tailwind CSS
Git
GitHub
Trello
DigitalOcean

Key Features

Official event landing page
About MABACUP page
Pre-event information pages
Main competition pages (Basketball, Badminton, Essay & Poster, Band Competition, Stand-Up Comedy)
Closing Party page
Merchandise page
User authentication (Login)
Admin authentication
Competition registration system
Closing Party registration
Committee (Staff) Open Recruitment system
User Dashboard
Admin Dashboard
Staff recruitment result checker using NIM/NRP
Division contact shortcut after acceptance
Participant management
Recruitment approval workflow
Responsive layouts
Reusable component architecture
404 Page
500 Page
505 Page
Coming Soon Page
Under Maintenance Page
Loading Page
Registration Closed Page

Key Learnings

1

Building high-performing engineering teams starts with strong recruitment and onboarding.

2

Requirement gathering with stakeholders is as important as software implementation.

3

Weekly sprint planning keeps cross-functional teams aligned and reduces delivery risk.

4

Task allocation should match individual experience levels to maximize productivity and learning.

5

Starting backend and UI/UX work before frontend enables smoother API integration.

6

Regular retrospectives foster continuous improvement and healthier team collaboration.

7

Reusable components and responsive architecture significantly improve maintainability.

8

Technical leadership requires balancing engineering excellence with communication and project management.

Project Gallery

MABACUP ITS 2022 screenshot 1
MABACUP ITS 2022 screenshot 2
MABACUP ITS 2022 screenshot 3
MABACUP ITS 2022 screenshot 4

Interested in this project?

Feel free to explore the code or see it in action. I m always happy to discuss the technical details!