Het bouwen van een op maat gemaakte webapp met Supabase en Cloudflare

Hallo, ik ben Otsuka en ik ben CTO bij Liberogic.

Cyberaanvallen op bedrijfswebsites en -systemen nemen toe, en eergisteren kwam ook een ernstige kwetsbaarheid in PHP in het nieuws.

De webapplicatieontwikkeling waar ik het vandaag over heb, is een opzet die de last van dergelijke beveiligingsmaatregelen en beheer zoveel mogelijk verlicht. Beveiliging wil ik echter graag in een andere keer behandelen.

Voor het bouwen van op maat gemaakte webapplicaties die aansluiten op de bedrijfsprocessen, zoals aanvraag- en goedkeuringsprocessen, ledenportalen, klantportalen en urenregistratie, gebruiken we vaak de combinatie van Supabase en Cloudflare.

Vroeger moest je op AWS afzonderlijke onderdelen zoals EC2, RDS, S3 en Cognito zelf opbouwen, of een Linux-server opzetten en daarop zelf de webserver, middleware en frameworks installeren. Voor de database, authenticatie, API en bestandsopslag kostte dat telkens veel bouw- en beheerwerk.
Met Supabase en Cloudflare kun je die basis grotendeels aan de diensten overlaten, zodat je je kunt concentreren op de functies die de applicatie echt nodig heeft.

In dit artikel geven we een kort overzicht van de soorten op maat gemaakte webapps die je kunt bouwen met een combinatie van Supabase en Cloudflare.

Wat is een op maat gemaakte webapp?

Met een 'op maat gemaakte webapp' bedoelen we een webapplicatie die is ontwikkeld voor de specifieke organisatie en werkprocessen.
Denk bijvoorbeeld aan het volgende.

• Intern aanvraag- en goedkeuringssysteem
• Ledenportaal
• Portaal voor zakenpartners
• Urenregistratie en personeelsbeheer
• Projectbeheer
• Beheer van contactaanvragen
• Beheersysteem voor winkels en vestigingen
• Systeem voor bestandsdeling en goedkeuring
• Beheer van enquêtes en assessmentresultaten
• Beheerschermen voor diverse bedrijfsprocessen

Wanneer we zo'n aanvraag ontvangen, kijken we eerst of het gewenste resultaat met een bestaande SaaS-oplossing of standaardpakket kan worden bereikt. Voor veel reguliere bedrijfsprocessen is dat sneller en goedkoper te implementeren.

Wanneer we de eisen echter op een rijtje zetten, blijkt het vaak lastig om een product te vinden dat precies aansluit bij wat men voor ogen heeft.
Denk aan een eigen goedkeuringsproces binnen het bedrijf, afdelings- of vestigingsspecifieke weergave van informatie, of de noodzaak om aan te sluiten op bestaande systemen.

Als dat zo is, is het in veel gevallen een betere oplossing om een op maat gemaakte webapplicatie te bouwen die aansluit op de bedrijfsprocessen, in plaats van steeds met een SaaS-product te werken en de gaten met handmatig beheer op te vangen. Die afweging maken we in de praktijk vaak, omdat de werkzaamheden van de klant daardoor soepeler verlopen.

Supabase biedt een complete datalaag voor webapplicaties

Supabase is een dienst waarmee je de backendfunctionaliteit die een webapplicatie nodig heeft, op één plek kunt gebruiken.

Wereldwijd groeit de dienst snel, en er maken meer dan 10 miljoen ontwikkelaars gebruik van. Y Combinator, de bekende Amerikaanse startupversneller, heeft bekendgemaakt dat 55% van de startups in de meest recente lichting Supabase heeft gekozen. Het is daarmee een gangbare keuze geworden voor de backend van nieuwe diensten.

Deze resultaten komen voornamelijk van diensten met veel consumentgebruikers. Wij gebruiken dit systeem echter ook voor interne en zakelijke webapplicaties, zoals applicaties voor intern gebruik of voor gebruik met externe partners, en we zien geen reden waarom het daar niet net zo goed zou werken.

De belangrijkste functies zijn:

