Akersloot United — verenigingswebsite op mijn eigen Nuxt CMS
Een website voor een vereniging die de initiatieven in Akersloot bundelt, met lid worden, doneren en sponsoring gekoppeld aan Memberix. Het beheer draait op een herbruikbare CMS-kit die ik zelf heb ontwikkeld.
Bekijk de websiteDrie lagen, één project
Wat is Akersloot United?
Akersloot United is een vereniging die inwoners, ondernemers, vrijwilligers en initiatieven in Akersloot samenbrengt, van de kermis en Koningsdag tot een winterfair en een eigen dorpscafé. De website moest die initiatieven laten zien, nieuws brengen en mensen direct laten meedoen: lid worden, doneren of partner worden.
Wat heb ik gebouwd?
Eerst de website zelf in Nuxt en Tailwind: home, over ons, initiatieven met detailpagina's, nieuws, lid worden, partners en contact. De formulieren voor lid worden, doneren en sponsoring zijn via server-routes gekoppeld aan Memberix, mijn eigen ledenplatform. Toen het ontwerp was goedgekeurd heb ik er mijn eigen CMS-kit aan gehangen, zodat de vereniging alle pagina's en secties zelf kan beheren.
Wat is de CMS-kit?
De CMS-kit is mijn eigen herbruikbare pakket voor Nuxt-projecten: een beheeromgeving met page builder, mediabibliotheek, navigatie en sitestructuur, records en een blogmodule, plus de fundering eronder (database, authenticatie, opslag en deploy). Een script hangt de kit aan een bestaande site zonder de goedgekeurde vormgeving te veranderen. Het projectspecifieke werk wordt in vaste stappen uitgevoerd via een plan dat ook een AI-assistent kan volgen.
De uitdaging
Een vereniging draait op vrijwilligers. De website moet dus zonder developer te onderhouden zijn, betrouwbaar blijven draaien en aansluiten op de ledenadministratie.
Zelf beheren
Initiatieven, nieuws, bestuur, teksten en afbeeldingen moeten door de vereniging zelf aan te passen zijn, op elke pagina.
Aanmeldingen zonder overtypen
Nieuwe leden, donaties en sponsors moeten direct in de ledenadministratie terechtkomen, niet in een mailbox.
Vormgeving blijft heel
Het CMS kwam na de goedkeuring van het ontwerp. Beheerbaar maken mocht de goedgekeurde site niet veranderen.
Betrouwbaar en veilig
Geen handmatige serveracties bij een update, geen dataverlies bij een mislukte migratie en altijd een recente back-up.
De oplossing
Een maatwerk website met koppelingen naar Memberix, beheerbaar gemaakt met mijn eigen CMS-kit.
Page builder met eigen blocks
Elke pagina is opgebouwd uit blocks (hero, missie, initiatievenoverzicht, bestuur, partnerpakketten, formulieren) die in de page builder te verplaatsen en te bewerken zijn, met een live voorbeeld.
Records en mediabibliotheek
Initiatieven, nieuwsberichten en bestuursleden zijn records met een eigen beheerscherm; initiatieven krijgen automatisch een eigen, server-side gerenderde pagina. De mediabibliotheek houdt bij waar elke afbeelding gebruikt wordt, uploads staan in Cloudflare R2 en worden via een CDN geserveerd.
Koppelingen met Memberix en Mollie
Aanmeldingen voor lidmaatschap en sponsoring gaan via server-routes direct naar Memberix, de sponsorpakketten worden uit Memberix opgehaald en een donatie leidt naar een Mollie-checkout. Het contactformulier verstuurt via Resend.
Deploy en back-ups
GitHub Actions bouwt een Docker-image, de server start hem, test hem na het starten en zet bij een fout automatisch de vorige versie terug. Databasemigraties draaien bij het opstarten met een back-up vooraf, en elke nacht gaat er een back-up van de database naar R2.
Techniek
- Frontend: Nuxt met Tailwind CSS v4
- CMS: eigen Nuxt CMS-kit met SQLite, Drizzle ORM en sessie-authenticatie voor de beheeromgeving
- Opslag: Cloudflare R2 met CDN voor afbeeldingen en back-ups
- Koppelingen: Memberix-API (leden, sponsors, donaties), Mollie, Resend
- Hosting: Docker-container op een VPS, uitgerold via GitHub Actions met automatische rollback
Resultaat
- Een website waarvan de vereniging alle pagina's, initiatieven en nieuws zelf beheert
- Lid worden, doneren en sponsoring komen direct in Memberix terecht
- Uitrollen zonder handwerk op de server, met automatische rollback en dagelijkse back-ups
- Een CMS-kit die ik in volgende Nuxt-projecten opnieuw inzet
Eerst de website goedkeuren, daarna het CMS eraan hangen: zo gaat de discussie eerst over inhoud en vormgeving, en hoeft het beheer daarna niets meer aan het ontwerp te veranderen.
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