Overview
BEM UNAI is the student executive board of Universitas Advent Indonesia. Every year a new cabinet takes office with new people, new ministries and new programs. For the 2024-2025 cabinet, Kabinet Dirandra Narwasena, I built the board's own portal: the place students go to see who runs what, what the board is doing and where to vote.
The challenge
Before the site, the cabinet lived on Instagram. That works for announcements and fails at everything else. A student who wanted to know who leads the Ministry of Education, or what the board did last month, had to scroll through a feed and guess.
The harder constraint was turnover. Whatever I built had to survive the people who run it changing every year. That ruled out anything that needed a developer to add a news post or update a role.
Approach
I treated the cabinet as data, not as pages. Every role and unit is an entry with a name, a group and a list of responsibilities, and the structure pages are generated from that. Adding a ministry or swapping a person means changing an entry, not designing a new layout.
The second decision was identity. Student sites tend to look like the same free template. This cabinet had a name and an emblem, so I built the site around them: a dark theme, gold emblems and a batik-style ornamental border that carries "Dirandra Narwasena" through every page. It reads as this cabinet's site, not a generic one.
What I built
- Pemerintahan (Government): the cabinet in three groups. Staff Inti holds the President, Vice President, Secretary General and Treasurer. Kementrian lists ministries such as Health, Education, Religion, Communications, Sports, Human Rights and Community Service. Divisi covers Multimedia, Social Media, Public Relations, Advocacy, Diplomacy and Alumni.
- Detail pages for every role and unit, spelling out what it is responsible for.
- Informasi, a news feed of the board's activities. Each card shows the date, view count and the ministry behind it, so credit lands where the work was done.
- Vote and Vote Result pages for student elections.
- Portal and Kontak pages, with links to the board's Instagram, YouTube and TikTok.
- A phone-first layout, because that is where students open it.
Why Next.js
Most of the site is read, not interacted with. Next.js let me render content pages fast and generate the government structure from data in one framework, without standing up a separate backend for what is essentially a well-organized directory and a news feed.
Outcome
The site gave the board a single address to point students to, instead of a feed. The part I like most is what happened after: the news feed kept running under the communications ministry, with posts continuing after the cabinet year ended. A student site that outlives its launch semester is the real test, and this one passed it.