Diwa Habi – Filipino Clothing Storefront
A contemporary Philippine clothing brand storefront — covering editorial browsing, product discovery, size guidance, wishlist, and a persistent cart, all built around Filipino craft and culture.
This is a polished front-end demo. Checkout, contact, and newsletter actions use local UI success states and are ready to connect to a commerce or form backend. Product data is local and can be replaced with a CMS or commerce API.
Problem Statement
Making Filipino craft feel relevant in a modern, shoppable wardrobe
E-commerce platforms often struggle to showcase the cultural significance and craftsmanship of Filipino clothing. Diwa Habi addresses this by presenting the brand through an editorial lens — campaign imagery, a curated lookbook, and a brand story that gives context to each piece.
Shoppers can explore collections by category (Men, Women, Unisex, Accessories), filter by color and size, consult a size guide, save items to a wishlist, and manage their cart — all within a responsive interface that works across mobile and desktop.
Shopping journey
Editorial storytelling and product discovery guide shoppers from inspiration to a ready cart.
- DiscoverBrowse the editorial home, lookbook, and collections
- ExploreFilter by category, color, and size; check the size guide
- SaveAdd items to the wishlist or cart
- PurchaseComplete checkout with validated form and order confirmation
Frontend Screenshots
Features
- Editorial home page with campaign imagery, collection highlights, and brand story
- Lookbook and collection pages with curated campaign photography
- Search, category navigation, sorting, and color and size filters
- Size guide with measurement reference for accurate fit selection
- Persistent wishlist with add, remove, and move-to-cart controls
- Cart drawer with quantity controls, item removal, and order summary
- Validated checkout with local UI success state, ready for a commerce backend
- Validated newsletter and contact forms with local success states
- Brand story, FAQ, privacy, and terms pages
- Responsive mobile navigation, accessible controls, and reduced-motion support
Tech Stack
The storefront is built with React and TypeScript, using a small custom design system on top of Tailwind CSS. React Router handles client-side navigation across all editorial and catalog pages. Vite provides the development and production build workflow, and Lucide React supplies the icon set. Cart and wishlist state is managed through React Context and persisted in localStorage. The project is deployed to Cloudflare Workers via Wrangler.
My Role
Application Developer — Solo Build
I designed and developed Diwa Habi as a solo project, covering brand direction, editorial layout, product catalog architecture, cart and wishlist logic, form validation, and Cloudflare Workers deployment.
On the storefront, I built an editorial home page with campaign imagery, a lookbook, a brand story section, and collection highlights. I created reusable product cards, a responsive mobile navigation drawer, accessible controls, and SEO page titles and descriptions for every route.
For the catalog and discovery, I implemented search, category navigation, color and size filters, sorting, loading and empty states, a product detail page with variant selection, and a size guide. Product data is stored locally in Philippine pesos and structured to be replaceable with a CMS or commerce API.
I built the cart and wishlist using React Context, with persistent localStorage state, quantity controls, item removal, and move-to-cart actions. The checkout, contact, and newsletter forms use validated inputs with local UI success states, ready to connect to a commerce or form backend.
I also handled accessibility and deployment, adding reduced-motion support, keyboard-accessible controls, and responsive layouts for mobile and desktop. I verified the Vite production build and deployed the project to Cloudflare Workers using Wrangler.