Wat kost een woning, verbouwing of aanbouw? Vul een paar keuzes in (type, maten, verdiepingen, afwerking, installaties) en de app rekent per kostenpost een begroting uit, terwijl een 3D-model van de woning live meegroeit. Scenario's naast elkaar zetten ("sober" tegen "luxe") en de begroting als pdf meegeven aan de klant of de bank.
Wow-moment
Schuif de breedte van 8 naar 10 meter: het 3D-huis wordt breder, het dak schuift mee en het totaal springt van € 412.000 naar € 468.000, met in de grafiek precies welke posten stijgen. Klik "luxe afwerking": de kozijnen worden antraciet en de begroting rekent opnieuw.
Gegevens
| Tabel | Kolommen |
|---|---|
projects |
name, client, location, notes |
scenarios |
project_id, name ("Sober", "Luxe"), inputs (json, zie hieronder), total (decimal, opgeslagen na rekenen) |
cost_items |
code (bijv. 21 Buitenwanden), chapter (Grondwerk, Fundering, Ruwbouw, Dak, Gevel, Kozijnen, Afbouw, Installaties, Terrein, Bijkomend), name, unit (m2, m3, m1, st, post), price (per eenheid, excl. btw), formula (hoeveelheid uit de inputs, bijv. gevel_m2), level (basis, midden, luxe of leeg = altijd) |
Inputs (json): type (vrijstaand, 2-onder-1-kap, rij, aanbouw), breedte, diepte, verdiepingen (1-3),
dak (zadel, plat), afwerking (basis, midden, luxe), warmtepomp (bool), zonnepanelen (aantal),
kelder (bool), btw (21).
Rekenen (in PHP, één klasse CostCalculator)
Eerst afgeleide maten uit de inputs: bvo_m2 (breedte × diepte × verdiepingen), gevel_m2 (omtrek × hoogte − 20%
ramen), dak_m2 (plat = footprint; zadel = footprint / cos(40°)), fundering_m1 (omtrek), kozijn_m2. Dan per
cost_item met passend level: hoeveelheid = afgeleide maat, bedrag = hoeveelheid × prijs. Daarna opslagen:
algemene kosten 8%, winst en risico 5%, onvoorzien 5%, btw. Resultaat: regels per hoofdstuk + totalen.
Dezelfde afgeleide maten gaan als JSON naar de 3D-viewer.
Pagina's
- Projecten (
/projects): lijst + nieuw project. - Calculator (
/scenarios/{id}): links de 3D-viewer, rechts het invoerformulier (schuifjes en keuzeknoppen); onder de begroting per hoofdstuk (uitklapbaar) en een liggende<x-chart>per hoofdstuk. Elke wijziging: HTMXhx-trigger="input changed delay:200ms"naar de server, die rekent en de begroting teruggeeft; de viewer krijgt de nieuwe maten via een event. - Vergelijken (
/projects/{id}/compare): scenario's naast elkaar, verschil per hoofdstuk, gegroepeerde grafiek. - Prijzen (
/cost-items): tabel om eenheidsprijzen aan te passen (beheer). - Pdf:
composer require barryvdh/laravel-dompdf, begroting met logo, inputs, posten en totaal. - Dashboard (
_live): projecten met totaal, gemiddelde prijs per m² BVO.
3D-viewer
npm install three. Alpine-component houseViewer: grondvlak, een doos per verdieping (breedte × diepte × 3 m),
dak als prisma (zadel) of plat, ramen als donkere vlakjes op de gevel (aantal naar breedte), kleur van gevel en kozijnen
naar afwerkingsniveau, zonnepanelen als blauwe plaatjes op het dak. OrbitControls, langzaam draaien als niemand klikt.
Geen precisie nodig: herkenbaar en direct reagerend is genoeg.
Bouwvolgorde
- Migraties + seeder met ±40
cost_items(realistische prijzen 2026, bijvoorbeeld metselwerk € 95/m², dakpannen € 75/m², kozijnen kunststof € 650/m², warmtepomp € 12.500/st) en 2 projecten met elk 2 scenario's. CostCalculator+ de begroting als tabel (eerst zonder 3D). 3. Formulier met live herrekenen.- 3D-viewer. 5. Vergelijken + grafieken. 6. Pdf.
- Extra's: AI-advies ("waar kan ik € 30.000 besparen?" met de begroting als context), AI leest een bouwtekening of offerte (foto of pdf) uit en vult de inputs, prijzen van een leverancierssite ophalen (zie "gegevens van buiten" in AGENTS.md).
Demo (3 minuten)
- "Een eerste begroting kost nu een week rekenwerk." 2. Schuiven aan maten: huis en totaal reageren live.
- Sober tegen luxe vergelijken. 4. AI-bespaaradvies. 5. Pdf voor de klant.
Let op
- Noem het een indicatie, geen offerte. Prijzen zijn voorbeelden; het team kan ze aanpassen op de prijzenpagina.