Kholoud.
Frontend Engineer
Selected Production Work
Production systems I built — serving real users, handling real scale
Project Bnaia
Architecting a scalable e-commerce frontend capable of handling thousands of distinct variants with sub-second load times.
- Product listing system handling 2,000+ SKUs across 10+ departments
- Multivendor storefront with vendor comparison pricing
- Multi-level mega menu with category-scoped search
- Bilingual AR/EN interface with RTL-aware animations
- B2B Request for Quotation workflow
- Geolocation-based shipping selection
- 20+ production pages shipped
Amtalek & Itashteeb CRM
Designed and delivered enterprise CRM + Accounting modules covering the full sales and operations lifecycle, from lead intake to revenue tracking.
- Lead pipeline with drag-and-drop stage management
- Deals tracking with ownership handoff and status workflows
- KPI analytics dashboards for daily operations
- Task and ticketing system with assignment workflows
- Accounting module for revenue and expense tracking
Sobeih Coffee Marketplace
Built a bilingual e-commerce marketplace for coffee and snacks with category-first browsing, product detail flows, and conversion-focused storefront sections.
- Category-first product discovery across coffee blends, capsules, and snacks
- Bilingual AR/EN storefront with conversion-focused layouts
- Mobile-optimized checkout flow with trust signals
Genidy Admin Portal
Enterprise admin portal with operational modules.
- Operational management dashboard with role-based access
- Data visualization panels with filterable KPIs
- Module-based navigation across business operations
Production code built under NDA — happy to walk through architecture and decisions live.
Case Study
How I rebuilt an e-commerce platform serving 2,000+ products
Project Bnaia
Architecting a scalable e-commerce frontend capable of handling thousands of distinct variants with sub-second load times.
Role
Lead Frontend
Stack
Next.js, Tailwind
LCP Improvement
0x Faster
Before vs After
Before
4.2s
After
1.1s
Problem Space
Bnaia is a multivendor e-commerce marketplace for building materials and construction supplies, serving the Egyptian construction industry. The platform connects homeowners, contractors, and engineers with vendors across 10+ departments — from electrical and plumbing to adhesives and finishing materials.
The application had outgrown its initial React SPA MVP. It suffered from poor SEO, long load times on mobile devices, and complex state management issues as the catalog scaled past 2,000 SKUs with thousands of product variants.
The core goal was to re-architect the frontend system to support the next phase of business growth without a complete rewrite blocking feature delivery.
What I Built
Concrete deliverables shipped for the Bnaia platform:
- Product listing system handling 2,000+ SKUs across 10+ construction departments
- Multivendor storefront with vendor comparison pricing and multi-vendor cart
- Multi-level mega menu with category-scoped search across all departments
- Bilingual AR/EN interface with full RTL layout and RTL-aware Framer Motion animations
- B2B Request for Quotation workflow for bulk procurement
- Geolocation-based shipping with city-level delivery estimation
- 20+ production pages covering the full e-commerce funnel from browsing to checkout
Architecture Decisions
We evaluated several approaches before migrating the system based on scale requirements:
- Moved to Next.js App Router: Transitioned to React Server Components (RSC) to minimize the client-side JavaScript bundle and push heavier operations to the server.
- Centralized Design System: Extracted ad-hoc styling into a cohesive Tailwind v4 CSS system for predictable UI rendering.
- State De-coupling: Moved from a monolithic global store to granular context boundaries and server-side fetching.
Challenges
Complex Variant Matrix
The product configurator had thousands of potential variants, causing serious performance lag when generating UI.
Implemented a flattened variant tree with memoized computation blocks and lazy-loaded visual assets.
Data Fetching Waterfalls
Legacy components were fetching data independently in useEffect hooks, leading to cascading load times.
Lifted fetching to SSR bounds, running independent queries in parallel via Promise.all and streaming the UI.
Performance Optimizations
To hit strict Core Web Vitals requirements, several optimizations were deployed:
- Aggressive Code Splitting: Used
next/dynamicfor below-the-fold interactive components. - Image Architecture: Migrated all assets to
next/imagewith proper format negotiateions (WebP/AVIF). - Reduced Re-renders: Implemented React
useMemoanduseCallbackwhere profiling indicated unnecessary rendering cycles.
Largest Contentful Paint
SEO Decisions
The re-architecture was largely driven by organic traffic acquisition goals:
- Static Generation for Listings: Product categories and marketing pages were moved to SSG.
- Dynamic Metadata: Programmatically injected schema.org JSON-LD across the e-commerce funnel.
- Canonical Pathways: Cleaned up the URL structure to prevent duplicate content indexing.
Outcome & Impact
Within 3 months of deploying the new architecture:
0x
Faster LCP
0%
More Organic Traffic
0%
Less Time-to-Interactive
Production code built under NDA — happy to walk through architecture and decisions live.
Core Stack
Tools I build with every day
Also working with RxJS, Bootstrap, SCSS, Sass, Karma, Vercel, and Jest in production projects.
What I Solve
Real problems I solved in production systems
Real Bugs I Fixed in Production
Dynamic Image CLS Fix
Third-party images with unknown dimensions caused layout shifts across product pages.
Preloaded intrinsic sizes and reserved aspect-ratio space server-side to eliminate CLS.
RTL Physics Correction
Framer Motion momentum was mirrored incorrectly in Arabic (RTL) layouts.
Built a useDirection hook that inverts x-axis values when dir=rtl is active.
Render Waterfall Reduction
Dashboard widgets fetched data independently in useEffect hooks, causing cascading loads.
Lifted fetches to SSR boundaries using Promise.all, eliminating sequential waterfalls.
How I Approach Problems
Rendering
Pick the rendering strategy before writing a single component.
SSG for product listings, SSR for search results, CSR only for post-hydration interactive islands.
State Management
Keep state local by default. Promote only when subtrees share truth.
Used granular context boundaries in Bnaia instead of a monolithic Redux store — cut re-renders by half.
Performance
Measure first, optimize the hot path, ship the metric.
Profiled Bnaia's LCP in production-like conditions before touching code — targeted image loading, not bundle size.
Accessibility
Semantic HTML first. Every interaction reachable by keyboard.
Built custom focus traps for mega menu dropdowns and ensured screen reader announcements for cart updates.
Career Journey
From frontline support to building reliable frontend systems
Architecting the Bnaia multivendor platform v2 with complex product variant logic, and building enterprise CRM and Accounting modules for Amtalek and Itashteeb.
Engineered a high-performance Admin Portal in Next.js with Redux, maintained Angular dashboards with reactive RxJS streams, and refactored legacy Laravel interfaces into modern responsive apps.
Resolved complex software and network issues using remote diagnostic tools — built deep empathy for how frontend failures reach end users in production.
Let's build.
Got a product that needs frontend muscle? I'll turn your Figma files into fast, accessible, production-grade code.
Crafted with 💜 by Kholoud
// TODO: Take over the world
Production code built under NDA — happy to walk through architecture and decisions live.