Wicked Workshops

Monorepo met de site en de achterkant. Lees voor de bouw van de achterkant eerst CLAUDE.md en docs/; de fasering staat in docs/13-bouwvolgorde.md, de voortgang in docs/CHANGELOG.md.

Map	Wat
web/	Next.js (App Router). Vercel: zet Root Directory op web.
directus/	Lokale Directus 11.17.4 met ingebouwde PostgreSQL en Mailpit (geen Docker), plus schema, migraties, seeds, extensie en rechtentest als code. Zie directus/README.md.
reference/	Het gekozen ontwerp, read-only.
docs/	Specificaties per onderdeel.

# site
cd web && npm install && npm run dev        # http://localhost:3000
npm run lint && npm run typecheck && npm test && npm run test:e2e

# achterkant (geen Docker nodig)
cd directus && npm ci && npm run setup      # eenmalig
npm run dev                                 # Directus :8055, Mailpit :8025
npm run schema:apply && npm run seed:demo   # eerste keer, in een tweede terminal
npm run test:permissions                    # rechtenmatrix uit docs/03

De rest van dit bestand beschrijft de eerdere voorkant-ronde. Paden daarin zijn nu relatief aan web/.

---

Voorkant (eerdere ronde)

Next.js 15 project met het volledige prototype: tien schermen op een gedeelde basis, klaar om te deployen naar Vercel.

Dit is nog een prototype op vaste voorbeelddata. Er is nog geen Directus-koppeling, geen betaling en geen echte authenticatie. Het doel is om het geheel te kunnen tonen, doorklikken en testen op echte apparaten.

Wat er in zit

Scherm	Wat je ziet
Homepage	Hero met zoekveld, categorieen, zo werkt het, uitgelicht aanbod, teamuitjes, reviews
Aanbod	Filterpaneel met zestien groepen, kaartweergave, SEO-tekst, interne links
Workshop	Galerij, feitenrij, beschrijving, reviews met subscores, FAQ, boekblok
Aanbiederprofiel	Statistieken, sfeerimpressie, workshops, reviews, contactkaart
Blogarchief	Uitgelicht artikel, filters per onderwerp, meer laden
Blogartikel	Kort antwoord, inhoudsopgave, FAQ, gerelateerde workshops
Inloggen en registreren	Twee tabs: bezoeker en workshopgever, met driestapsflow
Profiel workshopgever	Zeven secties met NAW, KvK, btw, profiel, locatie, uitbetaling
Nieuwe workshop	Wizard in zes stappen met live voorbeeldkaart
Dashboard	Overzicht, workshops, agenda, boekingen, reviews, uitbetalingen, profiel

Bovenaan staat een donkere balk om tussen de schermen te springen. Die hoort niet bij het product en haal je weg zodra de echte routes bestaan (zie hieronder).

Deployen naar Vercel

Er zijn twee manieren. De eerste is de gebruikelijke, de tweede is sneller als je alleen even wilt kijken.

Optie 1: via GitHub (aanbevolen)

Zo krijg je automatisch een nieuwe preview bij elke wijziging.

# 1. In de map van dit project
git init
git add .
git commit -m "Wicked Workshops prototype"

# 2. Maak een lege repository aan op github.com en koppel hem
git remote add origin https://github.com/<jouw-account>/wicked-workshops.git
git branch -M main
git push -u origin main

Ga daarna naar vercel.com/new, kies Import Git Repository en selecteer de repository. Vercel herkent Next.js zelf, dus je hoeft niets in te stellen:

Instelling	Waarde	Actie
Framework Preset	Next.js	Wordt automatisch herkend
Root Directory	./	Laat staan
Build Command	next build	Laat staan
Output Directory	standaard	Laat staan
Install Command	npm install	Laat staan
Node.js Version	20.x of hoger	Alleen wijzigen als er een oudere staat

Klik op Deploy. Na ongeveer een minuut staat het live op een .vercel.app adres.

Optie 2: rechtstreeks vanaf je laptop

npm i -g vercel
vercel          # preview-omgeving
vercel --prod   # productie

De eerste keer stelt de CLI een paar vragen. Antwoord met de standaardwaarden, behalve de projectnaam.

Lokaal draaien

Node 20 of hoger.

npm install
npm run dev

Open http://localhost:3000.

Test het mobiele gedrag met de apparaatweergave in de browser (Chrome: F12, dan het telefoonicoon) op 390 of 430 pixels breed. Onder 768 pixels schakelen de carrousels, de zijlade, de kaartweergave en de "Lees meer" blokken aan.

Omgevingsvariabelen

Er is er nog niet één nodig om te deployen: het prototype draait volledig op vaste data. .env.example staat er alvast voor de volgende fase.

Zodra je Directus koppelt, zet je ze in Vercel onder Settings > Environment Variables:

Variabele	Waarvoor	Scope
NEXT_PUBLIC_SITE_URL	Canonicals en metadata	Alle omgevingen
DIRECTUS_URL	Waar de API staat	Alle omgevingen
DIRECTUS_STATIC_TOKEN	Server-side lezen	Alleen server, nooit NEXT_PUBLIC_
REVALIDATE_SECRET	Beveiligt de revalidatie-webhook	Alleen server
OPP_SANDBOX_API_KEY	OPP-testbetalingen (pilot, payment_mode = sandbox)	Alleen server
OPP_SANDBOX_NOTIFY_SECRET	Controleert de handtekening van OPP-webhooks in de sandbox	Alleen server
OPP_LIVE_API_KEY / OPP_LIVE_NOTIFY_SECRET	Echte betalingen, op zijn vroegst januari 2027. Zonder deze sleutel kan live niet	Alleen server
CRON_SECRET	Beveiligt /api/cron/escrow. Zonder deze waarde draait de cron niet. Zelfde waarde als het GitHub-secret CRON_SECRET	Alleen server
MOLLIE_API_KEY	Oude betaalkoppeling, alleen als payment_provider = mollie	Alleen server

Betalen zet je aan en uit in Directus onder Platform settings > payment_mode: off (geen betaling, boeking direct bevestigd), sandbox (OPP-testgeld) of live. Omzetten werkt direct, zonder deploy. OPP stuurt webhooks naar https://www.wickedworkshops.nl/api/webhooks/opp; localhost werkt niet bij OPP. | FIELD_ENCRYPTION_KEY | Versleutelt het IBAN van workshopgevers (32 bytes, base64). Lokaal en op Vercel dezelfde waarde, anders zijn opgeslagen IBAN's niet meer te lezen | Alleen server |

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