Oefenruimte Boekingssysteem — Soulex.nl
Online boekingssysteem voor de muziekstichting. Bands kunnen een oefenruimte boeken, betalen via Mollie, en annuleren met automatische refund.
Hoe het werkt
Band bezoekt website
│
▼
Weekoverzicht met beschikbare tijdslots (groen = vrij, rood = bezet + bandnaam)
+ datumkiezer om direct naar een specifieke week te springen
│
▼ klikt op een slot (nogmaals klikken = deselecteren)
Boekingsformulier verschijnt gedockt aan onderkant scherm
│
▼ verstuurt
Redirect naar Mollie betaalpagina
│
▼ betaling geslaagd
Boeking definitief + 2 e-mails:
1. Bevestigingsmail naar de band (met annuleringslink)
2. Notificatie naar de organisatie
Annulering (door band):
Band klikt annuleringslink in e-mail → bevestigt → automatische refund via Mollie
→ Organisatie krijgt e-mail over de annulering
Annulering (door beheerder):
Beheerder gaat naar /admin → logt in met wachtwoord
→ Ziet alle aankomende boekingen → klikt "Annuleer boeking"
→ Automatische refund via Mollie + organisatie krijgt e-mail
Tech Stack
| Component | Service | Kosten |
|---|
| Frontend + API | Next.js (TypeScript) op Vercel | Gratis (hobby tier) |
| Database | Supabase (PostgreSQL) | Gratis (free tier) |
| Betalingen | Mollie | ~€0,29 per transactie |
| E-mail | Resend | Gratis (3000 mails/maand) |
| Code | GitHub (private repo) | Gratis |
Projectstructuur
src/
├── config.ts ← ALLE configureerbare variabelen (prijs, tijden, etc.)
├── app/
│ ├── page.tsx ← Hoofdpagina: weekkalender + gedockt boekingsformulier
│ ├── layout.tsx ← Layout: header, footer, NL taalinstellingen
│ ├── admin/
│ │ └── page.tsx ← Beheerderspagina: boekingen inzien + annuleren
│ ├── booking/
│ │ ├── success/page.tsx ← Bevestigingspagina na betaling
│ │ └── cancel/page.tsx ← Annuleringspagina
│ └── api/
│ ├── slots/route.ts ← GET: beschikbare tijdslots ophalen (incl. bandnamen)
│ ├── bookings/route.ts ← POST: boeking aanmaken + Mollie betaling starten
│ ├── bookings/[id]/cancel/route.ts ← POST: annulering + refund (door band)
│ ├── admin/bookings/route.ts ← GET: alle boekingen ophalen (admin)
│ ├── admin/bookings/[id]/cancel/route.ts ← POST: annulering door beheerder
│ └── webhooks/mollie/route.ts ← POST: Mollie meldt betaalstatus
└── lib/
├── supabase.ts ← Database client + types
├── mollie.ts ← Mollie betaal-client
├── email.ts ← E-mail templates (bevestiging, annulering, org-notificatie)
└── slots.ts ← Logica: slots genereren op basis van config
Configuratie aanpassen
Alle instellingen staan in één bestand: src/config.ts
export const config = {
roomName: "Oefenruimte",
pricePerSlotCents: 4000, // Prijs voor een losse dagdeel-boeking (€40,00)
slotDurationMinutes: 240, // Duur per dagdeel (4 uur)
dagdelen: [ // De 3 vaste dagdelen die geboekt kunnen worden
{ id: "ochtend", label: "Ochtend", startHour: 9 },
{ id: "middag", label: "Middag", startHour: 14 },
{ id: "avond", label: "Avond", startHour: 19 },
],
operatingDays: [0, 1, 2, 3, 4, 5, 6], // Beschikbare dagen (0=zo t/m 6=za)
maxWeeksAhead: 4, // Hoeveel weken vooruit boeken
organizationEmail: "[email protected]", // E-mail voor notificaties aan organisatie
organizationName: "Muziekvereniging Soulex", // Naam organisatie (in e-mails)
currency: "EUR", // Valuta
pendingExpiryMinutes: 15, // Hoe lang een onbetaalde boeking geldig is
cancellationCutoffHours: 48, // Tot hoe lang van tevoren gratis annuleren mag
};
Dit dekt alleen de losse eenmalige boeking (€40 per dagdeel). De vaste
reserveringen (elke week €120 / om de week €60 per 4 weken) volgen in een aparte subscriptions-tabel — zie
BESTUUR.md voor de uitleg van het hele proces.
Na het wijzigen: commit + push naar GitHub → Vercel deployed automatisch.
Database
Eén tabel bookings in Supabase (PostgreSQL). Schema staat in supabase/migrations/001_create_bookings.sql.
Statussen van een boeking:
pending → boeking aangemaakt, wacht op betalingconfirmed → betaling geslaagd, boeking definitiefexpired → betaling niet ontvangen binnen 15 minutencancelled → band heeft geannuleerd, refund gestart
Accounts & Toegang
Zie TOEGANG.md (lokaal bestand, niet in de repo — bevat ook inloggegevens) voor
een actueel overzicht van alle accounts en dashboards.
Environment Variables
Deze staan ingesteld in Vercel (Settings → Environment Variables):
| Variable | Wat het is | Waar te vinden |
|---|
NEXT_PUBLIC_SUPABASE_URL | Supabase project URL | https://janjxrnrscnlbrpvtnhi.supabase.co |
SUPABASE_SERVICE_ROLE_KEY | Supabase service_role key (of de nieuwe sb_secret_... secret key) | Supabase → Settings → API Keys |
MOLLIE_API_KEY | Mollie API key | Mollie → Developers → API keys |
RESEND_API_KEY | Resend API key | Resend → API Keys |
NEXT_PUBLIC_APP_URL | De URL van de live site | De Vercel deployment URL |
ADMIN_SESSION_SECRET | Ondertekent de admin-sessie-cookie en wachtwoord-reset-links | Willekeurige lange string, zie .env.example |
MAGIC_LINK_SECRET | Ondertekent de tijdelijke "mijn boekingen"-links | Willekeurige lange string |
CRON_SECRET | Beveiligt de dagelijkse cron-job (/api/cron/subscriptions) | Willekeurige lange string |
Let op: SUPABASE_SERVICE_ROLE_KEY is een geheime key met volledige database-toegang. Deel deze nooit publiek.
Beheerderspagina (/admin)
Ga naar jouw-site.vercel.app/admin — log in met je beheerders-e-mailadres en wachtwoord
(accounts staan in de admin_users-tabel in Supabase). Nog geen wachtwoord ingesteld, of
vergeten? Via "Wachtwoord vergeten" op het inlogscherm krijg je een e-maillink (30 min geldig)
om er een (nieuw) in te stellen.
Functies:
- Overzicht van alle aankomende bevestigde en lopende boekingen
- Annuleren van een boeking — het betaalde bedrag wordt automatisch teruggestort via Mollie en de organisatie ontvangt een e-mail
- Vernieuwen om de laatste boekingen op te halen
Een nieuw beheerdersaccount toevoegen: voeg een rij toe aan admin_users in Supabase (alleen
email invullen, password_hash leeg laten) — die persoon kan dan via "Wachtwoord vergeten"
zelf een wachtwoord instellen.
Kalenderoverzicht
- Groene slots = beschikbaar, klik om te boeken
- Rode slots = bezet (bandnaam wordt bewust niet publiek getoond — alleen zichtbaar in
/admin)
- Datumkiezer boven het rooster om direct naar een specifieke week te springen
- Slot toggle — klik nogmaals op een geselecteerd (blauw) slot om te deselecteren
- Gedockt formulier — bij selectie verschijnt het boekingsformulier vast aan de onderkant van het scherm
- Mobiel-vriendelijk — werkt goed op smartphones met aanpaste layout en grote knoppen
Wat er nog moet gebeuren om LIVE te gaan
1. DNS-records toevoegen voor e-mail (Resend + soulex.nl)
Het domein soulex.nl is toegevoegd in Resend, maar de DNS-records moeten nog worden ingesteld bij de domeinprovider. Zonder dit kunnen e-mails alleen naar het Resend-accountadres gestuurd worden.
Toe te voegen DNS-records:
| Type | Name | Content | TTL |
|---|
| TXT | resend._domainkey | (volledige waarde uit Resend dashboard) | Auto |
| CNAME | rsend | (waarde uit Resend dashboard) | Auto |
| CNAME | send | (waarde uit Resend dashboard) | Auto |
De exacte waarden staan in het Resend dashboard onder Domains → soulex.nl.
Na het toevoegen: klik in Resend op "I've added the records" → wacht op verificatie (kan tot 48 uur duren, meestal sneller).
2. E-mail afzender updaten in code
Zodra het domein geverifieerd is in Resend, moet de afzender in src/lib/email.ts worden aangepast:
Verander (3x in het bestand):
from: `${config.organizationName} <[email protected]>`
Naar:
from: `${config.organizationName} <[email protected]>`
3. Mollie live zetten
- Verifieer het Mollie-account met KVK-gegevens van de stichting
- Maak een Live API key aan in Mollie (Developers → API keys → Livemodus)
- Vervang de
MOLLIE_API_KEY in Vercel door de live key
- Test een echte betaling
4. NEXT_PUBLIC_APP_URL instellen
Zorg dat NEXT_PUBLIC_APP_URL in Vercel is ingesteld op de definitieve URL van de site. Dit is nodig voor:
- Mollie webhooks (betaalstatus terugkoppeling)
- Annuleringslinks in e-mails
- Redirect na betaling
5. Organisatie e-mailadres instellen
Pas organizationEmail in src/config.ts aan naar het echte e-mailadres van de stichting (bijv. [email protected]).
6. (Optioneel) Eigen domein koppelen aan Vercel
In Vercel → Settings → Domains kun je soulex.nl of boeken.soulex.nl koppelen als custom domain in plaats van de .vercel.app URL.
Lokaal ontwikkelen
# Dependencies installeren
npm install
# Kopieer env template en vul waarden in
cp .env.example .env.local
# Dev server starten
npm run dev
Open http://localhost:3000.
Testen met Mollie
In test mode kun je betalen met testkaarten zonder echt geld. De Mollie test-modus werkt automatisch als je een test_... API key gebruikt.
Zie de Mollie documentatie voor testkaarten en testscenario's.
Deployen
Elke push naar de master branch op GitHub triggert automatisch een nieuwe deployment op Vercel. Geen handmatige actie nodig.
