SBLM Apparel

A full e-commerce layout for an independent streetwear label — product catalog configuration, photography per variant, multi-tier pricing and a checkout flow built for both local and international buyers.

The brand had drop photography and a price list in a spreadsheet, but no storefront. Buyers ordered through DMs, prices were quoted inconsistently, and the catalog was unbrowsable on a phone.

1. 01Modelled the catalog as a typed product array carrying name, tier price, variant photos and stock state.
2. 02Built multi-tier pricing so one product can carry base, drop and bundle prices without duplicate entries.
3. 03Assigned photography per product and variant, driving a grid that reflows from 1 to 4 columns.
4. 04Integrated a persisted cart that survives navigation and hands off to payment / WhatsApp order triggers.

• Multi-tier pricing and drop updates handled as data, so a restock never becomes a rebuild.
• Responsive image grids kept light so the cart stays instant on mobile data.
• Multi-currency display so worldwide buyers see a real price before checkout.

• Large drop photography was tanking mobile load — fixed with responsive sizing, lazy loading and aspect-ratio boxes.
• Cart state was lost on route changes until it moved into a persisted store.
• Product naming changed mid-build, forcing a catalog key refactor without breaking image assignments.

• →Treating the catalog as data makes renames and repricing a one-line change.
• →On mobile commerce, perceived grid speed matters more than any animation.
• →Agreeing a naming convention up front prevents a whole class of late refactors.

• React
• TypeScript
• Tailwind CSS
• Persisted cart state
• Multi-currency pricing
• WhatsApp checkout

• Full catalog browsable and purchasable on mobile in seconds.
• Brand updates prices and names without developer involvement.
• Orders moved out of DMs into a trackable checkout flow.