Van idee naar complete barbershop booking app: JF Cuts

Een van mijn projecten waar ik veel van heb geleerd is JF Cuts, een complete webapplicatie voor het boeken en beheren van afspraken bij een barbershop.

Het doel was niet om alleen een simpele afsprakenkalender te maken. Ik wilde een systeem bouwen waarin zowel de klant als de barber een eigen omgeving heeft en waarbij de belangrijkste bedrijfsprocessen van een barbershop digitaal geregeld kunnen worden.

Het idee

Bij veel kleine bedrijven worden afspraken nog steeds via WhatsApp, Instagram of telefonisch geregeld. Dat kan snel onoverzichtelijk worden wanneer meerdere afspraken tegelijk binnenkomen.

Met JF Cuts wilde ik daarom een oplossing maken waarbij een klant zelfstandig een afspraak kan plannen. De klant doorloopt een eenvoudige flow:

Behandeling → Datum → Tijd → Bevestigen

Na het inloggen krijgt de klant een dashboard waarop onder andere de eerstvolgende afspraak en eerdere bezoeken zichtbaar zijn.

De barber krijgt daarentegen een eigen dashboard voor het beheren van afspraken, klanten, behandelingen en beschikbaarheid.

De booking engine

Een van de interessantste onderdelen van het project was het ontwikkelen van de afspraaklogica. Een tijdstip mag bijvoorbeeld niet zomaar beschikbaar zijn omdat het op het scherm beschikbaar lijkt. De backend moet controleren of het tijdstip daadwerkelijk geboekt kan worden.

Daarbij wordt onder andere gecontroleerd op:

• Openingstijden
• Uitzonderingsdagen
• Duur van de behandeling
• Bestaande afspraken
• Dubbele boekingen
• Maximale boekingsperiode
• Annuleringstermijn
• Verplaatsingstermijn

Stel dat een barber geopend is van 10:00 tot 18:00 en een knipbeurt 30 minuten duurt. Dan kan de laatste afspraak om 17:30 beginnen. Voor een behandeling van 60 minuten is 17:30 uiteraard niet meer mogelijk. Deze controles worden server-side uitgevoerd. Daardoor kan een gebruiker niet simpelweg via een aangepaste request een tijdstip boeken dat eigenlijk al bezet is.

Beschikbaarheid

De barber kan een normale weekplanning instellen, bijvoorbeeld met verschillende openingstijden per dag. Daarnaast ondersteunt het systeem uitzonderingen. Hierdoor kan een specifieke vrijdag bijvoorbeeld andere openingstijden hebben of volledig gesloten zijn.

De logica werkt als volgt:

Controleer of er een uitzondering voor de gekozen datum bestaat. Zo ja, gebruik die beschikbaarheid. Zo niet, gebruik de normale weekplanning. Genereer tijdsloten op basis van het ingestelde interval. Controleer of de gekozen behandeling binnen de beschikbare uren past. Verwijder tijdsloten die overlappen met bestaande afspraken. Toon alleen de daadwerkelijk beschikbare tijden. Hierdoor ziet een klant alleen tijdstippen waarop de afspraak daadwerkelijk kan plaatsvinden.

Verschillende rollen

JF Cuts heeft twee gebruikersrollen: customer en barber.

Een klant kan alleen zijn eigen afspraken bekijken en aanpassen. Een barber heeft uitgebreidere rechten en kan afspraken voor bestaande klanten beheren.

Dit heeft mij geholpen om beter na te denken over autorisatie. Het is namelijk niet voldoende om bepaalde knoppen in de interface te verbergen. De backend moet iedere actie opnieuw controleren. Een klant mag nooit via een gemanipuleerde request een afspraak van een andere klant kunnen aanpassen.

Omzet bijhouden Naast afspraken beheren wilde ik ook een klein gedeelte van de bedrijfsadministratie meenemen. Wanneer een afspraak is afgerond, kan de barber het daadwerkelijk ontvangen bedrag invoeren. Dit is bewust niet altijd hetzelfde als de standaardprijs van de behandeling. Als een behandeling normaal €20 kost, maar er uiteindelijk €18 wordt betaald, wordt €18 geregistreerd als ontvangen bedrag. De omzet kan vervolgens bekeken worden per:

Week Maand Jaar Alleen daadwerkelijk afgeronde afspraken tellen hierbij mee.

Database en toekomst

Bij het ontwerpen van de database heb ik geprobeerd niet alleen naar de eerste versie van het project te kijken. JF Cuts is in eerste instantie bedoeld voor één barbershop, maar de database is voorbereid op een toekomstige uitbreiding naar meerdere shops. Daarom zijn shop-gerelateerde gegevens gekoppeld aan een barbershop_id. In de toekomst zou hetzelfde systeem daardoor meerdere shops kunnen ondersteunen:

JF Cuts → Fresh Cuts → Barber Studio

zonder dat de complete applicatie opnieuw gebouwd hoeft te worden.

Technologie

Voor dit project heb ik voornamelijk gewerkt met: Laravel · PHP · MySQL · Blade · Livewire · Tailwind CSS · Git

Ik heb ervoor gekozen om geen aparte frontend met bijvoorbeeld React of Vue te gebruiken. Voor dit type applicatie biedt Laravel in combinatie met Blade en Livewire genoeg mogelijkheden om interactieve dashboards en formulieren te bouwen, terwijl de architectuur relatief overzichtelijk blijft.

Wat ik heb geleerd

JF Cuts heeft mij vooral geleerd om verder te denken dan alleen de interface. Bij een booking systeem lijkt het op het eerste gezicht eenvoudig om een formulier met een datum en tijd te maken. In werkelijkheid zitten daar veel regels achter. Ik heb hierdoor meer ervaring opgedaan met:

• Database-relaties
• Laravel services
• Autorisatie en policies
• Server-side validatie
• Livewire-componenten
• Beschikbaarheidslogica
• Race conditions en dubbele boekingen
• Statusbeheer
• Omzetberekeningen
• Responsive en mobile-first interfaces
• Geautomatiseerde test

Vooral het scheiden van de businesslogica van de controllers was voor mij belangrijk. De complexe afspraaklogica hoort niet allemaal in één controller terecht te komen. Daarom heb ik hiervoor aparte services gebruikt.

Van project naar platform JF Cuts begon als een idee voor een simpele barbershop website, maar groeide uit tot een veel completer systeem. Het uiteindelijke doel was niet alleen een mooie interface maken, maar een applicatie bouwen die ook achter de schermen betrouwbaar werkt.

Dat is voor mij een van de belangrijkste lessen uit dit project: een goede webapplicatie gaat niet alleen over hoe iets eruitziet, maar vooral over hoe betrouwbaar de onderliggende logica is.

JF Cuts vormt daarmee een basis waarop ik in de toekomst verder kan bouwen richting een volledig platform voor meerdere barbershops.