E-Commerce Storefront

A component-driven storefront with fast filtering, persistent cart state and a checkout that never makes the user guess.

View Live Site

The Challenge

Shoppers abandoned the catalogue because filtering triggered full page reloads and the cart lost its contents between sessions. Product imagery was inconsistent, making the grid feel unreliable.

The Solution

I rebuilt the catalogue as a client-side filtered grid with URL-synced state, added persistent cart storage, and standardised product media ratios so the grid reads as one continuous surface.

Design Process

Wireframes for E-Commerce Storefront — Wireframes

Design System for E-Commerce Storefront — Design System

High Fidelity for E-Commerce Storefront — High Fidelity

Development

1export function useCart() {
2  const [items, setItems] = useState<CartItem[]>([]);
3 
4  const add = (product: Product, qty = 1) =>
5    setItems((prev) => mergeLine(prev, product, qty));
6 
7  const total = useMemo(
8    () => items.reduce((sum, i) => sum + i.price * i.qty, 0),
9    [items]
10  );
11 
12  return { items, add, total };
13}

Responsive

E-Commerce Storefront shown across desktop, tablet and mobile breakpoints

Results

Lighthouse Performance: 94Lighthouse Performance
Faster Filtering: 31%Faster Filtering
Reusable Components: 38+Reusable Components
Accessibility Focused: WCAGAccessibility Focused

What I Learned

I learned the importance of simplifying complex flows and building components that are easy to maintain and scale. It also improved my understanding of user trust and micro-interactions.

State colocation and URL syncing
Designing for empty and error states
Deriving totals instead of storing them
Testing across real devices