<h1 role="heading" data-level="1">AyaSenior Frontend Platform Engineer · 5+ yrs</h1>

<FrontendEngineer />specialising inReact
Profile portrait

Architecting high-performance React systems and standardizing enterprise engineering patterns.

SENIOR Platform WORK

Featured Case Studies & Architecture

-30%
Boilerplate Reduction

UI Architecture & Standardization

Core Systems Engineering

Architected the enterprise UI ecosystem over 5 years. Delivered a localized Design System, reusable component library, and standardized validation patterns (Formik/Yup/MUI), slashing feature delivery time from 3+ weeks to 2 days.

ReactFormik + YupDesign SystemMUI / Excel
System Architecture
Core Systems Engineering

A centralized ecosystem reducing redundancy. Validations, components, and theming are standardized at the root.

Tokens
Schema
a11y
System
MUI Theme | Styled
Logic
Formik Ctx Yup
Output
ARIA Fields
1M+
Records Handled

High-Scale Data Engine

Performance Engineering

Optimized a mission-critical planning tool using React Virtualization and Web Workers to achieve sub-16ms latency for massive datasets.

React VirtualizedWeb WorkersRedux ToolkitReselect
System Architecture
Performance Engineering
FRONTEND
Apollo Client
BACKEND
HotChocolate
ListVirtual
FetchBatched
Aggr.Paged
40%
Faster Builds

Platform Modernization

Developer Experience

Migrated legacy Webpack architecture to a modular Vite ecosystem, establishing standardized micro-frontend configs and automated versioning.

ViteTurborepoCustom PluginsGitHub Actions
System Architecture
Developer Experience
Platform Config
Vite Plugins
DX Layer
Tokens · i18n
Security
OIDC · JWT
ISO
Compliance Ready

Security Operations (AppSec)

Security & Compliance

Designed a Zero-Trust authentication architecture with client-side encryption and automated secret scanning pipelines to meet enterprise standards.

OIDC/JWTDependabotSonarQubeTrivy
System Architecture
Security & Compliance
Guardrails
Lint · Secrets
CI Matrix
Sonar · BlackDuck
Audit
SBOM · Logs
+25%
Import Success Rate

Hybrid Import Engine

Product & UX Architecture

Designed a resilient hybrid import flow (client preview + server streaming). Utilizes Postgres COPY for bulk transfers and optimistic set-based upserts, eliminating browser freezes.

React.NETPostgres COPYResiliency Patt.
System Architecture
Product & UX Architecture
CLIENTPreview
APIAsync
Processing
HangfireNpgsql
DBStage
Upsert

ADDITIONAL WORK

Technical Projects & Experiments

Containerized Frontend on Azure Compute

Internal

Containerized the multi-region planning UI using multi-stage Docker builds, nginx hardening, and health-checked workloads, then migrated hosting to the internal Azure Cloud Compute Platform.

Improved deployment parity, simplified scaling, and enabled platform guardrails (runtime config, security headers, observability hooks).

DockernginxAzure DevOpsAzure Cloud ComputeReactTypeScript

Azure Pipelines → GitHub Actions Migration

Internal

Rebuilt the CI/CD system for the planning platform, porting Azure Pipelines stages into reusable GitHub Actions workflows with matrix testing, build caching, artifact reuse, and guarded production deployments.

Cut pipeline time, aligned with enterprise GitHub governance, and improved release visibility across environments.

GitHub ActionsAzure DevOpsNode.jsReactTesting automation

Global Master Data and Planning Platform (Web)

Internal

Enterprise web platform enabling regional production and supply chain planning with high volume master data updates and imports.

Operational reliability at scale with standardized UX and guardrails for data integrity.

ReactTypeScriptGraphQL.NETAzure DevOps

Schema-driven Import Pipeline

Internal

Pre-validation and reconciliation for file-based imports with early error surfacing, coercions, and automatic lookups.

Higher import success rates and fewer production incidents related to data quality.

ReactTypeScriptGraphQL.NET APIs

Build Modernization and Boilerplate

