3D-Terrassen
From a single job to a SaaS: a real-time 3D configurator for patio roofs that turns visitors into qualified inquiries.
/The road to a market
/The problem
A patio-building company asked me for a quote for a configurator. Before I write a quote, I analyze the market: how do other companies sell patio roofs online?
The answer: not really at all. Most websites show long texts and photo lists with countless variants that a layperson cannot make sense of. The rest rely on forms full of technical terms, with no preview. But as a customer I want to see how my roof looks in the end, before I inquire anywhere.
That gap is exactly the competition's weak spot. Close it, and you do not just stand out, you take the others' inquiries away.
Texts and photo lists
- Page-long descriptions instead of a result
- Screenshot collections of every variant
- The layperson cannot tell what they get
Forms with no preview
- Technical terms customers do not know
- No preview, no sense of price
- The inquiry stays a shot in the dark
3D configurator in real time
- The roof in real-time 3D, with your own measurements and colors
- A live price on every change
- The inquiry arrives as a finished configuration
/The system
The core is an embeddable 3D configurator built on Three.js and React Three Fiber: real-time 3D of the roof, a live price that reacts to every change, and an automatic cut list with article numbers.
Instead of selling the tool once, I built a multi-tenant SaaS around it. In the member portal each business maintains its materials, colors and prices, adjusts the inquiry form in the form builder and embeds the configurator on its own website via iframe. Each business pays 200 EUR monthly.
The configurator
Real-time 3D with Three.js and React Three Fiber: material, measurements, roof, colors and extras change live in the model. The price recalculates on every change, and the cut list with article numbers is generated automatically.
The SaaS platform
Multi-tenant from the ground up: a member portal with a dashboard, each business's own prices and materials, a form builder for the inquiry form, an embed-code generator and an analytics of my own with a conversion funnel. Every business gets its own configurator.
- EUR monthly subscription
- 200
The lead channel
When a prospect submits their configuration, the business immediately gets an email with customer data, total price and the full configuration. In the portal every inquiry is ready with a preview of the configuration, a status and internal notes.
/Result
- 200
- EUR monthly subscription
The platform is live and running. Websites that embed the configurator stand out visibly from the uniform competition: for the first time prospects understand what they are buying and inquire with a finished configuration. A configurator in this form exists on no other patio-building site.
The connected businesses report that their orders have multiplied since they started using it: customers finally understand what they are buying and book their on-site surveys with them instead of the competition. The pattern behind it is always the same: analyze the market, find the weak spot, build the solution. This time I do not sell the solution to one winner, I rent it out to many.
/Screenshots
/Stack
- Three.js
- React Three Fiber
- Next.js
- Multi-Tenant SaaS
- Form Builder
- iframe-Embed
- Neon + Prisma
- Resend Lead-Mails
- Eigenes Analytics + Conversion-Funnel
/More projects
A similar process with no system yet? I build things like this for others too.