Main Website CMS - Documentation

Document Status
Document Owner	Product Engineering 2026	Product Engineering 2026
Contributors	Ari Darrell Muljono	Ari Darrell Muljono
Project Links	https://github.com/BikunApp/bikuntracker-frontend-v2	https://github.com/BikunApp/bikuntracker-frontend-v2
Project Links	cms.ristek.cs.ui.ac.id	cms.ristek.cs.ui.ac.id
Team	Theodore Kevin Himawan	theodore.kevin@ristek.cs.ui.ac.id
Team	Ari Darrell Muljono	darrell@ristek.cs.ui.ac.id
Team	Grace Karina	gracekarin@ristek.cs.ui.ac.id
Team	Yeshua Marco G. Manurung	marco@ristek.cs.ui.ac.id

🔎 Background

Overview

This project is the Content Management System (CMS) for RISTEK's Main Website, built with Next.js, NextAuth.js for authentication, RTK Query for client-side data fetching, and shadcn/ui for most of the components.

Stakeholders

Users: UI students and staff (monitoring real-time bus locations), Bikun Administrators (accessing reporting dashboards and schedules).
Upstream Dependencies: Bikun Tracker Backend V2 (providing REST API endpoints and /ws WebSocket), UI SSO (for authentication).
Downstream Consumers: End-user devices (Mobile and desktop web browsers).

Scope & Boundaries

In Scope

Real-time interactive map rendering using Leaflet.
Maintaining continuous WebSocket connections to receive live bus GPS coordinates.
User interface for bus schedule management and reporting.
Client-side authentication integration utilizing UI CAS SSO.
Local state management for bus movement interpolation.

Out of Scope

Heavy computational processing for lane detection or lap history (strictly backend responsibility).
Relational data storage or direct interaction with PostgreSQL.
Ingesting raw hardware GPS data from Damri.

⚙️ Architecture & Design

System Diagram

Architecture Decisions (ADRs)

Language/Framework: React 19 + TypeScript built with Vite
Routing: TanStack React Router
State Management: Zustand
Styling & UI: Tailwind CSS v4
Map Visualization: Leaflet

💻Technical Specifications

API Documentation

Data Model/Schema

Project Structure