• Database (beheerde PostgreSQL-database)
• Auth (gebruikersauthenticatie en inloggen)
• Automatisch gegenereerde API (zodra je tabellen definieert, is een REST API direct beschikbaar)
• RLS (Row Level Security: toegangsbeheer per rij)
• Storage (bestandsopslag)
• Realtime (realtimecommunicatie)
• Edge Functions (serverloze API-verwerking)

enzovoort.

Voor zakelijke applicaties kunt u gebruikersgegevens, projectgegevens, aanvraaggegevens en activiteitenlogs beheren in de Supabase-database.

Met Supabase Auth kunt u daarnaast direct een inlogfunctie toevoegen. Deze Auth past goed bij zakelijke applicaties omdat hij inloggen met een Microsoft- of Google-account ondersteunt.

Als uw bedrijf al Microsoft 365 of Google Workspace gebruikt, kunnen medewerkers met het account waarmee ze al werken direct inloggen. Er hoeven geen aparte ID's en wachtwoorden voor de applicatie te worden aangemaakt en uitgegeven, en het beheer van accounts bij in- en uitdiensttreding kan aansluiten op de bestaande systemen.

Vroeger was het niet ongebruikelijk om database en authenticatie apart op te zetten en met elkaar te verbinden. Met Supabase kunt u gegevens en authenticatie echter samenbrengen in één platform.

Met Row Level Security (RLS) kunt u ervoor zorgen dat

• gebruikers alleen hun eigen gegevens zien
• Toon alleen de gegevens van dezelfde vestiging
• Beheerders kunnen alles inzien

Dergelijke regels kunnen ook aan de databasekant worden ingesteld.

Bij bedrijfsapplicaties is deze rechtenbeheer erg belangrijk.

Frontend levering via Cloudflare

Supabase alleen kan echter niet alles. Eén onderdeel ontbreekt: "hosting van de website (frontend)".
Ook al kunnen de database en API's bij Supabase worden ondergebracht, het scherm dat gebruikers in hun browser zien, moet vanaf een andere locatie worden geleverd.

De bekendste leveranciers hiervoor zijn Vercel en Cloudflare. Wij kiezen voor Cloudflare, om verschillende redenen.

• DNS, CDN en WAF tot en met de levering van de applicatie centraal beheren binnen Cloudflare
• Met Cloudflare Workers kan niet alleen de frontend worden geleverd, maar ook API-verwerking en koppelingen met externe diensten worden ondergebracht
• Cloudflare biedt aanvullende diensten die goed aansluiten bij bedrijfsapplicaties, zoals R2 (opslag) en Access (toegangsbeperking)
• Het prijsmodel op basis van overdracht is eenvoudig, waardoor het budget overzichtelijk blijft

Misschien denkt u bij Cloudflare vooral aan CDN en DNS, maar inmiddels is het ook een dienst die goed bruikbaar is als uitvoeringsplatform voor webapplicaties.

Cloudflare bekeken vanuit het perspectief van een webbureau

In deze opzet neemt Cloudflare dus de verwerking van gebruikersverzoeken voor zijn rekening, tot het leveren van de schermen en API's, terwijl Supabase de data, authenticatie en autorisatie op de achtergrond beheert.

Supabase en Cloudflare combineren

Een voorbeeld van zo'n opzet:

Een applicatie op Cloudflare Workers ontvangt verzoeken van gebruikers en levert de schermen en API's, terwijl Supabase op de achtergrond de data en authenticatie verzorgt.

Waar nodig worden e-mails verstuurd via SendGrid, bestanden opgeslagen in externe opslag zoals Box, of API-koppelingen gelegd met andere bedrijfssystemen.

Het voordeel van deze opzet is dat alles is opgebouwd uit gangbare technologieën en dat u vrij bent in de keuze van koppelingen.
Zolang een systeem API-koppelingen ondersteunt, kan het worden aangesloten, of het nu een bestaand kernsysteem is of een SaaS-dienst die u al gebruikt. Zo'n beperking als bij veel bedrijfspakketten, waarbij een product maar met één specifiek systeem kan samenwerken, speelt hier niet.

Voorbeelden van bedrijfsapplicaties die u hiermee kunt bouwen

Interne aanvraag- en goedkeuringsapp

Een app waarin vestigingen en medewerkers aanvragen registreren en leidinggevenden of beheerders deze goedkeuren.
Afhankelijk van de ingelogde gebruiker kan

