3D Shoe Configurator

Project Overview

This full-stack project, created for Flux.be and a London-based sneaker brand, allows users to design and order custom sneakers in a modern, sustainable way. The 3D configurator was built with Three.js and features real-time customization of shoe elements like soles, laces, patterns, and materials.

Users can rotate, zoom, and personalize their sneakers with color and texture options and even take snapshots of their creations. The backend includes a Node.js API and MongoDB database, and a Vue.js dashboard lets admins manage orders with live updates using web sockets.

This project was developed in collaboration with Helia and Ender.

The Problem

The sneaker brand needed a solution to let users customize shoes online without overproduction. Their goal: a user-friendly, immersive interface to personalize shoes and place orders on demand while reducing waste and reflecting their eco-conscious values.

Concept & Goals

We focused on three pillars: customization, sustainability, and real-time interaction. The key goal was to make customization easy and fun while technically enabling live updates, admin control, and streamlined ordering.

3D Configurator Experience

The frontend was built in Three.js, allowing users to rotate and zoom in on the shoe in real-time. Each part of the sneaker from the sole to the pattern is clickable and editable. Users can swap textures, change colors, and preview every change live. A snapshot feature lets them save or share their designs.

Admin Dashboard

The dashboard was built using Vue.js and connected to our backend with web sockets for real-time updates. Admins can manage incoming orders, view user-submitted designs, and update order statuses instantly. This supports a smooth manufacturing process.

Tech Stack

Final Result

The final result is a seamless 3D customization tool with live previews, admin control, and clear ordering flow all styled to match the brand’s modern and sustainable image.

View Project Prototype

What I Learned

This project taught me how to combine 3D graphics with real-time UI, manage state between frontend and backend, and build a complete system from concept to delivery. I also learned a lot about working with real clients and syncing technical and branding goals.