Under Armour Store
Full-featured e-commerce platform for athletic apparel with product catalog and checkout system.
Project Overview
A full athletic-apparel storefront backed by a relational catalog.
A complete e-commerce build for athletic apparel: catalog browsing, product detail, cart, checkout and order handling, sitting on a MySQL-backed product and inventory model.
The emphasis was on making a large, variant-heavy catalog feel light — fast filtering, predictable navigation and imagery that does not stall the first render.
The Challenge
Sportswear catalogs carry deep size and colour matrices per product; rendering and filtering that naively makes listing pages sluggish exactly where browsing happens most.
The Approach
Normalised product/variant tables in MySQL, indexed the filter columns, and kept the browsing experience on memoised client state so filter changes never round-trip unnecessarily.
Core Features
Catalog & variant engine
Products modelled with size, colour and fit variants, each with its own stock counter, pricing rule and media set.
Faceted search & filtering
Instant client-side filtering across category, size, price band and availability, with URL-synced state so any view is shareable.
Cart & checkout flow
Persistent cart, address capture, shipping options and an order summary that recalculates totals and tax on every change.
Order lifecycle
Order creation, status transitions and history views for both the customer account area and the admin side.
Merchandising surfaces
Editorial hero blocks, collection rails and related-product logic used to push seasonal drops without a code change.
Architecture & Tech
Tech Stack
- React with a component-driven structure, memoised derived state and route-level code splitting to keep interaction snappy.
- MySQL as the relational store, with indexed lookups on the hot query paths.
My Role & Contributions
- Owned the front-end architecture, component library and state management.
- Implemented the full React + MySQL stack for this project.
- Translated design intent into a responsive, accessible interface across breakpoints.
- Modelled and tuned the MySQL schema behind the feature set.
- Collaborated on shared conventions, code review and integration with parallel workstreams.
- Deployed and verified the production build.
Delivery Process
- 01
Discovery & scoping
Requirements gathered directly with Under Armour, translated into a prioritised scope and a data model sketch before any code.
- 02
Architecture & design system
Component hierarchy, state boundaries and a token-based visual system defined so screens could be assembled consistently.
- 03
Implementation
Built iteratively with React, MySQL, shipping vertical slices — data, logic and UI together — instead of layer by layer.
- 04
Hardening & launch
Edge cases, validation, responsive behaviour and performance passes, followed by deployment and post-launch monitoring.
Results & Outcomes
- Shipped to production and publicly reachable at the live URL.
- Responsive from small mobile screens through large desktop layouts.
- Interface patterns reusable across the rest of the product surface.
Related Projects
Town Team
Team-based clothing e-commerce platform with inventory management and team collaboration features.
Ohanna Landing Page
Modern landing page for fashion brand with dark aesthetic and product showcase.
Little Boys Fashion
Specialized clothing store for children with size guides and parent-friendly interface.