Auréne Luxury Storefront

High-Performance E-Commerce Experience with Refined Typography

A luxury accessories web storefront built with Next.js 14, React 18, TypeScript, and Tailwind CSS, featuring persistent cart/wishlist client state and precise Figma design translation.

1. The Engineering Problem

Luxury brands demand exceptional visual rhythm, editorial typography, zero layout shift, and immediate feedback during cart/wishlist interactions without bulky UI framework lag.

2. What Was Built

A modular e-commerce storefront supporting dynamic category browsing, individual product viewports, and local client state persistence for carts and wishlists without server roundtrip latency.

3. System Architecture & Topology

ASCII Topology

Next.js 14 static-generation with React Context API and localStorage synchronization.

Figma Artboards -> Next.js 14 Component System -> React Context (Cart/Wishlist) -> LocalStorage

4. Mohamed's Personal Implementation

Translated complex Figma artboards into responsive, high-contrast Tailwind CSS components.

Implemented client-side shopping cart and wishlist management using React Context API.

Structured modular product schemas in TypeScript.

5. Engineering Challenges & Solutions

Challenge: Client-Side Hydration Mismatch with LocalStorage

Solution: Designed a resilient hydration wrapper that defers reading client-side shopping bags until component mount, preventing SSR hydration warnings.

Impact: Flawless server-side rendering and zero layout flicker.

6. Technology Stack

Frontend

Next.js 14React 18TypeScriptTailwind CSS

7. Verified Outcomes

•Completed as the graduation project for the IEEE Frontend Engineering Track.
•Earned official IEEE Front-End Module certification.

← Back to Portfolio