Atelier E-Commerce Front-End

Full product detail page for a retail storefront, built as a team of four. My ownership area was Related Products and Outfit List: a carousel of product cards with ratings, sale-price handling, and a comparison modal, plus an outfit list that stores user-saved items across page sessions. The rest of the page - style selection, image gallery, Q&A, and reviews - belonged to my teammates.

The trickiest part was async rendering order. Related Product cards depended on several data sources that arrived at different times: the related product ID list, per-product metadata, style images, and review metadata. Cards were rendering before the IDs were available, showing stale or empty states. The fix involved restructuring the request flow with async/await, consolidating the scattered fetch helpers into a single getHandler utility, and using useEffect dependency arrays to re-fetch card data whenever upstream IDs changed. Once that sequencing was right, the cards stayed consistent.

The comparison modal required taking feature arrays from two products and merging them into a single, deduplicated set - that logic eventually became the createFeatureSet helper. The carousel started as Related Products-specific UI, then was refactored to accept children, which let the Outfit List reuse the same navigation behavior without duplicating a line of carousel code. Settling those component interfaces early - what data goes in, what events come back out - was what let four people work on the same page without constant merge conflicts.

Lighthouse told a clear improvement story: the initial audit scored 46 on performance and 68 on accessibility, with flagged issues for missing image alt text and a missing document language attribute. Fixing both, plus a round of CSS and bundle work, pushed the final score to 94 performance and 100 accessibility. Those audit screenshots are preserved in the repository as evidence of the progression.