Stud & Stack | Interactive Parts Shop & 3D Builder

STUD & STACK — 3D PARTS SHOP & INTERACTIVE BUILDER

PROJECT GOAL Create an engaging parts-shopping interface that combines product discovery with hands-on creation. The project brings a colourful brand, detailed catalogue and interactive 3D tools into one responsive experience.

MY ROLE Visual design, user journeys, front-end development, original product graphics, Three.js integration, bilingual content, WordPress plugin packaging and functional checks.

SHOPPING EXPERIENCE The catalogue contains 97 illustrative lots with part-number search suggestions, category/colour/condition/price filters, sorting, pagination and grid/list views. Product details include colour and condition variants, quantity controls, an orbitable 3D view and front, side and top views. A wishlist, recently explored items and a side-panel shopping bag support the browsing journey. The checkout presentation covers delivery, payment-method selection and order review.

BUILD YOUR OWN The creation studio supports a 12 x 12 base and six layers, a selected toolkit of shapes and colours, grid snapping, placement previews, overlap/basic-support checks, move/rotate/delete controls, undo/redo and camera zoom/orbit. A 2D alternative remains available. Users can name creations, save up to twelve designs in the browser, download a JSON build plan, view a bill of materials and add a creation bundle to the bag. A parts-only or assembly selection illustrates an additional service surcharge.

BUILD & DISCOVER Six starting models include a corner house, robot, abstract racing car, tower, bridge and mini flower. Each has a parts list, illustrative price, difficulty and layer-based visual building steps. Designs can be loaded into the studio or added as a bundle. The missing-pieces helper compares a creation against the current bag and adds only the missing quantities.

DESIGN AND INTERACTIONS Bright yellow navigation, dark typography and violet accents create a playful, clear identity. Original scalable part illustrations and locally rendered 3D geometry share a consistent presentation. Product-view transitions, card reveals and add-to-bag feedback add motion without continuous camera movement. Keyboard controls and reduced-motion handling are included.

TECHNICAL DELIVERY An installable WordPress plugin renders the standalone experience through [studstack_shop]. Settings allow the brand name, accent and default language to be changed. The frontend uses HTML, CSS and JavaScript with locally bundled Three.js, WebGL rendering, browser storage, responsive layouts and English/German text. SVG and 2D fallbacks are provided.

PROJECT SCOPE Independent portfolio project with illustrative catalogue data and checkout. Real payment processing, shipping, stock synchronisation and external commerce integrations are outside this implementation. The builder does not certify real-world structural stability. This case study describes the interface and functionality delivered, not a live trading business.

TOOLS WordPress; PHP; JavaScript; HTML; CSS; Three.js; WebGL; Python; OBS Studio.

SKILLS Web Design; Front-End Development; E-Commerce UX; JavaScript; Three.js; Interactive 3D; WordPress Plugin Development; Product Configuration; Responsive Design; Localisation; Functional Testing.