main-website-cms
┣ .git
┃ ┣ hooks
┃ ┣ info
┃ ┃ ┗ exclude
┃ ┣ logs
┃ ┃ ┗ HEAD
┃ ┣ objects
┃ ┃ ┣ info
┃ ┃ ┗ pack
┃ ┣ refs
┃ ┃ ┣ heads
┃ ┃ ┃ ┗ main
┃ ┃ ┣ remotes
┃ ┃ ┃ ┗ origin
┃ ┃ ┃ ┃ ┗ HEAD
┃ ┃ ┗ tags
┃ ┣ config
┃ ┣ description
┃ ┣ HEAD
┃ ┣ index
┃ ┗ packed-refs
┣ .github
┃ ┗ workflows
┃ ┃ ┣ deploy.yaml
┃ ┃ ┗ preview.yaml
┣ .husky
┃ ┗ pre-commit
┣ public
┃ ┣ decorators
┃ ┣ logo
┣ src
┃ ┣ app
┃ ┃ ┣ (routes)
┃ ┃ ┃ ┣ (auth)
┃ ┃ ┃ ┃ ┣ signin
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┣ auth-form.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┗ decorator.tsx
┃ ┃ ┃ ┃ ┃ ┣ layout.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┗ signout
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┗ (base)
┃ ┃ ┃ ┃ ┣ achievement
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┣ achievement-category
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ columns.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ table.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┗ achivement
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ columns.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ table.tsx
┃ ┃ ┃ ┃ ┃ ┣ edit
┃ ┃ ┃ ┃ ┃ ┃ ┗ [id]
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┣ new
┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ client
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┗ columns.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ event
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┣ event
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ columns.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ table.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┗ event-category
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ columns.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ table.tsx
┃ ┃ ┃ ┃ ┃ ┣ edit
┃ ┃ ┃ ┃ ┃ ┃ ┗ [id]
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┣ new
┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ member
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┗ columns.tsx
┃ ┃ ┃ ┃ ┃ ┣ edit
┃ ┃ ┃ ┃ ┃ ┃ ┗ [id]
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┣ new
┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ partnership
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┗ columns.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ product
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┗ columns.tsx
┃ ┃ ┃ ┃ ┃ ┣ edit
┃ ┃ ┃ ┃ ┃ ┃ ┗ [id]
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┣ new
┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ program
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┗ columns.tsx
┃ ┃ ┃ ┃ ┃ ┣ edit
┃ ┃ ┃ ┃ ┃ ┃ ┗ [id]
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┣ new
┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ project
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┣ project
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ columns.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ table.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┗ tags
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ columns.tsx
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ table.tsx
┃ ┃ ┃ ┃ ┃ ┣ edit
┃ ┃ ┃ ┃ ┃ ┃ ┗ [id]
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┣ new
┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ sig
┃ ┃ ┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┃ ┃ ┃ ┗ columns.tsx
┃ ┃ ┃ ┃ ┃ ┣ edit
┃ ┃ ┃ ┃ ┃ ┃ ┗ [id]
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┣ new
┃ ┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┃ ┃ ┣ layout.tsx
┃ ┃ ┃ ┃ ┣ loading.tsx
┃ ┃ ┃ ┃ ┗ page.tsx
┃ ┃ ┣ api
┃ ┃ ┃ ┣ auth
┃ ┃ ┃ ┃ ┗ [...nextauth]
┃ ┃ ┃ ┃ ┃ ┗ route.ts
┃ ┃ ┃ ┗ s3
┃ ┃ ┃ ┃ ┗ upload-image
┃ ┃ ┃ ┃ ┃ ┗ route.ts
┃ ┃ ┣ favicon.ico
┃ ┃ ┣ globals.css
┃ ┃ ┣ layout.tsx
┃ ┃ ┣ not-found.tsx
┃ ┃ ┗ robots.txt
┃ ┣ components
┃ ┃ ┣ atoms
┃ ┃ ┃ ┣ Button
┃ ┃ ┃ ┃ ┗ logout-button.tsx
┃ ┃ ┃ ┣ Form
┃ ┃ ┃ ┃ ┣ DateSelect.tsx
┃ ┃ ┃ ┃ ┣ ImageUpload.tsx
┃ ┃ ┃ ┃ ┣ MultipleSelect.tsx
┃ ┃ ┃ ┃ ┣ Select.tsx
┃ ┃ ┃ ┃ ┣ Switch.tsx
┃ ┃ ┃ ┃ ┗ TextField.tsx
┃ ┃ ┃ ┣ ImageGallery
┃ ┃ ┃ ┃ ┗ index.tsx
┃ ┃ ┃ ┣ Loading
┃ ┃ ┃ ┃ ┣ LoadingSkeleton.tsx
┃ ┃ ┃ ┃ ┗ LoadingSuspense.tsx
┃ ┃ ┃ ┣ RetainAspectImage
┃ ┃ ┃ ┃ ┗ index.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ organisms
┃ ┃ ┃ ┣ Form
┃ ┃ ┃ ┃ ┣ Achievement.tsx
┃ ┃ ┃ ┃ ┣ AchievementCategory.tsx
┃ ┃ ┃ ┃ ┣ Event.tsx
┃ ┃ ┃ ┃ ┣ EventCategory.tsx
┃ ┃ ┃ ┃ ┣ Member.tsx
┃ ┃ ┃ ┃ ┣ Product.tsx
┃ ┃ ┃ ┃ ┣ Program.tsx
┃ ┃ ┃ ┃ ┣ Project.tsx
┃ ┃ ┃ ┃ ┣ SIG.tsx
┃ ┃ ┃ ┃ ┣ Tag.tsx
┃ ┃ ┃ ┃ ┗ types.ts
┃ ┃ ┃ ┣ RowDetails
┃ ┃ ┃ ┃ ┣ client
┃ ┃ ┃ ┃ ┃ ┗ index.tsx
┃ ┃ ┃ ┃ ┗ partnership
┃ ┃ ┃ ┃ ┃ ┗ index.tsx
┃ ┃ ┃ ┣ TableDataAction
┃ ┃ ┃ ┃ ┗ index.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ templates
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ ui
┃ ┣ config
┃ ┃ ┗ index.ts
┃ ┣ constant
┃ ┃ ┣ general.ts
┃ ┃ ┣ image.ts
┃ ┃ ┣ navlinks.ts
┃ ┃ ┗ tables.ts
┃ ┣ features
┃ ┃ ┣ cms
┃ ┃ ┃ ┣ achievement
┃ ┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┃ ┗ type.ts
┃ ┃ ┃ ┣ client
┃ ┃ ┃ ┃ ┗ api.ts
┃ ┃ ┃ ┣ event
┃ ┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┃ ┗ type.ts
┃ ┃ ┃ ┣ member
┃ ┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┃ ┗ type.ts
┃ ┃ ┃ ┣ partnership
┃ ┃ ┃ ┃ ┗ api.ts
┃ ┃ ┃ ┣ product
┃ ┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┃ ┗ type.ts
┃ ┃ ┃ ┣ program
┃ ┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┃ ┗ type.ts
┃ ┃ ┃ ┣ project
┃ ┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┃ ┗ type.ts
┃ ┃ ┃ ┣ sig
┃ ┃ ┃ ┃ ┗ api.ts
┃ ┃ ┃ ┣ tag
┃ ┃ ┃ ┃ ┗ api.ts
┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┗ type.ts
┃ ┃ ┣ s3
┃ ┃ ┃ ┣ api.ts
┃ ┃ ┃ ┗ type.ts
┃ ┃ ┗ types.ts
┃ ┣ hooks
┃ ┃ ┣ useCounter.ts
┃ ┃ ┣ useCreateTableData.ts
┃ ┃ ┣ useDeleteTableData.ts
┃ ┃ ┗ useUpdateTableData.ts
┃ ┣ lib
┃ ┣ providers
┃ ┃ ┣ index.ts
┃ ┃ ┣ redux-provider.tsx
┃ ┃ ┗ session-provider.tsx
┃ ┣ schema
┃ ┃ ┣ achivement
┃ ┃ ┣ auth
┃ ┃ ┣ client
┃ ┃ ┣ event
┃ ┃ ┣ member
┃ ┃ ┣ partnership
┃ ┃ ┣ product
┃ ┃ ┣ program
┃ ┃ ┣ project
┃ ┃ ┣ sig
┃ ┃ ┗ index.ts
┃ ┗ types
┣ .env.example
┣ .eslintignore
┣ .eslintrc.json
┣ .gitignore
┣ .prettierignore
┣ .prettierrc.json
┣ components.json
┣ favicon.ico
┣ next.config.mjs
┣ package-lock.json
┣ package.json
┣ postcss.config.js
┣ README.md
┣ tailwind.config.ts
┗ tsconfig.json

