(10)3D & Visualization
Plank Configurator
Personalised plank customiser with checkout
Overview
A 3D product configurator for personalised planks: shoppers set the name, style, font, colours and details in a side panel, watch the plank update in real time, then pay through Stripe, with each order logged to Google Sheets.
Highlights
- 01Customisation panels for name, style, font, colours and details, with a live 3D preview
- 02Order summary with a snapshot of the finished design
- 03Stripe Checkout, with reCAPTCHA verification before an order is placed
- 04Every order appended to a Google Sheet for the client's fulfilment team
Private or internal system: no public link.
- Timeline
- Apr – Sep 2025
- Team
- Built with one other developer; most commits are mine
- Category
- 3D & Visualization
My role
Lead developer (freelance)
Built most of the configurator: the real-time 3D model and its customisation panels, the order summary, Stripe checkout, reCAPTCHA protection and the Google Sheets order log.
Owned
- 3D / WebGL
- Frontend
- Payments
- Integrations
Tech
- Frontend
- Next.js
- Zustand
- Radix UI
- html2canvas
- Integrations
- Stripe
- Google Sheets API
- reCAPTCHA
- 3D & motion
- React Three Fiber
- Three.js
- Drei