Skip to main content
Case Study · Web Application

PentaDosen: Lecturer Research & Performance Management Platform

A centralized web platform for university lecturers to manage research grants, peer-reviewed publications, intellectual property (HKI), and academic schedules.

ROLE Frontend Developer
TIMELINE 2025–2026
PRIMARY STACK React · TypeScript · Vite · Tailwind
CORE MODULES Research · HKI · Calendar
PentaDosen UI Dashboard Screenshot showing Lecturer Research Management
01 // Overview

Executive Summary

PentaDosen is a research and academic performance management platform designed for university lecturers. It brings research, publications, HKI, and academic activities into a single workspace.

My focus was translating complex academic workflows into a clear, responsive, and reusable frontend experience.

02 // The Problem

Core Friction Points

01 Scattered Academic Documentation

Research outputs, publications, and HKI records were distributed across different documents and workflows.

02 Limited Status Visibility

Users had limited visibility into verification and submission status.

03 Disconnected Schedules

Academic deadlines and research milestones were difficult to track in one place.

03 // My Role & Scope

Frontend Engineering & UI Craft

UI / UX IMPLEMENTATION

Translated Figma designs into responsive interfaces and reusable layouts.

FRONTEND ARCHITECTURE

Built modular React components with TypeScript and Vite.

REST API INTEGRATION

Connected frontend workflows with REST endpoints for research and HKI data.

FORM VALIDATION & UX

Implemented validation, feedback states, loading states, and accessible interactions.

04 // Design Approach

Three Interaction Principles

01 · DISCLOSURE Progressive Disclosure

Show essential academic metrics first, while keeping detailed information accessible when needed.

02 · SCANNABILITY Scannable Status

Use clear status indicators so lecturers can understand progress at a glance.

03 · ADAPTABILITY Responsive Data

Design dense academic information to remain readable across desktop and mobile layouts.

05 // Architecture

How It Was Built

Component System Reusable React components were used to keep dashboard, form, and data interfaces consistent.
Styling System Tailwind CSS provided a consistent system for spacing, typography, and responsive styling.
Type Safety TypeScript interfaces provided consistent types for research, publication, and user data across the frontend.
API Layer REST endpoints were integrated through structured service logic with loading and error states.
06 // Core Capabilities

Key Features

📊 Executive Research Overview

Interactive summaries of active grants, publication totals, and research achievements.

📑 Publication Tracker

Categorized listings for indexed journals, conference proceedings, and book chapters.

🛡️ HKI & Patent Management

End-to-end status tracking for Copyrights, Patents, and Industrial Designs.

📅 Faculty Academic Calendar

Integrated timeline for grant submission deadlines, defenses, and faculty workshops.

07 // Problem Solving

Challenges & Solutions

CHALLENGE 01 · DENSE ACADEMIC DATA

Multi-column tables created layout overflow on small screens.

Solution: Designed adaptive card and table layouts that preserve important metadata while remaining readable on smaller screens.

CHALLENGE 02 · COMPLEX MULTI-STEP WORKFLOWS

HKI applications require multiple stages between lecturers and faculty reviewers.

Solution: Used reusable stepper and status patterns to make submission progress easier to understand.

08 // Takeaways

Outcome & What I Learned

Outcome

PentaDosen brings research, publication, HKI, and academic activity workflows into a unified interface designed for lecturers.

Key Learnings
Designing interfaces for information-dense workflows.
Building reusable React component patterns.
Integrating asynchronous REST API workflows.
Translating complex academic requirements into simpler interactions.