HomePortfolioBBQHeros

BBQHeros

BBQHeros is een sociale webapp voor BBQ-liefhebbers: recepten loggen met foto's, ingrediënten en stappen, BBQ-momenten delen, YouTube-tutorials bewaren, militaire rangen verdienen en een persoonlijk kookboek bijhouden — gebouwd als installeerbare Progressive Web App.

Klant
BBQheros
Type

SaaS-platform, Website

Opgeleverd
2026
bbqheros.nl
BBQHeros feed met recepten en BBQ-momenten op desktop
01Intro

Wie is BBQheros?

BBQHeros is een compleet sociaal platform waar BBQ-enthousiastelingen hun recepten, sessies en kennis vastleggen en delen. Gebruikers loggen recepten met foto, ingrediënten, bereidingsstappen, kooktijd, aantal personen en een persoonlijke sterrenwaardering. Daarnaast kunnen ze lichte BBQ-momenten posten (foto + tekst, zonder heel recept), YouTube-video’s delen als tutorials, en een persoonlijk logboek bijhouden voor losse aantekeningen zoals kerntemperaturen.

Het platform heeft een volgsysteem (“Collega chefs”) waarmee je de recepten en momenten van anderen in je feed ziet, een like-systeem, en de mogelijkheid om recepten van anderen op te slaan in je eigen kookboek (fork). Een gamificatie-laag met militaire BBQ-rangen (van Recruit tot BBQ General) en punten voor elk gelogd recept en moment houdt gebruikers gemotiveerd.

Een admin dashboard voor @designpixels.nl accounts biedt gebruikersbeheer: archiveren, herstellen, verwijderen en wachtwoorden resetten. Gebruikers kunnen zelf hun wachtwoord wijzigen en hun account verwijderen met bevestiging.

02De opdracht

Wat hield de opdracht in?

De opdracht: bouw een besloten, sociale kookboek-app specifiek voor BBQ-liefhebbers. Het moest meer zijn dan alleen recepten opslaan — het moest een community-gevoel creëren met een stoere, donkere uitstraling die past bij de BBQ-cultuur. Gebruikers moesten recepten kunnen loggen met alle details, maar ook snel een BBQ-moment kunnen delen zonder verplichte ingrediëntenlijst. Een puntensysteem met rangen moest het loggen belonen en een speels competitie-element toevoegen.

Technisch moest het als een app op de telefoon te installeren zijn (PWA), snel laden, en werken met een gratis hosting-opzet via GitHub Pages. De backend moest schaalbaar zijn met row-level security zodat privérecepten echt privé blijven. Recepten moesten printbaar en mailbaar zijn voor offline gebruik.

03Het resultaat

Hoe is het resultaat geworden?

Het resultaat is een volwaardig sociaal platform dat aanvoelt als een native app: installeerbaar op telefoon en desktop, met offline caching, een donker thema met vlamaccenten en dikke typografie die de BBQ-sfeer ademt. De landingspagina trekt bezoekers met GSAP-animaties en een duidelijke feature-presentatie.

Onder de motorkap draait het op React 19, Vite, TypeScript en Tailwind CSS v4, met Supabase als backend voor authenticatie, database met row-level security, bestandsopslag en edge functions. E-mail (wachtwoordherstel, receptkaarten versturen) loopt via emailit.com. De app wordt gehost op GitHub Pages met automatische deploys via GitHub Actions — volledig gratis in gebruik.

Het platform biedt recepten met foto’s, ingrediënten, stappen en sterren, BBQ-momenten, YouTube-tutorials, een persoonlijk logboek, een volgsysteem, likes, een fork-functie, doorzoekbaar kookboek met sorteeropties, printbare recepten, en een compleet admin dashboard.

Sociale recepten-app

Progressive Web App

Rang- & puntensysteem

Andere chefs volgen

Recepten mailen en printen

BBQ-momenten loggen

04Eindresultaat

Een blik op de gelanceerde website.

Drie momenten uit het eindresultaat — van homepage tot mobiele weergave.

BBQHeros homepage met hero-sectie, functies en rangensysteem
Homepage
BBQHeros feed met recepten en BBQ-momenten op desktop
Desktop
BBQHeros receptenoverzicht op mobiel
Mobiele weergave
Klaar voor jouw project?

Laten we samen jouw website naar een hoger niveau tillen.

Start jouw project