Internal

Vite-based app template with environment handling and automated versioning; Webpack to Vite migrations for speed and consistency.

About 40 percent faster builds and improved developer onboarding.

ViteNode.jsWebpackAzure DevOpsDocker

Mobile Access and Authentication

Internal

Internal companion app with NFC interactions, OIDC authentication, usage telemetry, and mobile navigation patterns.

Stronger access controls, improved visibility through telemetry, and a better mobile UX.

React NativeExpoOIDCJWT

GraphQL Domain APIs

Internal

Queries and mutations for pricing and classification domains with validation rules and auditing fields; clarified error semantics and improved payload efficiency.

Clearer contracts, fewer client workarounds, and more predictable releases.

GraphQL.NETHotChocolate

Security and Compliance Enablement in CI

Internal

Integrated static analysis and dependency license scanning into pipelines; remediated priority vulnerabilities and enforced guarded release policies.

Improved security posture and smoother audit checkpoints.

Azure DevOpsSonarQubeBlackDuckNode.js

Repository Hygiene & Secret Scanning Automation

Internal

Automated scanning and safe rewrite workflow (scan → inventory → replacement map → dry-run → rewrite → verification) orchestrating gitleaks + git filter-repo with deterministic replacement mapping.

Standardized remediation path and significantly reduced manual effort per incident.

PowerShellgitleaksgit filter-repoAutomation Scripts

Material Pricing Administration

Internal

Frontends and endpoints for standard parts pricing, exchange rates, surcharges, and transport costs with consistent validation and auditing.

Streamlined pricing updates and reduced manual corrections.

ReactTypeScriptGraphQL.NET

Workstations and Groups Administration

Internal

Config UI for workstations and workplace groups using standardized table and form patterns; included bulk updates and validation.

Faster configuration cycles and consistent data quality.

ReactTypeScriptMUI

Supplier Onboarding and Cost Centers

Internal

UI workflows and validations for supplier onboarding and cost center management leveraging shared platform components.

Reduced onboarding friction and improved consistency across administrative modules.

ReactTypeScriptGraphQL

SKILLS

Capabilities

Frontend Engineering

  • React
  • TypeScript
  • MUI
  • State management
  • Complex tables and forms
  • Accessibility
  • i18n
  • Virtualization
  • React Native
  • Expo

Platform Engineering and DX

  • Reusable UI frameworks
  • Scaffolding
  • Webpack→Vite migrations
  • Env & versioning automation
  • Documentation
  • Review checklists
  • Secret remediation automation

Data and APIs

  • GraphQL
  • REST
  • Apollo Client
  • React Query
  • Pagination strategies
  • Validation alignment
  • Auditing alignment
  • .NET
  • HotChocolate

Tooling and CI/CD

  • Azure DevOps
  • GitHub Actions workflows
  • Pipelines & releases
  • Node.js
  • Webpack
  • Vite
  • Docker
  • Containerized deployments
  • Automated versioning
  • Release hygiene

Quality and Security

  • Schema-driven validation
  • Error surfacing frameworks
  • SonarQube
  • BlackDuck
  • JWT
  • OIDC
  • Jest
  • Cypress
  • Git history secret purging

Collaboration and Leadership

  • Cross-team alignment
  • Lightweight RFCs
  • Mentoring
  • Onboarding
  • Stakeholder demos
  • Enablement

EXPERIENCE

