ulaskelas-frontend - Documentation
| Document Status | ||
|---|---|---|
| Document Owner | Product Engineering 2026 | Product Engineering 2026 |
| Contributors | ||
| Project Links | https://github.com/ristekoss/ulaskelas-frontend | https://github.com/ristekoss/ulaskelas-frontend |
| Project Links | https://ulaskelas-rfhsl14cq-webdev-uiacid.vercel.app/en | https://ulaskelas-rfhsl14cq-webdev-uiacid.vercel.app/en |
| 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
This repository contains the Flutter frontend for the UlasKelas experience. The application provides course discovery, reviews, calculator flows, leaderboard features, and profile management while integrating with backend APIs and client-side caching to support the main user journey.
Stakeholders
- Users: UI students
- Upstream Dependencies: Backend service
- Downstream Consumers: End users
Scope & Boundaries
- In Scope: Frontend pages, state management, platform-specific build configuration
- Out of Scope: Backend business logic
⚙️ Architecture & Design
System Diagram
Architecture Decisions (ADRs)
- Language/Framework: Flutter, dart
- Database: firebase
- Communication: Synchronous via HTTP call
💻Technical Specifications
API Documentation
Data Model/Schema
Project Structure
lib/ # main Flutter application source
├── app.dart # root MaterialApp setup and analytics
├── app_wrapper.dart # splash, version check, and startup routing gate
├── authentication_page.dart # login entry screen before SSO
├── main_page.dart # main bottom-navigation shell
├── onboarding_page.dart # onboarding flow for first install
├── core/ # shared app foundation used across features
│ ├── bases/ # base states, enums, entities, and reusable widgets
│ ├── client/ # dio request helpers and API call wrappers
│ ├── constants/ # app-wide constants, route names, asset names
│ ├── environment/ # flavor config, endpoints, and package settings
│ ├── error/ # failures and error handling helpers
│ ├── extension/ # shared Dart/response extensions
│ └── theme/ # colors, fonts, and theme definitions
├── documentation/ # supporting technical docs
│ └── data_and_backend.md # frontend-backend communication notes
├── features/ # feature modules grouped by business domain
│ ├── home/ # home dashboard, review history, current semester data
│ ├── kalkulator/ # calculator pages, states, models, and component flows
│ ├── leaderboard/ # leaderboard ranking, tags, guideline, and states
│ ├── matkul/ # course-related features
│ │ ├── bookmarks/ # bookmarked course flow
│ │ ├── detail/ # course detail page and review listing
│ │ ├── form/ # review submission form and tag selection
│ │ ├── main/ # shared course repository and datasource layer
│ │ └── search/ # course search, filters, and search results
│ ├── profile/ # user profile retrieval and account actions
│ └── sso/ # SSO webview and authentication progress state
└── services/ # shared device and persistence services
├── versioning/ # app version check helpers
├── file_service.dart # local file read/write helper
├── hive_db_service.dart # Hive persistence wrapper
├── launch_service.dart # external URL/browser launcher
├── pref_service.dart # shared preferences helper
└── share_service.dart # native share helper
assets/ # static UI assets
├── icons/ # SVG and icon assets
└── images/ # illustrations, logos, and images
android/ # Android-specific build and flavor config
ios/ # iOS-specific project files
web/ # web entry files, manifest, and icons
macos/ # macOS runner configuration
linux/ # Linux runner configuration
windows/ # Windows runner configuration
test/ # widget and automated test files
pubspec.yaml # Flutter dependencies and asset registration
firebase.json # Firebase hosting configuration
README.md # repository readme and technical documentation
CONTRIBUTING.md # contribution guidelines
pull_request_template.md # pull request template
Components
| Layer | Paths | Responsibility |
|---|---|---|
| App Shell | app.dart, app_wrapper.dart, main_page.dart, authentication_page.dart, onboarding_page.dart | Bootstraps application-wide concerns and determines the initial screen. |
| Navigation Layer | lib/core/bases/states/navigation_state.dart | Encapsulates route transitions using a centralized navigation state object. |
| Global Reactive State (GlobalState, AuthState, ThemeState, ProfileState, BookmarkState, SearchCourseState, LeaderboardState, CalculatorState, ComponentFormState) | — | Registers long-lived reactive models shared across multiple screens. |
| Theme & Design System | lib/core/theme/..., lib/core/bases/widgets/... | Defines shared UI elements including colors, typography, reusable components, and integration with ristek_material_component. |
| Authentication & SSO | features/sso/presentation/pages/sso_web_page.dart, features/sso/presentation/states/progress_webview_state.dart, authentication_page.dart | Handles login entry points and manages the SSO webview authentication flow. |
| Home Experience (HomePage, HomeCourseListPage, HomeDaftarUlasanPage, CurrentTermCourseState, ReviewHistoryState) | — | Provides the landing page and quick access to course lists and user reviews. |
| Course Catalog Core | features/matkul/main/domain/..., features/matkul/main/data/... | Defines core data contracts and repository infrastructure for course-related features. |
| Course Search & Filter | SearchCoursePage, FilterPage, SearchCourseState, FilterState, search_list_view.dart, card_course.dart | Supports course search functionality including keyword search, filtering, pagination, and search result presentation. |
| Course Detail & Reviews | DetailMatkulPage, AllReviewMatkulPage, ReviewMatkulPage, CourseDetailState, review_card.dart, title_and_bookmark.dart, star_rating.dart | Displays detailed course information, review summaries, full review lists, and bookmark interactions. |
| Review Submission | ReviewMatkulFormPage, AddReviewMatkulTagPage, SuccessFormPage, ReviewCourseFormState, SearchTagState, ReviewCourseState, form_rating_component.dart, guideline_card.dart | Handles user input for reviews, including tagging, rating, form submission, and success feedback. |
| Bookmarks | BookmarksPage, BookmarkState, card_bookmark.dart | Retrieves and displays bookmarked courses for quick access. |
| Calculator | CalculatorPage, SearchCourseCalculator, CalculatorComponentPage, ComponentFormPage, EditComponentPage, CalculatorState, ComponentState, ComponentFormState, card_calculator.dart, card_component.dart | Allows users to create grade calculators, manage score components, and compute final scores. |
| Leaderboard | LeaderboardPage, GuidelinePage, LeaderboardState, leaderboard_card.dart, leaderboard_tag.dart, skeleton_card_leaderboard.dart | Displays ranking data, leaderboard categories, and supporting UI components. |
| Profile | ProfilePage, ProfileState, profile_data.dart, keluar_button.dart | Manages user profile display and logout functionality. |
| Data Access Layer | data/datasources, data/repositories, data/models | Handles communication with APIs and maps responses into application models. |
| Shared Infrastructure | lib/core/client/..., lib/services/... | Provides shared utilities such as networking, storage, date/time helpers, version control, and external integrations. |
☁️ Operational Playbook
Infrastructure
- Cloud Provider: Vercel
- Link: https://ulaskelas-rfhsl14cq-webdev-uiacid.vercel.app/en
Environment Variables
| Key | Description | Default (Dev) | Sensitive? |
|---|---|---|---|
| BASE_URL_DEV | URL backend development | https://api-ulaskelas-stg.ristek.cs.ui.ac.id | No |
| BASE_URL_PROD | URL backend production | https://api-ulaskelas.ristek.cs.ui.ac.id | No |
🙋Questions
🗒 List of frequently asked questions or question that need to be answered that is related to this initiative ..