Re-engineered a next-gen e-commerce storefront template into a custom 3D subscription experience for my girlfriend's DIY school project, EcloKit. Powered by Next.js 16, React 19, and React Three Fiber
EcloKit is a premium, custom 3D subscription-based storefront built for a high-end French DIY and craft box service. Created as a tailored school project showcase for Loanne, Lina, and Clara's brand concept, this application replaces traditional static layouts with an interactive 3D WebGL user experience. The storefront enables users to discover curated collections, subscribe to seasonal box tiers, explore partner packages, bookmark favorites, and get dynamic assistance. By integrating headless commerce engines, advanced WebGL animators, and strict Next.js App Router caching, the project delivers a luxurious digital storefront that blends fine art with cutting-edge engineering.
SSR / ISR Time to First Byte (TTFB) under 45ms utilizing Next.js 'use cache' directives and Partial Prerendering (PPR) dynamic splits.
Steady 60fps WebGL animation loops across desktop and modern mobile devices; 100/100 Lighthouse performance score on desktop.
$0/month hosting on Vercel's free serverless tier combined with Upstash Redis and Commerce Kit headless integrations.
Engineered a dynamic 3D WebGL Magic Box Canvas utilizing React Three Fiber, OrbitControls, and custom bloom post-processing filters.
Designed a real-time cursor-proximity calculations engine that dynamically scales THREE.PointLight and material emissive intensity using Three.js MathUtils.lerp as the cursor hovers near the screen center.
Implemented solid API error tolerance by wrapping all Commerce Kit SDK client operations in tuple-based safe-try boundaries to eliminate client crashes.
Constructed a persistent client-side wishlist system using custom React context hooks synchronized dynamically with local storage state.
Exhaustive situation-action-result breakdowns showcasing problem-solving and architectural execution.
The base template was built with strict English copywriting, rigid routes, and standard SDK calls that would crash the site during network dropouts or schema mismatches.
Translated the entire storefront to natural, high-converting French, mapped localized routes (such as '/panier', '/commande', and '/mentions-legales'), and refactored API calls to use tuple-based safe-try wrappers.
Low-level component relationships, system boundaries, and runtime flows.
EcloKit's architecture utilizes a headless decoupling model where Next.js 16 handles server-side page structures, metadata resolution, and partial prerendering. The application state communicates with the Commerce Kit SDK for managing products, variants, shopping carts, and checkouts. In the browser, React Three Fiber mounts a isolated WebGL context inside the DOM to display our modeled craft box. While GSAP drives the sequential opening timeline of the box's lids on initial consent, continuous three-fiber useFrame render loops update point lights and cardboard emissive shaders dynamically by calculating the Euclidean distance of the user's pointer, merging high-performance commerce with real-time immersive artwork.
This project demonstrated the power of creative coding when applied to traditional e-commerce. Balancing heavy WebGL animations and bloom post-processing filters with strict Core Web Vitals taught me how to strategically deferred render non-critical client assets. Furthermore, working alongside Loanne, Lina, and Clara highlighted the importance of translating artistic brand direction into accessible, highly performant design tokens, proving that e-commerce can be both technologically elite and visually breathtaking.
Rendered live in real-time. Direct URL: https://eclokit.vercel.app
Optimized initial render times and page speed benchmarks by lazy loading heavy WebGL three-fiber scenes using next/dynamic with disabled server-side rendering.
Developed a multi-page partner onboarding portal and integrated an Apple-style floating customer support chatbot widget with smooth custom transitions.
Created a 100% crash-proof routing experience where missing products or network failures resolve gracefully into custom fallback states instead of page errors.
Loading high-fidelity GLTF meshes, orbit controllers, and continuous lighting calculations degraded mobile performance and caused hydration mismatches during server-side pre-rendering.
Implemented deferred dynamic imports to keep the main bundle lightweight, wrapped the 3D scene in a Suspense boundary, and bound activation to cookie consent acceptance to prevent premature WebGL initialization.
Reduced the initial JavaScript payload by approximately 120KB and established stable 60fps performance on standard iOS and Android browsers without hydration conflicts.
The brand concept required unique customer engagement systems (AI chat assistance, custom newsletter dialogs, and a persistent wishlist) that typical headless storefronts do not support out of the box.
Created custom hooks and a persistent React context for wishlists, developed an Apple-inspired floating chatbot panel using Framer Motion, and integrated jiggling micro-animation cues on primary call-to-action buttons.
Achieved zero state desynchronization on bookmark lists, elevated user engagement, and delivered a premium, highly tactile customer interaction loop.
