Arman
All work

03 / Flagship case study

Frontend / product UI

Arctic Daze

A responsive product and editorial experience for men’s fashion and lifestyle sourcing from Malaysia to Bangladesh.

Arctic Daze desktop interface showing its editorial navigation, typography, and Malaysia-to-Bangladesh product positioning.
Editorial desktop composition
Type
Frontend / product UI
Status
Live project
Core stack
Next.js / React / TypeScript / Motion / GSAP
Repository
Public repository

Project overview

Arctic Daze is a responsive product and editorial interface for browsing men’s fashion and lifestyle sourcing from Malaysia to Bangladesh. The source application connects discovery, account tools, and product-request workflows through a Next.js and Supabase foundation.

01

A product journey built around discovery and request

The repository supports a wider product journey than the editorial homepage alone shows.

Editorial entry
Large-format typography, category-led storytelling, featured groupings, and a clear Malaysia-to-Bangladesh sourcing proposition.
Product discovery
A collection route with product search, category and status filters, responsive product grids, and links into product details.
Account surfaces
Source routes cover profiles, wishlists, saved items, restock alerts, and preorder requests.
Guided ordering
The documented flow starts with a product link, post, or screenshot and routes the request through Facebook or WhatsApp before order confirmation.

02

Interface implementation

  1. The application uses Next.js App Router pages and reusable product components rather than keeping the experience inside one landing-page component.

  2. Public product reads and category data are implemented through server-side Supabase helpers.

  3. Collection filters use URL query parameters, preserving navigable search and filter state without requiring a client-only catalog shell.

  4. The responsive product grid progresses from one column to two, three, four, and five columns as space becomes available.

03

Responsive product identity

The mobile capture preserves the editorial hierarchy and core actions in a layout composed for a narrow viewport rather than a scaled-down desktop frame.

Arctic Daze mobile homepage showing responsive navigation, editorial type, and product actions.
Responsive mobile experience

04

Technical stack in the repository

  • Next.js
  • React
  • TypeScript
  • Motion
  • GSAP
  • Lenis
  • Supabase
  • Lucide React