Key Components

main.go — Application Bootstrap

Reads config from .env via Viper
Creates pgxpool connection to PostgreSQL
Wires all handlers, services, repositories, and middlewares
Registers HTTP routes via utils.HandleRoute
Starts WebSocket broadcaster at /ws
Exposes webhook endpoint at /wh for GPS ingestion

app/bus/container.go — Runtime State Manager

Holds in-memory maps: busCoordinates, previousHalte, activeLaps, storedBuses, currentPlates

ApplyExternalCoordinates() — the main pipeline called by webhook: updates colours, detects lanes, tracks halte visits, detects lap start/end

DQ_SIZE = 50: rolling deque per bus for lane detection sampling

InitRuntimeState() — hydrates runtime caches from DB on startup

app/bus/halte.go — Geofence Proximity

22 named haltes (bus stops) with fixed coordinates
nearestHalte(lat, lng) returns the closest halte name + distance in metres

Threshold: 45 metres — bus must be within 45m to register a halte visit

app/bus/route.go — Route Definitions

4 route arrays: blueNormal, blueMorning, redNormal, redMorning
Pre-built halte-pair sets for O(1) lookup
detectRouteColorFromPair() returns blue / red / grey

app/auth/ — Authentication

SSO Login: validates CAS ticket with sso.ui.ac.id, auto-creates user in DB on first login
JWT pair (access + refresh) signed with HS256; expiry is configurable via env vars
Admin protection: API_KEY header is checked against ADMIN_API_KEY env var

☁️ Operational Playbook

Infrastructure

Cloud Provider: AWS ECR + Pusilkom instance
Container Registry: 638207107223.dkr.ecr.ap-southeast-1.amazonaws.com
Image Name: bikun-tracker-v2-backend
Production Tag: stable (deployed from main branch)
Staging Tag: latest (deployed from staging branch)
Region: ap-southeast-1 (Singapore)

Environment Variables

Key	Description	Default (Dev)	Sensitive?
DAMRI_API	Damri GPS API base URL	https://api-damri.istsolutions.co.id	No
DAMRI_LOGIN_USERNAME	Damri API username	—	Yes
DAMRI_LOGIN_PASSWORD	Damri API password	—	Yes
WS_URL	External GPS WebSocket URL	ws://localhost:8000/status	No
RM_API	RM lane-detection service URL	https://eta-bikun-tracker-production.up.railway.app	No
PRINT_CSV_LOGS	Enable CSV log POST to port 4040	FALSE	No
PORT	Port the server listens on	8080	No
DB_HOST	PostgreSQL host address	localhost	No
DB_NAME	Database name	bikun_tracker	No
DB_USER	Database username	postgres	No
DB_PASSWORD	Database password	—	Yes
DB_PORT	Database port	5043	No
WS_UPGRADE_WHITELIST	Allowed WebSocket origins (comma-separated)	localhost:5173	No
JWT_EXPIRY_IN_DAYS	Access token validity in days	1	No
JWT_REFRESH_EXPIRY_IN_DAYS	Refresh token validity in days	30	No
JWT_SECRET_KEY	HMAC secret for JWT signing	—	Yes
ADMIN_API_KEY	API key for admin-protected endpoints	—	Yes

🙋Questions

🗒 List of frequently asked questions or question that need to be answered that is related to this initiative ..

🔎 Background

Overview​

Stakeholders​

Scope & Boundaries​

⚙️ Architecture & Design

System Diagram​

Architecture Decisions (ADRs)​