Software Engineer / AI & ML

Real World Fake Data Website

April 25, 2026/react/typescript/laravel/inertia

🏗️ System Architecture

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.

[IMAGE: Figure 4.4 — A: Homepage Desktop; B: Homepage Tablet; C: Homepage Mobile; D: Sidebar]

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.

[IMAGE: Figure 4.5 — A: Feature Section Desktop & Tablet; B: Feature Section Mobile]

🗂️ Dataset Card Component

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.

text?categories[0]=BigData&categories[1]=Scala&data_type=csv

Laravel parses the generated query string and returns filtered results without reloading the page.

[IMAGE: Figure 4.8 — A: Multi-filter Search (inactive); B: Multi-filter Search (active)]

♾️ Infinite Scroll

Two implementations were evaluated for incremental dataset loading.

Approach 1: Inertia <WhenVisible>

jsx<WhenVisible
  params={{ page: pagination.current_page + 1 }}
  fallback={<LoadingDots />}
>
  {/* next page trigger */}
</WhenVisible>

This method is declarative and optimized internally by Inertia.

Approach 2: Custom useInfiniteDatasets Hook

This approach uses IntersectionObserver directly:

Observe an invisible target element at the end of the list

Trigger handleScrollFetch when the target becomes visible

Build the next-page request manually with router.visit

Merge new data into React state

This provides more control, but introduces a visible delay due to manual state updates and request handling.

[IMAGE: Figure 4.9 — Infinite Scroll Illustration]

✍️ WYSIWYG Editor

The portal integrates BlockNote, a block-based editor inspired by Notion, for dataset descriptions and notebook content.

Supported features:

Tables

Headings

Bold and italic formatting

Ordered and unordered lists

Code blocks with syntax highlighting

Each content block is serialized as JSON with properties such as content, type, and styling metadata.

[IMAGE: Figure 4.10 — WYSIWYG Editor View]

📊 Data Preview

The useDataPreview hook encapsulates file parsing logic outside the UI layer.

File Format	Library	Key Config
`.csv`	Papa Parse	`header: true`, `preview: FORM_CONFIG.PREVIEW_ROWS`
`.xlsx` / `.xls`	SheetJS (XLSX)	`FileReader` → `XLSX.read()` → `.slice(0, PREVIEW_ROWS)`

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.

[IMAGE: Figure 4.14 — A: Datasets Page; B: Notebooks Page]

🏷️ Categories Page

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.

Role	Available Menu Items
Admin	Dashboard, Datasets & Notebooks, Users, Categories
Verifier	Dashboard, Datasets
Civitas	Dashboard, Favorites, Datasets & Notebooks (own content only)

[IMAGE: Figure 4.19 — A: Admin Sidebar; B: Verifier Sidebar; C: Civitas Sidebar]

🧑‍💼 Admin Dashboard

The admin dashboard consists of three main layers:

KPI cards: Total Users (15), Total Datasets (51), Total Notebooks (86), Pending Verification (7)

Visual summaries: dataset upload chart over the last six months and notebook creation summary

Recent Datasets table: latest uploads with title, uploader, date, and verification status

[IMAGE: Figure 4.16 — Admin Dashboard]

✅ Verifier Dashboard

The verifier dashboard is optimized for review workflow.

KPI cards: Pending Verification (4), Verified This Month (18), Total Datasets (51), Total Users (15)

Trend chart: verification activity over six months

Pending Verification table: title, author, file type, and upload time

[IMAGE: Figure 4.17 — Verifier Dashboard]

👨‍🎓 Civitas Dashboard

The civitas dashboard is a personal workspace for students, lecturers, and researchers.

KPI cards: My Datasets (1), My Notebooks (2), Total Favorites (2), Total Views

Activity chart: six-month contribution history

Quick Actions: upload dataset, create notebook, browse favorites

My Content and My Favorites panels: content ownership and saved references

[IMAGE: Figure 4.18 — Civitas Dashboard]

🧩 Shared Dashboard Components

🧱 Dynamic Table

The <DynamicTable> component is reusable across datasets, users, and notebooks. Its behavior is fully controlled through props.

Core features:

Dynamic sorting

Per-column filtering

Server-side pagination

Row actions

Nested property access through getNestedValue

[IMAGE: Figure 4.20 — Dynamic Table]

📝 Create and Edit Dataset

The dataset management form supports the full dataset lifecycle.

Create form: description, cover image, dataset file, and auto-generated data preview

Edit form: preloaded metadata and editable content fields

[IMAGE: Figure 4.21 — A: Create Dataset Page; B: Edit Dataset Page]

📘 Create and Edit Notebook

Create form: title, description, linked dataset, categories, language, and WYSIWYG body

Edit form: existing metadata displayed above editable fields

[IMAGE: Figure 4.22 — A: Create Notebook; B: Edit Notebook]

👥 User Management

Admin can create and edit users through dedicated forms:

Name

Password

Role assignment

[IMAGE: Figure 4.23 — A: Create User; B: Edit User]

🏷️ Category Management

Categories are divided into:

Languages

Tags

This structure supports both notebook technology labels and topic-based dataset classification.

[IMAGE: Figure 4.24 — A: Create Category; B: Edit Category]

⚙️ User Settings

The settings page intentionally limits editable fields to:

Profile Image

Full Name

Email, password, and role are managed through the university's API. 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.