Boekingsplatform voor flexwerkplekken en vergaderruimtes
Een website met boekingsmodule waarin bezoekers beschikbare werkplekken en vergaderruimtes zoeken, online een huurovereenkomst afsluiten en direct betalen via Mollie. Klanten beheren daarna hun contracten en facturen in een eigen accountomgeving.
De boekingsflow
- 01ZoekenLocatie, type ruimte, startdatum en duur kiezen; alleen vrije ruimtes verschijnen.
- 02GegevensZakelijk of particulier, met postcodecheck en IBAN.
- 03ContractVoorbeeld van de huurovereenkomst lezen en akkoord geven.
- 04BetalenAfrekenen via Mollie, betaling teruggeboekt in het verhuursysteem.
- 05AccountContracten, facturen en gegevens zelf inzien.
Wat doet het boekingsplatform?
De opdrachtgever verhuurt flexplekken en vergaderruimtes. De beschikbaarheid, prijzen, klanten, contracten en facturen staan in een extern verhuursysteem. Het platform maakt dat systeem bereikbaar voor bezoekers: zoeken op datum en duur, een ruimte kiezen, gegevens invullen, de huurovereenkomst lezen en akkoord geven, en betalen.
Wat was mijn rol?
Ik werkte in een klein team via een bureau. Mijn deel was vooral de boekingsmodule: de zoekfunctie en het beschikbaarheidsfilter, de checkout met contractvoorbeeld, de Mollie-betaling met terugkoppeling naar het verhuursysteem, en de accountomgeving. Daarnaast bouwde ik mee aan de content-blocks en de visuele editor op Directus.
Hoe wordt de website beheerd?
De inhoud van de website staat in Directus. Pagina's worden opgebouwd uit blocks (hero, tekst en beeld, galerij, FAQ, virtuele tour, nieuws) en zijn te bewerken met de visuele editor van Directus. De site is tweetalig, Nederlands en Engels.
De uitdaging
Een ruimte huren ging niet volledig online. Het verhuursysteem bevatte alle gegevens, maar had geen klantvriendelijke boekingsflow die past bij de website.
Actuele beschikbaarheid
Bezoekers moeten alleen ruimtes zien die in de gekozen periode echt vrij zijn, met de juiste prijs.
Eén bron van waarheid
Klanten, boekingen, contracten, facturen en betalingen moeten in het verhuursysteem blijven kloppen, zonder dubbele invoer.
Betalen en contract in één keer
De klant moet de overeenkomst kunnen lezen, akkoord geven en direct betalen, zakelijk of particulier.
Selfservice na de boeking
Huurders willen hun contracten, facturen en gegevens zelf kunnen inzien, zonder te mailen of te bellen.
De oplossing
Een Nuxt-site met server-routes die het verhuursysteem, Mollie en Directus aan elkaar koppelen.
Zoeken op beschikbaarheid
Een zoekfunctie in stappen: locatie, type ruimte en een datumkiezer voor de startdatum, een bekende of open einddatum en de duur. De resultaten komen live uit het verhuursysteem en zijn te filteren op beschikbaarheid. Datums worden consequent in UTC doorgegeven, zodat een boeking op de juiste dag start.
Checkout met contractvoorbeeld
Zakelijk of particulier bestellen, adres aanvullen via een postcodecheck voor Nederland en België, IBAN-invoer die zichzelf normaliseert, en een voorbeeld van de huurovereenkomst uit het verhuursysteem waar de klant akkoord op geeft.
Betalen via Mollie
De betaling wordt aangemaakt op basis van de openstaande factuur in het verhuursysteem, met een controle dat factuur en klant bij elkaar horen. Een Mollie-webhook boekt een geslaagde betaling terug in het verhuursysteem. Mislukt een betaling, dan kan de klant het opnieuw proberen.
Accountomgeving
Inloggen, wachtwoord herstellen, en een overzicht van contracten, facturen en accountgegevens, rechtstreeks uit het verhuursysteem.
Techniek
- Frontend: Nuxt met Tailwind CSS, Nuxt UI en een Vue-datumkiezer
- Content: Directus als headless CMS met blocks en visuele editor
- Koppelingen: REST API van het verhuursysteem (OAuth-token met caching), Mollie API met webhook, postcode-API
- Meertaligheid: Nuxt i18n, Nederlands en Engels
- Veiligheid: API-sleutels alleen server-side, honeypot en tijdscontrole tegen spam op het contactformulier
Resultaat
- Een volledig online boekingsflow, van zoeken tot betaalde huurovereenkomst
- Boekingen en betalingen komen direct in het verhuursysteem, zonder overtypen
- Huurders zien hun contracten en facturen in hun eigen account
- De opdrachtgever beheert de website zelf in Directus, in twee talen
Dit project heb ik in teamverband via een bureau gebouwd. Daarom blijft de opdrachtgever in deze case anoniem.
Gerelateerde projecten
Gerelateerde diensten
Interesse in een vergelijkbare oplossing?
Laten we sparren over jouw project. Ik help je graag van concept tot werkende oplossing.
Laten we praten