oprec-frontend2026 - Documentation
| Document Status | ||
|---|---|---|
| Document Owner | Product Engineering 2026 | Product Engineering 2026 |
| Contributors | ||
| Project Links | https://github.com/RistekCSUI/oprec-frontend-2026 | https://github.com/RistekCSUI/oprec-frontend-2026 |
| Project Links | https://join.ristek.cs.ui.ac.id/ | https://join.ristek.cs.ui.ac.id/ |
| Project Links | https://api.join.ristek.cs.ui.ac.id/ | https://api.join.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 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
API is consumed via axios with interceptors to inject JWT Tokens pointing to https://stg.api.join.ristek.cs.ui.ac.id/api. Core endpoints called from frontend: /profile/ - Member Profile /event-deadlines/ - Timeline and Deadlines /divisions/ - List of divisions /submissions/ - Submission form /login/ & /login-ldap/ - Auth
Data Model/Schema
Data models reside on the backend. The frontend handles transient state modeling (Auth user token, Login status) mapped in localStorage 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
| Layer | Paths | Responsibility |
|---|---|---|
| Dashboard | pages/dashboard.js | The main authenticated page for users to view tasks and status. Redirects unauthenticated users to UI SSO CAS Login automatically. |
| SSO Authentication | api/sso.js | Handles building the redirect URLs to https: //sso.ui.ac.id/cas and triggering redirects. |
| API Interceptor | api/api.js | Injects the JWT bearer token stored in standard browser memory onto any outgoing axios requests to ensure all actions are authenticated. |
| Redux Store | _store/store.js & _store/auth/authSlice.js | Keeps track of the user session actively across all pages using the @reduxjs/toolkit configureStore. |
☁️ 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
| Key | Description | Default (Dev) | Sensitive? |
|---|---|---|---|
| NEXT_PUBLIC_REGISTRATION_START_DATE | start of registration | 2024-02-17T02:00:00.000Z | No |
| NEXT_PUBLIC_REGISTRATION_END_DATE | Timestamp for end of registration | 2024-03-02T16:55:00.000Z | No |
| NEXT_PUBLIC_SELECTION_START_DATE | Timestamp for start of selection tests | 2024-03-03T02:00:00.000Z | No |
| NEXT_PUBLIC_SELECTION_END_DATE | Timestamp for end of selection tests | 2024-03-08T16:55:00.000Z | No |
🙋Questions
🗒 List of frequently asked questions or question that need to be answered that is related to this initiative ..