Skip to main content

Main Website CMS - Documentation

🔎 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​

KeyDescriptionDefault (Dev)Sensitive?
DAMRI_APIDamri GPS API base URLhttps://api-damri.istsolutions.co.idNo
DAMRI_LOGIN_USERNAMEDamri API username—Yes
DAMRI_LOGIN_PASSWORDDamri API password—Yes
WS_URLExternal GPS WebSocket URLws://localhost:8000/statusNo
RM_APIRM lane-detection service URLhttps://eta-bikun-tracker-production.up.railway.appNo
PRINT_CSV_LOGSEnable CSV log POST to port 4040FALSENo
PORTPort the server listens on8080No
DB_HOSTPostgreSQL host addresslocalhostNo
DB_NAMEDatabase namebikun_trackerNo
DB_USERDatabase usernamepostgresNo
DB_PASSWORDDatabase password—Yes
DB_PORTDatabase port5043No
WS_UPGRADE_WHITELISTAllowed WebSocket origins (comma-separated)localhost:5173No
JWT_EXPIRY_IN_DAYSAccess token validity in days1No
JWT_REFRESH_EXPIRY_IN_DAYSRefresh token validity in days30No
JWT_SECRET_KEYHMAC secret for JWT signing—Yes
ADMIN_API_KEYAPI 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 ..