The RWFD portal is built on an MVC architecture with the following tech stack:
Front-end: React.js for dynamic, interactive UI
Back-end: Laravel for business logic, authentication, and data communication
Adapter: Inertia.js, bridging React front-end with Laravel's server-side routing and enabling SPA behavior without a separate REST API
Database: PostgreSQL for relational data storage, including datasets, notebooks, users, and metadata
[IMAGE: Figure 4.1 — RWFD System Architecture Diagram]
⚡ Single Page Application (SPA)
Inertia.js acts as the core adapter that enables page navigation without a full browser reload. This gives the portal a desktop-like interaction model while keeping Laravel responsible for routing and controllers.
[IMAGE: Figure 4.2 — SPA Architecture Diagram]
🖥️ Server-Side Rendering (SSR)
SSR is layered on top of the SPA architecture. On the initial request, the server returns fully rendered HTML, which improves SEO and reduces perceived initial load time.
[IMAGE: Figure 4.3 — SSR Flow Diagram]
🌐 Public Pages
The public-facing portal is the main access point for all Universitas Airlangga members. It exposes datasets, notebooks, and core discovery features without requiring login.
📱 Responsive Layout
The homepage is designed across three breakpoints:
Desktop (≥ 1024px): horizontal navigation bar
Tablet (≥ 768px): hamburger menu with collapsible sidebar
Mobile (≥ 640px): sidebar controlled via React state and useEffect
The sidebar automatically closes when the user scrolls. This is implemented with a scroll listener that updates the component state.
The Feature Section uses a four-column grid on larger screens. On mobile, it shifts into a stacked flex layout to preserve readability and touch accessibility.
Each Dataset Card exposes key metadata such as title, upload date, short description, and cover image.
Key behaviors:
Long descriptions are truncated with ellipsis for layout consistency
Category tags act as active links to filtered dataset pages
A star icon allows users to save items to favorites
A custom React hook handles image fallback when the main image fails to load
[IMAGE: Figure 4.6 — A: Dataset Card with Image; B: Dataset Card with Placeholder]
📓 Notebook Card Component
The Notebook Card displays an analysis title, creation date, and technology stack. It also links directly to the source dataset to support traceability and reproducibility.
Author avatar handling:
If the user has a valid profile image, display it
If not, generate an initials placeholder automatically
[IMAGE: Figure 4.7 — A: Notebook Card with Avatar; B: Notebook Card with Initials Placeholder]
🔎 Multi-Filter Search
The search component has two states:
Default state with a search input and a "Filters" button
Expanded state with multi-select filter controls such as category and file type
Selected values are stored in arrays inside React state. The request is only sent after the user presses Apply, which prevents unnecessary repeated fetching.
The preview component renders headers and rows dynamically with .map(). Horizontal overflow is enabled for wide tables, and long column titles are truncated.
[IMAGE: Figure 4.11 — Data Preview Table]
👤 User Profile Page
The profile page acts as a public portfolio for each registered user. It collects contributed datasets and notebooks in a single location and presents them with reusable card components for visual consistency.
[IMAGE: Figure 4.12 — User Profile Page]
🌍 Global Search
Global Search covers datasets, notebooks, users, and categories from one search input.
Two interface states are used:
Empty state: displays Popular Tags and Trending Searches
Results state: groups matches into tabs such as Datasets, Notebooks, Users, and Categories
This makes the feature useful both as a direct search tool and as a discovery mechanism.
[IMAGE: Figure 4.13 — A: Global Search (empty state); B: Global Search Results]
📚 Datasets and Notebooks Pages
Both pages follow the same structural pattern:
Title and short description
Primary action buttons
Local search and filters
Card-based content layout
The Datasets page highlights Top Datasets. The Notebooks page highlights Recently Added and Popular Notebooks.
The Categories Page aggregates datasets by topic, such as Stock Market Data. Users can reach this page by clicking category tags or selecting a popular tag from search results.
[IMAGE: Figure 4.15 — Categories Page (Stock Market Data example)]
🧭 Role-Based Dashboard
The portal dashboard is designed for three roles: Admin, Verifier, and Civitas.
🛡️ Dynamic Sidebar (RBAC)
Navigation is generated based on the authenticated user's role.
The settings page intentionally limits editable fields to:
Profile Image
Full Name
Email, password, and role are managed through the university'sAPI. This keeps user identity data centralized and avoids cross-system inconsistency.
[IMAGE: Figure 4.25 — User Settings Page]
⚠️ Challenges and Solutions
🎨 Incomplete UI/UX Specifications
Problem: Some designs lacked state definitions such as loading, error, and empty conditions.
Solution: Each component state was explicitly defined before implementation. This reduced assumptions and produced more consistent front-end behavior.
🚀 Performance on Large Datasets
Problem: Large payloads caused slow loading and poor interaction quality.
Solution: Laravel controllers were optimized to fetch only required columns. Combined with pagination, this reduced Inertia payload size and improved performance.
🔀 Infinite Scroll Conflict on Multi-List Pages
Problem: Dataset and notebook lists on the same page interfered with each other's loading state.
Solution: Separate URL parameters were introduced to isolate data requests.
textGET /data?type=datasets
GET /data?type=notebooks
Each component now requests only its own data source, preventing cross-triggered updates.