PKM UPNVJ

A single gateway to the campus Student Creativity Program, manageable without code

Next.js
TypeScript
Tailwind CSS
Supabase

Screenshot of the PKM UPNVJ website homepage

PKM fields structured: 10
official guides processed: 11
latest release: v1.1

Background

Every year, thousands of students at UPN Veteran Jakarta pursue the Student Creativity Program (PKM), yet the information lives across scattered channels and the official guides come as a dozen long PDF files. Prospective participants struggle to find the right flow, themes, and tips.

I saw a clear opportunity: one always-up-to-date gateway that staff could manage themselves, without needing a programmer.

What I Did

It all started with research. I read and mapped eleven official PKM 2026 guides into structured data, then wrote the PRD, ERD, and a series of ADRs before writing a single line of UI.

Built the public site with Next.js, TypeScript, and Tailwind CSS: guides for all 10 fields, the application flow, 2026 themes, proposal tips, and official downloads
Designed a Google-authenticated admin panel (Supabase) so staff can update announcements and schedules without touching code, complete with two-step deletes and JSON backup export
Kept accessibility in check: skip links, heading hierarchy, and contrast that passes audit
Prepared a RUNBOOK and an ADMIN MANUAL so the organization can continue the site without me

Results

The site shipped as v1.1 and is used by staff to keep information up to date on their own. I handled the entire cycle from research to handover solo, with every major decision documented and traceable.

Lessons

Documentation is not decoration. The PRD and ADRs sped up decision-making, and the RUNBOOK turned done into someone else can continue this. That habit now travels with me into every project.

Visit Website

Next project

CapSL