Skip to main content

Oprec Frontend 2026

🔎 Background

Overview​

This service is the Frontend facing website for the RISTEK Open Recruitment 2026. It serves as the main portal for applicants to view open roles, register, login through UI SSO, submit their tasks, and view announcements and dashboard deadlines regarding their application.

Stakeholders​

  • Users: Applicants, UI Students
  • Upstream Dependencies: Oprec Backend API (stg.api.join.ristek.cs.ui.ac.id), SSO UI (sso.ui.ac.id)
  • Downstream Consumers: N/A (End User Application)

Scope & Boundaries​

  • In Scope: Frontend user interface, state management, UI SSO Cas Integration, API communication to the Open Recruitment Backend.
  • Out of Scope: Database schemas, backend validation, email notifications.

⚙️ Architecture & Design

System Diagram​

Architecture Decisions (ADRs)​

  • Language/Framework: JavaScript / React 17 / Next.js 12.3
  • Styling: Tailwind CSS & Styled Components (Legacy mixture)
  • State Management: Redux Toolkit for authentication and global state.
  • Form Handling: React Hook Form
  • Data Fetching/Communication: Axios for RESTful API communication asynchronously.
  • Authentication: JWT authentication with external University of Indonesia SSO (https://sso.ui.ac.id/cas2).

💻Technical Specifications

API Documentation​

The frontend consumes the Oprec backend through Axios, with interceptors injecting JWT tokens into authenticated requests.

Base API URL: https://stg.api.join.ristek.cs.ui.ac.id/api

Core endpoints called from the frontend:

  • /profile/: Fetches and updates member profile data.
  • /event-deadlines/: Fetches registration, selection, and announcement timelines.
  • /divisions/: Fetches the list of available divisions.
  • /submissions/: Sends applicant task submissions.
  • /login/ and /login-ldap/: Handles authentication flows.

Data Model/Schema​

Persistent data models live on the backend. The frontend only manages transient client state:

  • Auth token: Stored and attached to requests by the API layer.
  • Login status: Used to guard applicant dashboard routes.
  • Local storage key: Session data is mapped under oprecristek.

Project Structure​

oprec-frontend-2026/
├── _store/          # Redux toolkit store and slices (e.g., authSlice)
├── api/             # API configuration, Axios interceptors, SSO login functions
├── components/      # Reusable React components (UI elements, Layouts, etc.)
├── hooks/           # Custom React hooks
├── pages/           # Next.js file-based routing pages (index, login, dashboard, etc.)
├── public/          # Static assets (images, icons)
├── styles/          # Global styles, Tailwind and styled-components setup
├── utils/           # Utility functions (date formatting, time checks)
├── Dockerfile       # Docker image build instructions
├── docker-compose.yml # Docker Compose configuration
├── package.json     # Project dependencies and scripts
└── tailwind.config.js # Tailwind CSS configuration

Components​

  • Dashboard: pages/dashboard.js

    • Renders the authenticated applicant dashboard for task visibility and submission status.
    • Redirects unauthenticated users to the UI SSO login flow.

  • SSO Authentication: api/sso.js

    • Builds CAS redirect URLs and starts the login redirect to https://sso.ui.ac.id/cas2.

  • API Interceptor: api/api.js

    • Injects the JWT bearer token into outgoing Axios requests.

  • Redux Store: _store/store.js, _store/auth/authSlice.js

    • Tracks the active user session across pages using Redux Toolkit.

☁️ Operational Playbook

Infrastructure​

  • Cloud Provider: Standard Docker infrastructure / Vercel (Support available via standard Next.js build). Currently structured with docker-compose.yml for generic container hosting.
  • Link: https://join.ristek.cs.ui.ac.id/

Environment Variables​

KeyDescriptionDefault (Dev)Sensitive?
NEXT_PUBLIC_REGISTRATION_START_DATEstart of registration2024-02-17T02:00:00.000ZNo
NEXT_PUBLIC_REGISTRATION_END_DATETimestamp for end of registration2024-03-02T16:55:00.000ZNo
NEXT_PUBLIC_SELECTION_START_DATETimestamp for start of selection tests2024-03-03T02:00:00.000ZNo
NEXT_PUBLIC_SELECTION_END_DATETimestamp for end of selection tests2024-03-08T16:55:00.000ZNo

🙋Questions

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