May 2021 – Dec 2022
Qbench
Laboratory SaaS customer portal and billing
A SaaS portal for managing laboratory data from test start to completion. A super admin configures table columns, form elements and form order, and the portal renders them without code changes.
- Role
- Sole frontend engineer
0
code changes to reconfigure
Stripe
billing & subscriptions
Problem
Every customer needed different columns, fields and form order, and changing code per customer would not scale.
Constraints
- One frontend engineer.
- Every form element type had to be supported from configuration.
Architecture
What I built
Config-driven engine
An engine that renders dynamic forms and tables from backend configuration through a common control panel, handling every form element type.
Billing and subscriptions
A billing module on Stripe Checkout covering subscriptions, payments, invoices and transactions.
Data and uploads
Redux for app state, React-Query for server data and caching, and direct uploads to Azure Blob Storage through pre-signed URLs.
Decisions and trade-offs
Configuration over code
Choice: Render UI from backend config instead of building per-customer screens.
Trade-off: A more complex engine up front, in exchange for admins customizing the portal themselves.
Results
- Admins reconfigure the portal without developer involvement.
What I'd do differently
- A schema for the configuration, validated on load, would make the engine safer to extend.
Next case study
DDMind →