← Back to showcase
System Architecture

CERP People Lifecycle Portal
Technical Design

How data, logic, and interface layers fit together in a zero-dependency, single-file architecture.

01
Data
Sources
533 records
CERP Member Data
241 active · 292 alumni
real KAUST records
11 PIs
Faculty Profiles
name · research area
LinkedIn · avatar
seed data
Onboarding Cases
let onboardingData[]
in-memory, mutable
seed data
Offboarding Cases
let offboardingData[]
in-memory, mutable
templates
Checklist Templates
18 onboarding tasks
17 exit tasks · categorized
↓
02
Application
Core
Lifecycle State Machine
New → Onboarding →
Active → Exit → Alumni
→
Progress Engine
% done · overdue detect
status auto-update
→
Exit Summary Builder
category → summary row
auto-derived, no manual input
→
Render Engine
renderDashboard()
renderOnboarding() etc.
→
Alert System
overdue flags
attention required count
↓
03
Portal
Modules
Dashboard
stats · lifecycle flow
tables · alerts
Onboarding
tracker · checklist modal
new joinee form
Offboarding
exit checklist panel
exit summary card
Current Members
241 members · search
filter by PI/role
Alumni Database
292 records · 2018–now
searchable history
People & Directory
faculty · admin · staff
LinkedIn + research area
↓
04
Admin
Outputs
Live Dashboard View
what needs action today
Checklist Progress
per-person task tracking
Exit Summary Report
auto-generated clearance doc
Overdue Alerts
flagged to dashboard
Alumni Record
permanent institutional memory
System Summary
Deployment
Single HTML file / no build step
Dependencies
Tailwind CSS / CDN only
Framework
Vanilla JS / no React/Vue
Active Members
241 / real CERP data
Alumni Records
292 / 2018–2025
Total People
533 / verified records
State Model
In-memory JS / session-persistent
Checklist Tasks
18 onboarding / 17 exit tasks
Server
python3 -m http.server / any static host
Data / People
Processing / UI
Lifecycle Operations
Outputs / Actions
Exit / Alumni
Templates / Alerts