Professional Experience

  1. Mercedes-Benz South Africa

    2021-12 – Present

    Frontend Engineer, Global master data and planning platform

    • Consolidated table and form experiences into a reusable UI foundation, reducing feature delivery time by ~30% and unifying UX across 10+ modules.
    • Engineered a schema-driven import pipeline with pre-validation, increasing first-pass data acceptance rates by 60% and eliminating manual data correction tickets.
    • Standardized GraphQL schema and validation contracts, reducing frontend-backend integration bugs and enabling independent release cycles.
    • Secured the platform by embedding automated static analysis and OIDC/JWT authentication, achieving 100% compliance with internal security audits.
    • Architected a standardized Vite boilerplate, cutting build times by 40% (from 40s to <1s start time) and reducing new service setup time from days to hours.
    • Launched a production-ready mobile hub with NFC capabilities, enabling secure, tracked access for field operations and reducing physical logbook usage.
    • Established engineering standards and onboarding documentation, scaling the team from 3 to 8 engineers while maintaining high code quality.
    • Designed an automated secret remediation workflow, reducing incident response time for repository history cleansing by 90%.

    React · TypeScript · MUI · State Management · Apollo Client · React Query · GraphQL · .NET · HotChocolate · Node.js · Azure DevOps · Webpack · Vite · SonarQube · Docker · JWT · OIDC

  2. Autumn Leaf IT

    2021-08 – 2021-11

    Junior Software Developer

    • Built full stack features with React and GraphQL.
    • Supported cloud deployments and improved release reliability.

    React · GraphQL · Node.js · AWS

  3. Amazon Web Services

    2021-01 – 2021-06

    Intern Cloud Support Associate

    • Handled issues related to EC2, S3, IAM, and CloudWatch.
    • Authored documentation and knowledge base entries for customer workflows.

    AWS EC2 · AWS S3 · AWS IAM · Amazon CloudWatch · AWS CLI

CONTINUOUS LEARNING

Education & Certifications

Diploma in ICT in Applications Development

Cape Peninsula University of Technology

Year N/A

Meta Front-End Developer Professional Certificate

Meta

2025

Microsoft Certified Azure Fundamentals

Microsoft

2024

AWS Certified Cloud Practitioner

Amazon Web Services

2021

ACHIEVEMENTS

Key Impact

Frontend Architecture & Standardization

Architected a reusable data UI framework (filters, virtualization, inline edit) used across 10+ internal modules, reducing feature delivery time by ~30%.

Platform Engineering & DX

Led the migration from Webpack to Vite, cutting local server start times from 40s to <1s and build times by 40%, significantly boosting team velocity.

High-Scale Performance

Optimized a mission-critical planning tool handling 1M+ records, achieving sub-16ms render performance via React Virtualization and Web Worker offloading.

Security & Compliance Operations

Designed a Zero-Trust client-side architecture with OIDC/JWT integration and automated secret scanning pipelines, ensuring ISO-compliant security posture.

CI/CD Modernization

Rebuilt Azure Pipelines as modular GitHub Actions workflows with caching and parallel execution, reducing CI feedback loops by 50%.

Quality Gates & Automation

Enforced code quality standards through schema-driven validation pipelines and automated dependency scanning, reducing production bugs by 25%.

Mentorship & Technical Leadership

Authored comprehensive internal documentation and RFCs, facilitating the onboarding of 5+ developers and standardizing best practices across distributed teams.

Mobile & Edge capabilities

Delivered production-ready React Native capabilities including NFC integrations and offline-first workflows for field operations.

Automated Remediation

Engineered a deterministic history rewrite tool for secret remediation, reducing manual incident response time from days to hours.

Stable API Contracts

Collaborated on GraphQL schema & validation semantics; optimized payloads reduced client workarounds and improved UI responsiveness.

Mobile enablement

Advanced an internal hub app from prototype to production with NFC, modern auth, telemetry and robust navigation improving field UX.

Repository hygiene automation

Authored automated secret scanning & safe history rewrite workflow (scan → inventory → deterministic replacement → dry-run → verified rewrite) markedly reducing manual remediation effort.

MORE INFO

Additional

Graduate development training in agile and DevOps practices.

Recognized for delivery excellence and documentation that improves cross-team alignment.

Mentorship and workshop facilitation for onboarding and pattern adoption.

Experienced in cross-cultural collaboration with distributed teams across regions using documentation-first alignment, async reviews, and clear ownership.

Proactively drove platform-level secret remediation automation creating a reusable, low-risk path for future incidents.

CONTACT

Reach Out

Open to roles focused on data-intensive frontend systems, platform UI architecture, and performance-minded React engineering.