• alleen de eigen aanvragen worden getoond
• de aanvragen binnen de vestiging worden getoond
• beheerders alle aanvragen inzien

Ook dit soort controle is mogelijk. Het is een beetle alsof je de werkwijze die u nu via
e-mail en Excel doet, één-op-één omzet naar een webapplicatie.

Portaal voor zakelijke partners

Per zakelijke partner wordt een inlogaccount aangemaakt, met

• inzage in documenten
• bestanden uploaden
• Voortgangscontrole
• Contact
• Contractgegevens controleren

Ook een portaal voor bijvoorbeeld deze taken kunnen we bouwen.
Het is ook relatief eenvoudig om per zakelijke relatie te bepalen welke informatie zichtbaar is.

Urenregistratie en personeelsbeheer

Een webapplicatie waarin medewerkers per persoon werktijden en uren invoeren, en die deze per project en per medewerker laat optellen.
Voor bedrijven met eigen regels of een specifieke manier van optellen past een op maat gemaakte webapplicatie vaak beter dan een standaard tijdregistratie-SaaS.

Bij dit soort werkprocessen werkt een kant-en-klaar product soms juist belemmerend.

Beheersysteem voor vestigingen

Ook geschikt voor een webapplicatie waarin winkels en kantoren door het hele land gegevens invoeren en het hoofdkantoor alles centraal beheert.

Van interne tools voor een paar gebruikers tot bedrijfsapplicaties voor meerdere vestigingen.
Het is niet zo dat Supabase alleen geschikt is voor kleine projecten.
Met een goed ontwerp kan het voor een breed scala aan toepassingen worden ingezet.

Bij Liberogic helpen we bijvoorbeeld met applicaties zoals deze.

UI/UX-ontwerp en systeemontwikkeling voor Toyota Motor Corporation's SNS-beheersysteem "TOYOTA Social Hub"

Criteria for choosing a custom web app over SaaS

We have described the benefits of custom web apps so far, but a custom web app is not always the right answer.
Here, we outline the guidelines we have come to rely on from actual client consultations for deciding when it is worth building one.

• Workarounds have become routine
  Business processes fall outside what SaaS was designed for, such as approval routes that differ by department or many exception cases, and settings alone cannot absorb the gaps
• Access and display controls are too granular
  You want to show different information to different departments, sites, or business partners, but the permission features of SaaS lack the necessary granularity
• Work spans multiple tools
  Moving between Excel, email, and several SaaS products, with copying and pasting becoming part of daily work
• Custom fields and aggregation rules are numerous
  Company-specific data is forced into the generic fields of SaaS
• The software has too many features or lacks the ones needed
  Because the general-purpose SaaS is complex, the screens go unused by field staff, or the features people actually need are missing

If only one or two of these apply, adjusting SaaS settings or operations can often get you through.
However, if several apply and small daily inconveniences keep piling up, we believe it is time to consider a custom web app tailored to your business.

In practice, conversations about custom web apps often start with requests like "We want to move the information we manage in Excel to the web," "We want to digitize the approvals we currently handle by email," or "We want to consolidate work spread across several SaaS products into one system."

Start small and grow it as you use it

Tot nu toe hebben we het over de technische opzet gehad, maar wat ik tot slot wil meegeven, gaat minder over de functies van Supabase of Cloudflare zelf en meer over de manier waarop het project wordt aangepakt.

"Wat moeten we bouwen?" blijkt uit een requirementsdocument verrassend lastig af te leiden

Bij traditionele softwareontwikkeling begint het met requirements. Eerst worden de bestaande werkprocessen in documenten vastgelegd, waarna een systeem wordt ontworpen dat aan die documenten voldoet.

Deze aanpak heeft echter een zwak punt. Op papier kunnen de werkprocessen volledig lijken afgedekt, maar vaak blijven vragen als "Wordt het scherm echt prettig in gebruik?" en "Is deze functie werkelijk nodig?" buiten beeld, terwijl de requirements zich blijven opstapelen.
Vooral voor mensen die verantwoordelijk zijn voor digitale transformatie, maar zelf geen expertise hebben in systeemontwikkeling, is het erg lastig om alleen op basis van tekst en tabellen te beoordelen of de requirements kloppen.

