susunjadwal-frontend - Documentation
| Document Status | ||
|---|---|---|
| Document Owner | Product Engineering 2026 | Product Engineering 2026 |
| Contributors | ||
| Project Links | https://github.com/ristekoss/susunjadwal-frontend | https://github.com/ristekoss/susunjadwal-frontend |
| Project Links | https://susunjadwal.cs.ui.ac.id | https://susunjadwal.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
Susun Jadwal Frontend is the web client for Susun Jadwal, a schedule planning tool that helps students browse course offerings, assemble a conflict-free class plan, and save or share their preferred timetable. The application reduces the manual work of comparing classes, checking schedules, and exporting final plans by providing a single authenticated interface integrated with the Susun Jadwal backend and UI SSO.
Stakeholders
- Users: University students using Susun Jadwal and admins
- Upstream Dependencies: Susun Jadwal backend API, Mixpanel, and Google Analytics.
- Downstream Consumers: End users in the browser
Scope & Boundaries
- In Scope: Frontend routes and user interface changes, CI/CD pipeline modifications, frontend user flow redesign
- Out of Scope: Backend business rules, course scraping implementation, database schema changes, legacy data migration, and third-party integrations not already wired in this repository.
⚙️ Architecture & Design
System Diagram
Architecture Decisions (ADRs)
- Language/Framework: JavaScript, React 16, React Router v5, Redux.
- Database: PostgreSQL for relational data
- Communication: Synchronous HTTP calls with axios and fetch API for the SIAK scraping SSE endpoint.
💻Technical Specifications
API Documentation
Data Model/Schema
Project Structure
susunjadwal-frontend/
├── .github/workflows/ # Preview and production Vercel deployment workflows
├── public/ # Static HTML, manifest, redirects, favicon
├── src/
│ ├── assets/ # Icons, illustrations, fonts, images
│ ├── components/ # Reusable presentational components
│ ├── containers/ # Route-level and feature-level screens
│ ├── hooks/ # Custom hooks, tests, mocks
│ ├── redux/ # Store, reducers, selectors, modules
│ ├── services/ # API and SSO integration layer
│ ├── styles/ # Chakra and styled-components theme config
│ ├── utils/ # Analytics, auth, schedule formatting, helpers
│ ├── App.js # App shell, providers, router bootstrap
│ ├── config.js # Environment-aware runtime configuration
│ ├── index.js # React entry point
│ └── routes.js # Route definitions and auth-protected pages
├── package.json # Dependencies, scripts, lint-staged, engines
└── README.md
Components
| Layer | Paths | Responsibility |
|---|---|---|
| App Shell | src/App.js | Initializes router, Redux provider, Ads provider, responsive helper, loading overlay, and scroll restoration. |
| Routing | src/routes.js | Defines public routes, private routes, and layout composition with header/footer. |
| Auth Layer | src/services/sso.js, src/utils/auth.js, src/redux/modules/auth.js | Handles CAS redirects, token persistence, token validation, and logout flow. |
| Schedule Builder | src/containers/BuildSchedule/ | Fetches courses by major, filters/searches courses, tracks selection state, and preserves schedule state across refreshes. |
| Selected Courses and Checkout | src/containers/SelectedCourses/, src/containers/BuildSchedule/Checkout.js | Summarizes chosen classes and prepares save flow. |
| Schedule List | src/containers/ScheduleList/ | Lists saved schedules and supports comparison workflow. |
| View Schedule | src/containers/ViewSchedule/ | Renders timetable detail, rename/delete actions, share modal, image export, and ICS export. |
| Edit Schedule | src/containers/EditSchedule/ | Updates schedule compositions after creation. |
| Compare Schedule | src/containers/CompareSchedule/ | Compares two schedules side by side. |
| Feedback | src/containers/Feedback/, src/containers/Admin/Feedbacks/ | Captures user reviews and provides admin recap/status management. |
| Beta Experience | src/containers/BetaLanding/, src/containers/BetaForm/, src/containers/CompleteForm/ | Provides marketing and onboarding-related flows backed by Airtable. |
| Analytics | src/hooks/useMixpanel.js, src/utils/analytics.js | Tracks route views and user actions via Mixpanel and Google Analytics. |
☁️ Operational Playbook
Infrastructure
- Cloud Provider: Vercel
- Link: https://github.com/ristekoss/susunjadwal-frontend
Environment Variables
| Key | Description | Default (Dev) | Sensitive? |
|---|---|---|---|
| NODE_OPTIONS | Runtime configuration options passed to the Node.js process | --openssl-legacy-provider | No |
| REACT_APP_AWS_BACKEND_URL | Base URL of the backend API | https://stg.api.susunjadwal.cs.ui.ac.id/susunjadwal/api/ | No |
| REACT_APP_AWS_BACKEND_URL | Base URL of the backend API | https://api.susunjadwal.cs.ui.ac.id/susunjadwal/api | No |
| REACT_APP_MIXPANEL_PROJECT_TOKEN | Authentication token used to send analytics | — | Yes |
🙋Questions
🗒 List of frequently asked questions or question that need to be answered that is related to this initiative ..