Scaling an Academic Legacy System
with Zero Downtime.
How we transformed fragmented, independently built departmental apps into a unified, scalable faculty platform serving 6,000+ active students.
A Mission-Critical System That Grew Without Central Standards.
Each academic department had developed its web tools in silos within the same repository. Over time, folder structures diverged, UI patterns duplicated wildly, and conflicting state lifecycles made faculty-wide feature rollouts high-risk and slow.
Core Problem Statement
190+ fragmented components and un-typed API calls caused critical regressions during exam enrollment periods, with no unified design system or role hierarchy across 6 study programs.
Key Friction Points
- 190+ duplicated components across 6 departmental folders
- Zero shared design token standard or atomic primitives
- Conflicting role permissions between faculty executives and coordinators
- Strict zero-downtime requirement during active semester operations
Engineering Objectives
- Consolidate 190+ components down to ~25 atomic primitives
- Establish strict TypeScript API contracts across all data layers
- Redesign Role-Based Access Control (RBAC) into 4 distinct workflows
- Deploy incremental changes without disrupting active student services
Key Engineering Metrics
Supported across undergraduate and graduate programs during peak enrollment periods.
Conducting academic validation, thesis defense scheduling, and grading.
86.8% reduction in component footprint via shared design token architecture.
Zero operational interruptions achieved across the entire 6-month migration pipeline.
Architectural Evolution: Legacy vs Modern
190+ bespoke buttons, cards, and modal components scattered across 6 department directories.
25 atomic design primitives in a central @/components/ui library with strict token styling.
Implicit `any` types and inconsistent JSON payload parsing causing silent runtime errors.
Strict TypeScript interfaces and schema validators for all academic API endpoints.
Overlapping permission logic where department admins could accidentally modify global configs.
4 isolated, role-gated permission levels (Dean, Web Admin, Dept Admin, Coordinator).
Scalability and Production Safety over Idealistic Perfection.
The initial engineering instinct was a scorched-earth total rewrite. However, rigorous staging tests revealed cascading breaking changes that risked university operations. We chose an incremental micro-migration path instead.
Full Ground-Up Rewrite
Tear down the legacy codebase and rebuild everything from scratch on a new stack.
Strangler Fig Incremental Migration
Refactor core UI primitives and extract APIs incrementally while keeping live routes online.
Rationale: Option B allowed us to deliver component consolidation and RBAC isolation in two-week sprint cycles without ever taking student registration offline.
Four-Tier Monorepo Architecture.
Organized the frontend into clearly decoupled concerns: presentation primitives, role-aware business logic, typed API clients, and cached query states.
Layer 1: Design System Primitives (@/components/ui)
Presentational Tokens & AtomsStateless, fully accessible UI controls adhering to unified color, spacing, and radius tokens.
ButtonPropsCardPropsBadgePropsModalPropsLayer 2: Role-Gated Feature Modules (@/components/features)
Domain Logic & RBAC EnforcementEncapsulates workflow logic for Dean approvals, thesis defense scheduling, and syllabus publishing.
UseRolePermission()AcademicSessionGuardLayer 3: Typed API Client & State Layer (@/services)
Data Fetching & Schema ValidationProvides strictly typed API contracts with optimistic UI updates and structured error boundaries.
ApiResponse<T>StudentEnrollmentSchemaLecturerScheduleLayer 4: Backend Microservices & Database
Core Data & AuthenticationHigh-throughput relational data storage and centralized faculty authentication services.
Bearer AuthPostgres Migration SchemaKey Engineering Solutions Implemented.
Four-Role RBAC Workflow Architecture
Designed and implemented strict role isolation separating Dean/Faculty Executives, Web Administrators, Department Heads, and Student Coordinators to eliminate privilege escalation and cross-department data collisions.
- Role-specific dashboard views and permission guard matrix
- Eliminated unauthorized cross-department configuration edits
Atomic Design System & Component Consolidation
Consolidated 190+ disparate departmental components into 25 reusable atomic primitives in @/components/ui, reducing code duplication by 86.8% and cutting client bundle footprint.
- Standardized design tokens, bento radii, and typography scales
- Shared across all 6 study program sub-modules
High-Throughput Academic Data Table Primitive
Engineered a reusable, paginated Data Table primitive with server-side query syncing, debounced multi-field filtering, column visibility toggling, and optimistic batch approval actions for faculty lecturers.
- Smooth rendering for 500+ student thesis records per view
- Zero layout shift during live query filtering
Standardized Frontend Engineering & CI/CD Discipline
Established branch protection policies, mandatory PR code review checklists, automated TypeScript/ESLint CI verification, and consistent atomic component naming across the 4-engineer frontend team.
- Zero broken production builds across all 6 months of migration
- Consistent developer velocity and maintainable codebase
System Proof & Architecture Artefacts.
Live interface previews and verified component reductions demonstrating the clean faculty-wide experience.
Figure 1.0: Primary unified interface view — consolidating study program management, academic stats, and approval queues into one portal.
Asset Note: Candidate can attach secondary in-depth production screenshots (e.g. RBAC permission matrix view, component design token spec) when additional visual captures are available.
Single source of truth for 6 academic study programs.
Massive maintenance overhead reduction across UI layers.
Seamless student registration during semester peaks.
Verified Outcomes & Technical Impact.
Measurable improvements achieved across faculty operations, developer velocity, and system resilience.
Unified Platform for 6,000+ Students
Students across 6 departments access enrollment, academic records, and thesis defense submissions through a single standardized UI.
Accelerated Velocity for 4 Frontend Devs
With shared atomic design primitives and typed API contracts, new departmental features ship in days instead of weeks.
Zero Broken Builds & Production Safety
Automated lint/typecheck pipelines and branch protection rules eliminated deployment regressions completely.
Strict Four-Role Executive Governance
Deans, Department Heads, and Coordinators have isolated, audited operational views without data permission overlaps.
"The unified architecture turned a chaotic web of separate departmental tools into a modern, reliable platform our faculty can count on during every semester peak."
"Great engineering isn't about building the perfect theoretical architecture. It's about making pragmatic decisions that protect active users and scale under real-world constraints."
Leading the frontend for FIK Apps taught me how to balance architectural purity with production realities. Knowing when to refactor, when to preserve legacy compatibility, and how to rally a team around shared standards is what transforms good code into lasting value.
Key Takeaways
- Pragmatism beats perfection: An incremental strangler migration delivers immediate value with zero downtime.
- Component discipline compounds: 25 well-crafted atomic primitives eliminate hundreds of lines of technical debt.
- Role design is system design: Clean RBAC boundaries prevent user error and protect data governance.