ristek-verify - Documentation
| Document Status | ||
|---|---|---|
| Document Owner | Product Engineering 2026 | Product Engineering 2026 |
| Contributors | ||
| Project Links | https://github.com/RistekCSUI/ristek-verify | https://github.com/RistekCSUI/ristek-verify |
| Project Links | https://verify.ristek.cs.ui.ac.id | https://verify.ristek.cs.ui.ac.id |
| Project Links | [Monitoring Dashboard] | [Monitoring Dashboard] |
| Project Links | [API Documentation] | [API Documentation] |
| Project Links | [Other Related Doc/Link] | [Other Related Doc/Link] |
| 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
RISTEK Verify is a public-facing web service used to validate certificate or ticket IDs issued by RISTEK and present the corresponding proof to end users. It solves the business problem of manual credential checking by giving organizers, participants, and external reviewers a single self-service verification flow tied directly to the official verification API.
Stakeholders
- Users: Event participants
- Upstream Dependencies: Backend
- Downstream Consumers: End users accessing the web application through a browser
Scope & Boundaries
- In Scope: UI and integration with the verify API endpoints.
- Out of Scope: Backend verification logic, certificate generation, ticket issuance, database changes, migration of historical data, frontend redesign outside the existing verification experience, and third-party integrations beyond the configured verify API.
⚙️ Architecture & Design
System Diagram
Architecture Decisions (ADRs)
- Language/Framework: TypeScript, React 18, Next.js 13
- Database: -
- Communication: Synchronous HTTPS calls
💻Technical Specifications
API Documentation
Data Model/Schema
Project Structure
ristek-verify/
├── src/
│ ├── app/
│ │ ├── components/ # Reusable UI such as navbar and result modals
│ │ ├── sections/ # Landing page sections (hero, about, contributors, footer)
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout and metadata
│ │ └── page.tsx # Main verification flow and API integration
│ └── type.ts # Shared TypeScript interfaces for API response data
├── public/
│ ├── assets/ # Decorative page assets
│ ├── icons/ # UI icons and favicon assets
│ └── images/ # Partner logos and modal images
├── docs/
│ └── verify-service-architecture.mmd
├── package.json
└── README.md
Components
| Layer | Paths | Responsibility |
|---|---|---|
| Application Shell Layer | src/app/layout.tsx | Initializes the Next.js app shell, including global stylesheet loading, metadata definition, favicon registration, font setup through next/font, and the root HTML/body wrapper used by all rendered pages. |
| Verification Orchestration Layer | src/app/page.tsx | Handles the main public verification flow, including client-side state for modal visibility and result payloads, synchronous API calls to the upstream verify service, response branching between certificate and ticket rendering, construction of certificate asset URLs, and user feedback through toast notifications. |
| Verification Input Layer | src/app/sections/HeroSection.tsx | Handles certificate or ticket ID collection from the landing page, manages local form state, adapts input copy based on viewport size, and triggers the parent verification action. |
| Verification Result Presentation Layer | src/app/components/CertModal.tsx, src/app/components/TicketModal.tsx | Renders the verification result UI for certificates and tickets, including metadata display, certificate image preview, PDF and PNG download actions, and clipboard-based copy interactions for IDs and certificate images. |
| Content and Navigation Layer | src/app/components/NavigationBar.tsx, src/app/sections/About.tsx, src/app/sections/Contributors.tsx, src/app/sections/Footer.tsx | Provides the supporting landing page structure around the verification feature, including top-level navigation, service context, contributor information, and footer content. |
| Type Definition Layer | src/type.ts | Stores the shared TypeScript interfaces for certificate and ticket payloads so the frontend can consistently model upstream verification responses. |
☁️ Operational Playbook
Infrastructure
- Cloud Provider: Vercel
- Link: https://verify.ristek.cs.ui.ac.id
Environment Variables
🙋Questions
🗒 List of frequently asked questions or question that need to be answered that is related to this initiative ..