Bij Liberogic gaan we daarom niet eerst een uitgebreid requirementsdocument opstellen. In plaats daarvan maken we met tools als Figma, v0 en Claude Code mockups (prototypes van schermen die daadwerkelijk te bedienen zijn), die we samen met de opdrachtgever uitproberen als basis voor het gesprek.

Anders dan bij een tekstueel requirementsdocument kun je met een werkend scherm echt ervaren hoe het aanvoelt om ermee te werken. Vaak verschuift de aandacht dan van "controleren of het document klopt" naar "hoe verbeteren we het werk?". Mensen denken dan bijvoorbeeld: "Met dit scherm wordt dat deel van ons werk veel eenvoudiger" of "Kunnen we ook die andere handmatige taak automatiseren?"

Bij een op maat gemaakte webapplicatie is het belangrijkste misschien wel het bepalen van wat we moeten bouwen. Dat wordt volgens ons niet zozeer duidelijk uit documentatie, maar juist wanneer je via mockups samen een beeld vormt van de oplossing.

Eerst de basis bouwen en dan live gaan

We werken niet met een watervalmodel waarin alle eisen vooraf worden vastgelegd en het hele systeem in één keer wordt gebouwd. Zodra de richting door de mockups is bepaald, bouwen we eerst de basisfunctionaliteit, zoals inloggen, gegevens invoeren, overzichten weergeven en een beheerscherm, en gaan we daarmee live.

Daarna voegen we, terwijl het systeem in gebruik is en we de ervaringen en reacties uit de praktijk volgen, extra functies toe, zoals goedkeuringsprocessen, e-mailmeldingen, bestandsbeheer en koppelingen met externe API's.
De combinatie van Supabase en Cloudflare past daarbij uitstekend bij deze stapsgewijze aanpak.

Groeien op basis van budget en zakelijke waarde

"Klein beginnen en waar nodig uitbreiden" gaat ook over budget. Bijvoorbeeld:

• Functies stapsgewijs ontwikkelen binnen het budget dat jaarlijks beschikbaar is
• Eerst een kleine lancering, en daarna extra investeren om de app uit te breiden zodra de zakelijke waarde duidelijk wordt

Zo kunt u te werk gaan. U hoeft niet eerst in één keer een grote ontwikkelbudget vrij te maken om een zakelijke app te hebben en die te laten groeien. Wij zijn van mening dat zakelijke apps vaak beter werken wanneer ze worden verbeterd tijdens het gebruik, in plaats van dat alle eisen vooraf volledig worden vastgelegd.

Conclusie

Door Supabase en Cloudflare te combineren, kunt u een eigen webapplicatie bouwen met authenticatie, database, rechtenbeheer, API en bestandslevering, met een relatief compacte opzet. Van kleine interne werkhulpmiddelen tot portals voor zakelijke partners en bedrijfssystemen die op meerdere locaties worden gebruikt: het kan worden uitgebreid naar wat het gebruik vereist.

Het echt belangrijke is echter niet de tools zelf, zoals Supabase of Cloudflare, maar de aanpak.

• Eerst met een mockup een gedeeld beeld krijgen van hoe de app echt gebruikt gaat worden, en zo vaststellen wat er gebouwd moet worden
• Alleen de basis bouwen en snel lanceren
• Groeien tijdens het gebruik, op basis van budget en zakelijke waarde

Die werkwijze was vroeger niet haalbaar. Zowel de kosten voor het implementeren van software als die voor het opzetten van de infrastructuur waren hoog, waardoor alles vooraf volledig vastgelegd moest worden voordat er gestart kon worden.

Tegenwoordig is het dankzij moderne technologiestacks zoals Supabase en Cloudflare, en door ontwikkeling en prototyping met behulp van AI-agents, mogelijk om projecten te realiseren die dichter bij de ideale aanpak liggen: "eerst iets maken dat je kunt uitproberen, en het vervolgens verder ontwikkelen terwijl het in gebruik is." Liberogic is juist sterk in deze werkwijze.

"Dit werkproces dat we nu via Excel en e-mail doen, zou het niet mogelijk zijn om het naar het web te brengen?" "We hebben een SaaS-oplossing geprobeerd, maar die past niet echt bij onze werkwijze." Zo'n vraag mag u gerust stellen. We denken graag met u mee over een opzet die bij uw werkprocessen past. Neem gerust contact met ons op.