Project Overview

Most clothing store templates are desktop sites squeezed onto a phone. Hoodiez was designed the other way round: a mobile-first streetwear app built around the idea of "Wear Your Mood", with bold hoodie photography, a clean monochrome palette with gold accents and big, thumb-friendly controls.

Built with Next.js and React, Hoodiez covers the whole shopping journey. Users go from an onboarding splash through sign-in, search, categories and collections, and product details to the wishlist, cart, checkout, payment and order tracking. Everything runs in the browser and can be installed to the home screen as a Progressive Web App, so it works both as a polished client demo and as a ready starting point for a real store.

Technical Implementation

Architecture

Hoodiez is a frontend-only application built on the Next.js App Router. Each screen is a route (/home, /categories, /collection/[slug], /product/[id], /wishlist, /cart, /checkout, /checkout/payment, /orders/[id], /profile/edit and more) backed by a dedicated screen component. App state such as the cart, wishlist, addresses, profile and placed orders lives in small localStorage-backed stores, so the app is fully interactive without a backend and can later be wired to a real API.

Frontend

The UI uses React 19 and Tailwind CSS 4, with Plus Jakarta Sans loaded through next/font. Every screen is laid out inside a phone-style frame that defines a fluid design unit, so the layout scales exactly from the original design at any phone width.

// Phone-style column. `--u` = 1 design pixel of the 941px-wide reference.
export function PhoneFrame({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-dvh justify-center bg-page">
      <div
        className="relative min-h-dvh w-full max-w-[430px] bg-page [container-type:inline-size]"
        style={{ ["--u" as string]: "calc(100cqw / 941)" }}
      >
        {children}
      </div>
    </div>
  );
}

Each store is a small module built on useSyncExternalStore, with an in-memory cache and a storage listener that keeps every screen in sync, including across browser tabs:

function write(next: CartItem[]) {
  cache = next;
  try {
    localStorage.setItem(KEY, JSON.stringify(next));
  } catch {}
  listeners.forEach((l) => l());
}

function subscribe(cb: () => void) {
  listeners.add(cb);
  const onStorage = (e: StorageEvent) => {
    if (e.key === KEY) {
      cache = null;
      cb();
    }
  };
  window.addEventListener("storage", onStorage);
  return () => {
    listeners.delete(cb);
    window.removeEventListener("storage", onStorage);
  };
}

export function useCart() {
  return useSyncExternalStore(subscribe, read, () => EMPTY);
}

Key Technologies:

• Framework: Next.js 16 with App Router
• UI: React 19 + TypeScript
• Styling: Tailwind CSS 4 with container-query design units
• Icons: Lucide React
• State Management: localStorage stores with useSyncExternalStore

PWA & Offline Support

A web app manifest (name, icons, maskable icon and shortcuts to Cart, My Orders and Wishlist) makes Hoodiez installable. A custom service worker picks a caching strategy per request type: network-first for page loads and React Server Component payloads, cache-first for hashed build files, and stale-while-revalidate for product photos and icons, with a dedicated offline page as the final fallback.

/* Hoodiez service worker: makes visited pages and images available offline. */
const VERSION = "v1";
const PAGES = `hoodiez-pages-${VERSION}`;
const ASSETS = `hoodiez-assets-${VERSION}`;
const OFFLINE_URL = "/offline.html";
const MAX_ASSETS = 250;

Infrastructure:

• Rendering: Next.js (static + client components)
• Offline: Custom service worker with versioned, size-capped caches
• Persistence: Browser localStorage and sessionStorage
• Installability: Web App Manifest with maskable icons and shortcuts

Challenges & Solutions

Challenge 1: Pixel-Perfect Design at Every Phone Size

Problem: The design was delivered as fixed-width mockups. Hard-coded pixel values looked right on one device but broke on smaller or larger phones.

Solution: I introduced a single CSS design unit, --u, calculated with container query units as one design pixel of the 941px reference (100cqw / 941). Every spacing, radius and font size is written as calc(var(--u) * N), so the whole interface scales proportionally inside the phone frame while staying faithful to the original design.

Challenge 2: Native-Feeling Gestures and Motion on the Web

Problem: Shoppers expect app-like interactions: swiping cart rows away, and seeing a product visibly land in the cart or wishlist. Plain buttons made the store feel like a website.

Solution: Cart rows use a custom swipe component with a commit threshold (30% of the row width). Below it the row snaps back, past it the row slides out and deletes the item (left) or moves it to the wishlist (right). The add-to-cart and wishlist "flying product" effect uses the Web Animations API along a curved path into the header icon, and is skipped entirely when the user prefers reduced motion.

Challenge 3: A Fully Working Store Without a Backend

Problem: The client needed to demo real flows like cart totals, delivery fees, payments and placed orders before any backend existed.

Solution: I modelled each domain (cart, wishlist, addresses, profile, placed orders, auth) as its own typed local store. The payment flow validates UPI IDs and card details (number, expiry, CVV), detects the card brand, simulates bank verification and then saves a real "Processing" order with a unique HDZ order ID, payment method and transaction ID. Screens only talk to these hooks, so swapping localStorage for a real API later means changing the store layer, not the UI.

Results & Impact

• Complete Journey: 17+ production-ready screens covering onboarding, auth, browsing, search, product detail, wishlist, cart, checkout, payment, orders and profile.
• Real Catalogue: 81 products across Men's, Women's, Kids, Shoes and Accessories, with colours, sizes, ratings and sale pricing.
• Offline & Installable: Works as a home-screen app, and cart, wishlist and orders stay available without a connection.
• Backend-Ready: A clean store layer makes it simple to connect a real API, payment gateway or headless commerce platform.