CONFIG-DRIVEN FRONTEND FRAMEWORK

Platform Engineering & System Ownership (UI Infrastructure)

Context

Designed, built, and owned an internal config-driven UI platform at Frugal Scientific, built on React (Vite), Material UI, Redux Toolkit, and Redux-Saga. The system enables teams to generate complete enterprise admin interfaces—tables, forms, filters, drawers, permissions, and CRUD workflows—entirely from declarative configuration. Built for high reuse, controlled extensibility, and long-term maintainability, it is now the company-wide standard powering multiple production products.

Problem Statement

Across logistics and master-data products, admin interfaces followed nearly identical patterns but were implemented repeatedly with custom React components and Redux logic. This resulted in large-scale code duplication, inconsistent UX behavior, slow feature delivery, and high maintenance cost when requirements changed.

Architecture Overview

Architecture Diagram for CONFIG-DRIVEN FRONTEND FRAMEWORK

Technical Highlights

  • Built with React + Vite for fast builds and modern development workflow
  • Material UI used as the base design system with framework-level consistency
  • Redux-Saga used for complex async flows including dynamic filter query construction
  • Supports role-based permissions, base filters, default sorting, and API module routing via configuration
  • Configuration supports nested object mapping, constant value injection, computed fields, and custom cell renderers
  • Custom React form components can be injected per module when advanced validation or workflows are required

System Flow / Design Decisions

  • Adopted a declarative, config-first approach to define admin modules instead of duplicating React code
  • Built a single orchestrator component that renders tables, drawers, and forms dynamically from menu configuration
  • Standardized async behavior using Redux-Saga to centrally handle API orchestration, filters, sorting, and pagination
  • Implemented a multi-keyed Redux state architecture to isolate data, loading state, and caching per admin module
  • Designed a flexible field-rendering system supporting complex data types, nested objects, and custom render overrides
  • Introduced controlled escape hatches via a Form Registry, allowing injection of custom React forms when configuration alone is insufficient

Impact & Outcomes

  • Adopted as the standard admin UI platform across 5+ production projects
  • Used daily by co-developers across multiple teams
  • Powers 100+ admin screens generated primarily from configuration
  • Reduced time to build a new admin menu section from 2–3 days to 1–2 hours
  • Reduced frontend codebase size by ~50% by eliminating duplicated admin logic
  • Eliminated the equivalent of hundreds of thousands of lines of redundant UI code across products

Interface Snapshots & Docs

PDF Framework Overview

Screens shown are representative and anonymized.