Led the complete frontend revamp of a legacy banking CX platform — migrating a 904-file React/Redux application to a modern Turborepo monorepo with React 19, TypeScript, Vite, Mantine, Zod, and TanStack Query. Built the first working screen (dashboard) end-to-end, then delivered the entire payments module (5 user flows, 474+ tests) in 20 working days using AI-augmented development.

• Legacy Debt: 904 JavaScript files, 40+ Redux slices, React Router v5, no TypeScript — unmaintainable at scale
• Slow Delivery: Tightly coupled architecture meant every feature required coordinating across multiple teams
• No Test Culture: Minimal test coverage, no mock infrastructure, no CI quality gates
• Knowledge Silos: 13 feature areas with no shared patterns or reusable infrastructure

Tech Lead & Primary Implementer for the CX banking module in a team of 7 engineers.

• Analyzed the entire legacy codebase and produced a 15-section migration strategy
• Set up all dev infrastructure: Vite proxy, remote config fallback, mock server, Turborepo config
• Built the first feature (dashboard) establishing all patterns the team follows
• Delivered the full payments epic solo in 20 days with AI-augmented development
• Performed 5+ teammate code reviews, mentored on architecture patterns
• Coordinated delivery across 7-engineer team with systematic task breakdown and tracking

• Built token-based API proxy routing (mock when logged out, real API when logged in)
• Implemented remote screen config with bundled JSON fallback for offline/deployment resilience
• Created JSON-driven widget tree architecture: sidebar navigation, header, quick-actions, latest transactions, products sidebar, KYC alert
• Established specialized widget pattern: schema.ts → api.ts → transform.ts → widget.tsx → index.ts
• Set up mock handlers, i18n workflow (en/ar/fr), route registration, and widget catalog
• Established all architectural patterns (screen configuration, specialized widgets, mock handlers, i18n) the team now follows

Delivered:

• Payment Dashboard: Quick actions, recent payees, data tables with pagination, tabs, and account filtering
• Send Money (5 screens): Multi-step payment flow with dynamic API-driven forms, scheduling, frequency selection, date constraints, confirmation, and 2FA
• Internal Transfers: Account-to-account transfers with currency matching and eligibility logic
• Beneficiary Management: Add, confirm, delete with 2FA integration
• Shared Form Infrastructure: 5 composable modules handling dynamic field rendering, validation, country-specific rules, and payload transformation — reused across all flows

Numbers: 474+ tests, 10+ merged MRs, 5 peer code reviews conducted, all flows verified against production-grade APIs.

• Core: React 19, TypeScript, Vite, Turborepo, Bun
• UI: Mantine v8, CSS Modules, Material Symbols icons
• Data: TanStack Query, Zod v4 schemas, JSON:API
• Testing: Vitest, React Testing Library, Mock Service Worker
• Infrastructure: GitLab CI/CD, SonarQube, Conventional Commits
• i18n: react-i18next (English, Arabic RTL, French)

• 20 days to deliver complete payments module (5 user flows end-to-end)
• 474+ tests across all payment widgets with comprehensive coverage
• 7 engineers onboarded to patterns established during dashboard feature
• 10+ MRs raised, reviewed, and merged
• 5 teammate code reviews catching real architectural issues
• 12+ hours saved per epic through AI-augmented development methodology
• 75% → 92% sprint goal achievement as Scrum Master
• 7 engineers onboarded to patterns established during dashboard feature