Mizuno México Clone

Project information

A production-grade, high-performance e-commerce platform clone recreating the official digital storefront of Mizuno México. Engineered with Astro 5 Islands Architecture, Tailwind CSS v4, TypeScript, and Nano Stores, this project prioritizes sub-second load times, accessible UI/UX patterns, and a complete end-to-end customer purchasing funnel.

Key Engineering Highlights & Features: • Performance-First Architecture: Pre-rendered static pages (SSG) with selective client hydration, achieving optimal Core Web Vitals and zero unnecessary JS overhead. • Advanced Catalog & Faceted Search: Real-time client-side filtering system featuring dual-range price sliders, sport and category tags, dynamic color swatches, size matrices, and instant sorting controls. • Dynamic Product Detail Pages (PDP): Pre-rendered static routes with multi-angle zoom galleries, reactive colorway/size switchers, live delivery window estimators, and technical specification tabs. • Persistent Shopping Cart: Dual cart architecture (slide-over drawer and full cart review) with free-shipping progress indicators, coupon validation, and multi-tab state synchronization via Nano Stores and localStorage. • Distraction-Free Checkout Funnel: Isolated 3-step checkout flow with domestic Mexican address validation, shipping methods, simulated payment gateways (Credit/Debit, PayPal, MercadoPago), and order confirmation screens. • Mobile-First & Institutional Hub: Fully responsive touch layouts, ARIA-accessible dialogs, brand heritage timeline (1906–present), and comprehensive footwear/apparel sizing converters.

Tech Stack: Astro 5, Tailwind CSS v4, TypeScript, Vite, Nano Stores, Swiper 14.

Disclaimer: Developed strictly for educational, academic, and portfolio demonstration purposes. All trademarks and brand assets belong to Mizuno Corporation.

website ecommerce