Regarmarket
RegarMarket Web is the official web-based version of the RegarSport e-commerce ecosystem, delivering the same core marketplace experience as the mobile app — accessible directly from any browser without installation, featuring an immersive 3D design experience powered by Three.js.
The project was built to extend RegarSport's digital reach beyond mobile users — ensuring customers and affiliators who prefer desktop or web browsing can access the full marketplace, including the flagship 3D design customization feature, seamlessly.
Key Features:
Custom pre-order apparel catalog (sports jerseys, shirts, community apparel, hijabs, etc.) and local SME products
User-to-affiliate system based on referral links with ongoing commission mechanism
3D design input and real-time preview powered by Three.js — users can create and visualize custom designs in three dimensions directly in the browser
Simple and intuitive self-service digital transaction flow
Responsive design optimized for both desktop and mobile browser experience
Technical Challenges: Integrating Three.js within a Next.js environment required careful handling of server-side rendering (SSR) conflicts — since Three.js is inherently browser-dependent, dynamic imports and client-side rendering strategies were essential. Ensuring smooth and performant 3D rendering across various browsers and devices while maintaining fast page load times added another layer of complexity.
Impact: Expanded RegarSport's digital marketplace reach to web users, providing a consistent and immersive shopping and design customization experience across both mobile and desktop platforms.
Gallery:
Role
Front-End Developer
Released
Jul 2024
Tech Stack
Key Highlights
- Build responsive e-commerce web applications using Next.js and Tailwind CSS
- Integrate Three.js for real-time 3D design input and preview directly in the browser
- Handling SSR/client-side rendering conflicts when integrating Three.js in the Next.js framework
- Implement a referral-based affiliate system with continuous commission tracking on the web platform
- Optimize 3D rendering performance across multiple browsers and devices for a seamless user experience