DV Software – website-, dashboard- en AI-platform voor ondernemers

Meer aanvragen. Minder gedoe. Een bedrijf van Djim Vissers.

Interactieve demo van een multi-tenant platform waarmee je voor veel verschillende ondernemers een website, een beheerdashboard, een mobiele app (PWA) en een AI-assistent levert en beheert vanuit één centrale omgeving.

Voorbeeldklant: Noordlicht Installatietechniek (fictief installatiebedrijf in Amersfoort). Alle gegevens zijn verzonnen.

Snel starten (lokaal, zonder accounts)

Benodigd: Node.js 20+ (getest met Node 24).

cd vlotwerk
npm install
npm run dev

Open daarna http://localhost:3000.

Wat	Adres
Startpagina met uitleg	http://localhost:3000
Publieke website van de klant	http://localhost:3000/sites/noordlicht
Inloggen (kies een rol)	http://localhost:3000/login
Klantdashboard	http://localhost:3000/dashboard (na inloggen als Erik)
Platformbeheer (jij)	http://localhost:3000/admin (na inloggen als Platformeigenaar)
Mobiele app (PWA)	http://localhost:3000/m
Documentatie in de app	http://localhost:3000/docs
Klantsite op "eigen domein"	http://noordlicht.localhost:3000 (zie hieronder)

De demo bewaart alles in data/db.json (wordt automatisch aangemaakt). Terug naar de beginsituatie: in Platformbeheer op Demo resetten klikken, of npm run demo:reset en de server herstarten.

Klantsite op eigen domein testen

src/proxy.ts herschrijft verzoeken op een klantdomein naar die klant. Lokaal werkt <slug>.localhost in Chrome/Edge direct, bijvoorbeeld http://noordlicht.localhost:3000 of http://bloesem.localhost:3000. Links en formulieren werken dan op de root (/).

Optioneel: echte AI en e-mail aanzetten

Kopieer .env.example naar .env.local en vul alleen in wat je wilt testen. Plak sleutels nooit in de chat of in de broncode.

ANTHROPIC_API_KEY: de AI-assistent gebruikt dan Claude in plaats van de Demo-AI.
RESEND_API_KEY + EMAIL_FROM: e-mails worden dan echt verzonden. Zonder deze sleutels wordt niets verstuurd en staat er "Niet verzonden" bij het bericht.
HUBSPOT_PRIVATE_APP_TOKEN: test de echte HubSpot-connector (alleen lezen).

Herstart npm run dev na het aanpassen van .env.local.

Optioneel: draaien op PostgreSQL (zonder Docker of account)

npm run db:local      # terminal 1: lokale Postgres met schema + demodata

Zet in .env.local:

DATA_BACKEND=postgres
DATABASE_URL=postgres://postgres@127.0.0.1:54329/postgres
DATABASE_POOL_MAX=1

en start in een tweede terminal npm run dev. De startpagina toont dan "Opslag: PostgreSQL met Row Level Security". Opnieuw beginnen: npm run db:local -- --reset.

Echte database en login (Supabase)

Stap voor stap in docs/08-supabase-koppelen.md. Online zetten: docs/09-online-zetten.md.

Demostand naast echte instellingen

npm run dev:demo start de app met voorbeelddata en klik-login, ook als .env.local echte Supabase-instellingen bevat. Handig om iets te proberen zonder je echte data te raken.

Handige commando's

npm run dev        # ontwikkelserver
npm test           # 60 tests: tenant-scheiding (JSON + Postgres), RLS, AI-beleid, versleuteling, domeinen
npm run db:local   # lokale PostgreSQL (PGlite) met schema en demodata
npm run typecheck  # TypeScript-controle
npm run build      # productiebuild

Projectstructuur

src/
  app/
    page.tsx                 startpagina van de demo
    login/                   demo-login per rol
    sites/[slug]/…           publieke klantwebsites (multi-tenant)
    dashboard/…              klantdashboard + server actions (actions/)
    admin/…                  platformbeheer + server actions
    m/                       mobiele app (PWA)
    editor-preview/[pageId]  live voorbeeld voor de websitebouwer (iframe)
    api/upload, api/media    afbeeldingen per klant
    api/export               data-export voor de klant (AVG)
    docs/                    documentatie in de app
  components/
    site/                    websiteblokken, header/footer, formulieren
    editor/                  websitebouwer (blokken, velden, preview)
    dashboard/ admin/ mobile/  interfaces per omgeving
    ui/                      shadcn/ui-componenten (Base UI)
  lib/
    db/repo.ts               ENIGE toegang tot klantdata (tenant-scoped)
    db/backend.ts            keuze opslag (DATA_BACKEND) + Store-interface
    db/json-store.ts         demo-opslag (data/db.json)
    db/pg-store.ts           PostgreSQL/Supabase met RLS per gebruiker
    db/platform.ts           platformbrede bewerkingen (alleen platformbeheer)
    auth.ts                  sessies (demo of Supabase Auth), rollen, pakketcontrole
    supabase.ts              Supabase Auth-clients, uitnodigingen
    agent/                   AI-agent: beleid, runtime, demo-engine, Claude-engine
    integrations/            koppelingencatalogus, connector-contract, kluis
    templates.ts             branchetemplates (installatie, bouw, salon, horeca, zzp)
    blocks.ts                schema van alle websiteblokken
supabase/migrations/         productieschema met Row Level Security (getest)
scripts/local-db.ts          lokale PostgreSQL zonder Docker (npm run db:local)
docs/                        businessplan, techniek, architectuur, roadmap, status
tests/                       Vitest-tests

Documentatie

Let op: project in OneDrive

Het project staat in een OneDrive-map. node_modules en .next bevatten tienduizenden bestanden, en OneDrive kan die vergrendelen tijdens het synchroniseren. Daarom heeft de demo-opslag al herhaalpogingen ingebouwd. Advies: zet de projectmap buiten OneDrive (bijvoorbeeld C:\dev\dvsoftware) en gebruik GitHub als back-up.