Featured Project
OCL Loyalty Web Application
Mobile-first loyalty program platform with missions, promotions, offers, and eStamps, featuring Ionic React components and AEM integration.
Role
Frontend Architect
Timeline
January 2026 - Invalid Date
Category
professional
9,264 lines added
26 commits
53 CSS modules
2-week sprint
Overview
Architected and built complete loyalty program web application from scratch in intensive 2-week sprint. Developed homepage with 6 major sections, missions and promotions systems, reusable component library with CSS modules, and comprehensive service layer architecture. Implemented pull-to-refresh, press animations, and frosted glass design system. Built migration path from AEM to lightweight API approach.
What I Built
- •Built complete homepage architecture with Activities Spotlight, Quick Access, Missions preview, Promotions, Flash Grab, Exclusive Offers, and eStamps sections
- •Developed comprehensive component library (53 CSS modules) with CollapsibleSection, FilterModal, SortModal, and NavBar components
- •Implemented AEM headless CMS integration with service layer abstraction and migration path to simpler API approach
- •Created mobile-first responsive system with pull-to-refresh, 10% black press overlays, and scale-down animations
- •Established design system with glass morphism effects, burnt-orange brand colors, and content-based modal breakpoints
- •Fixed all 27 ESLint errors improving type safety and code quality across entire codebase
Key Achievements
- 26 commits delivering 9,264 lines added in 2-week sprint
- Complete missions and promotions systems with filter/sort capabilities
- Reusable component library with 53 CSS module files
- Service layer architecture enabling easy content source migration (AEM → API)
- Production-ready with TypeScript strict mode and comprehensive error handling
Technologies Used
React 19TypeScriptIonic React 8Vite 5Capacitor 8CSS ModulesAdobe Experience ManagerAxiosReact Router 5AWS S3
Tags
ReactTypeScriptIonicMobileAEMLoyalty Program