ristek-summer-fest-v2 - Documentation
🔎 Background
Overview
RISTEK Summer Fest Frontend is the public-facing website and registration portal for the SISTECH and DATATHON programs. It provides event landing pages, registration status countdowns, and multi-step forms that collect participant data and submit it to the RISTEK backend API.
Stakeholders
- Users: Participants
- Upstream Dependencies: Backend API
- Downstream Consumers: End users
Scope & Boundaries
- In Scope: Next.js frontend pages, registration flows, client-side form validation, backend API integration, file upload flow, UI components used by SISTECH and DATATHON pages.
- Out of Scope: Backend business logic, backend database schema changes, admin dashboard functionality, infrastructure provisioning, third-party integrations outside the endpoints currently used by the frontend
⚙️ Architecture & Design
System Diagram
Architecture Decisions (ADRs)
- Language/Framework: typescrint, react, NextJs, tailwind CSS
- Database: PostgreSQL
- Communication: Synchronous HTTP
💻Technical Specifications
API Documentation
Data Model/Schema
Project Structure
ristek-summer-fest-v2/
├── pages/ # Next.js Pages Router routes for public pages and registration pages
│ ├── _app.tsx # app bootstrap, global CSS, default SEO, shared Layout, toast provider
│ ├── _document.tsx # custom HTML document wrapper for all pages
│ ├── index.tsx # landing page entry point
│ ├── sistech.tsx # SISTECH event page with countdown and event-state rendering
│ ├── datathon.tsx # DATATHON event page with countdown and event-state rendering
│ ├── sistech-registration/index.tsx # SISTECH registration route and registration-window check
│ ├── datathon-registration/index.tsx # DATATHON registration route and registration-window check
│ ├── success-sistech/index.tsx # SISTECH submission success page
│ └── success-datathon/index.tsx # DATATHON submission success page
├── components/ # reusable UI modules and feature-specific sections
│ ├── containers/ # page sections and event-specific feature containers
│ │ ├── Hero/ # homepage hero section
│ │ ├── PickYourField/ # homepage event selection cards
│ │ ├── LastYearExcitement/ # previous-event showcase and image carousel section
│ │ ├── Synapse/ # SISTECH event hero and coming-soon sections
│ │ ├── Medulla/ # DATATHON event hero and coming-soon sections
│ │ └── common/ # shared registration flow components used across event forms
│ │ ├── SistechRegistrationForm/ # SISTECH multi-step form controller
│ │ ├── DatathonRegistrationForm/ # DATATHON multi-step form controller
│ │ ├── PersonalInfoSistech/ # SISTECH personal information step
│ │ ├── RequirementSistech/ # SISTECH requirement upload step
│ │ ├── AdditionalSistech/ # SISTECH additional information and final step
│ │ ├── TeamInfoDatathon/ # DATATHON team information step
│ │ └── RequirementDatathon/ # DATATHON file upload and submission step
│ ├── contexts/ # React Context providers for multi-step form state persistence
│ │ ├── SistechFormContext/ # shared client-side state for SISTECH registration
│ │ └── DatathonFormContext/ # shared client-side state for DATATHON registration
│ └── elements/ # low-level reusable UI building blocks
│ ├── Input/ # text, checkbox, dropdown, textarea, and file input components
│ ├── Layout/ # navbar, footer, and page shell wrapper
│ └── Modals/ # reusable modal primitives for confirmation and feedback
├── config/ # runtime configuration and asset source definitions
│ ├── config.ts # API base URL and API key selection by environment
│ ├── cdn.ts # shared CDN mapping for icons and logos
│ └── ulaskelas-cdn.ts # additional CDN mapping constants
├── lib/ # shared libraries used across the app
│ └── seo/ # SEO helper wrappers around next-seo defaults and page metadata
├── styles/ # global style layer for Tailwind and custom CSS
│ └── globals.css # global font, theme variables, animations, and shared utility classes
├── utils/ # small helper functions used by pages and components
│ ├── CalculateTimeLeft.ts # countdown helper for event and registration timers
│ ├── AddLeadingZero.ts # number formatting helper
│ ├── GetDaySuffix.ts # date suffix helper
│ └── Cn.ts # class name merging helper
├── public/ # static assets served directly by Next.js
├── package.json # project scripts, dependencies, and frontend tooling
└── tailwind.config.js # Tailwind theme and utility configuration
│ ├── Input/
│ ├── Layout/
│ └── Modals/
├── config/
│ ├── config.ts
│ ├── cdn.ts
│ └── ulaskelas-cdn.ts
├── lib/
│ └── seo/
├── styles/
├── utils/
├── public/
├── package.json
└── tailwind.config.js
Components
| Layer | Paths | Responsibility |
|---|---|---|
| App Bootstrap | pages/_app.tsx, components/elements/Layout/index.tsx | Initializes the global frontend shell, including global CSS, default SEO metadata, toast notifications, shared navbar/footer layout, and a floating action button across all pages. |
| Landing Page Modules | pages/index.tsx, components/containers/Hero/, components/containers/PickYourField/, components/containers/LastYearExcitement/ | Render the public homepage, including the hero section, event selection cards, and showcase of previous events. |
| SISTECH Event Module | pages/sistech.tsx, pages/sistech-registration/index.tsx, components/containers/Synapse/, components/containers/common/SistechRegistrationForm/, components/containers/common/PersonalInfoSistech/, components/containers/common/RequirementSistech/, components/containers/common/AdditionalSistech/ | Handles the SISTECH event flow, including landing page, registration availability checks, multi-step form, participant data collection, requirement uploads, and final submission to backend APIs. |
| DATATHON Event Module | pages/datathon.tsx, pages/datathon-registration/index.tsx, components/containers/Medulla/, components/containers/common/DatathonRegistrationForm/, components/containers/common/TeamInfoDatathon/, components/containers/common/RequirementDatathon/ | Handles the DATATHON event flow, including landing page, registration availability checks, team-based registration, required file uploads, payload normalization, and final submission to backend APIs. |
| Form State Layer | components/contexts/SistechFormContext/index.tsx, components/contexts/DatathonFormContext/index.tsx | Stores multi-step registration data and uploaded file keys using React Context to persist user input across steps before submission. |
| Reusable Input Layer | components/elements/Input/, components/elements/Input/FileInput.tsx | Provides reusable form components and file upload handling, including validation, upload requests to POST /upload-file/, and propagation of file keys into form state. |
| Modal and Feedback Layer | components/elements/Modals/, react-hot-toast | Provides reusable modals, confirmation dialogs, success states, and inline user feedback throughout the registration process. |
| SEO Layer | lib/seo/, pages/_document.tsx | Centralizes SEO configuration, page metadata, and document-level HTML structure used across the application. |
☁️ Operational Playbook
Infrastructure
- Cloud Provider: Vercel
- Link: https://event.ristek.cs.ui.ac.id
Environment Variables
| Key | Description | Default (Dev) | Sensitive? |
|---|---|---|---|
| NEXT_PUBLIC_VERCEL_ENV | Deployment mode | production | No |
🙋Questions
🗒 List of frequently asked questions or question that need to be answered that is related to this initiative ..