Courses
//

Studio Hyra University

Lovable & Base44

Echte tools die data bewaren, logica afhandelen en werken zonder code.

8 lessen · ~35 min · Beginnend niveau

Les 01

Apps, geen pagina's

Pagina's tonen informatie. Apps doen iets. Lovable en Base44 bouwen apps. Dat is het verschil, en waarom het ertoe doet.

Een pagina is een brochure. Een app is een gereedschap. Gebruikers lezen niet alleen, ze doen iets. Formulieren, gepersonaliseerde resultaten, opgeslagen data. Wanneer je Lovable gebruikt. interactieve functies, meerdere pagina's, logica die reageert op input. Direct live, ziet er verzorgd uit. Wanneer je Base44 gebruikt. als het tool dingen moet onthouden. Formulierinzendingen die worden opgeslagen. Gebruikersdata die blijft staan. Contacten, voorraad, feedback. Samen. Lovable voor de interface, Base44 voor de data. Of begin met één en voeg de ander toe wanneer dat nodig is.

Maak dit

Denk aan een tool die je team gebruikt maar eigenlijk gewoon een spreadsheet is met een jasje eromheen. Dat is je eerste kandidaat om te bouwen.

Les 02

Je eerste Lovable app

Bouw een werkend tool in Lovable in 30 minuten. Geen landingspagina. Een tool met echte functionaliteit.

Bouw een client intake form. Geef Lovable de volgende opdracht: "Maak een intake form met velden voor bedrijfsnaam, projectomschrijving, budget en tijdlijn. Laat na het invullen een gestructureerde projectbriefing zien."

Van daaruit ga je verfijnen. Voeg conditionele velden toe ("Als het budget onder de 5k ligt, toon een starter package bericht"), verbeter het design en verwerk je huisstijl.

Dan deploy je het en deel je de URL. Je klanten vullen het in, jij krijgt een nette briefing in plaats van een rommelige e-mail.

Van idee naar live tool. een halfuur werk.

Maak dit

Open Lovable. Beschrijf een intake-formulier voor jouw bedrijf. Bouw het. Zet het live. Stuur de URL naar de volgende persoon die contact opneemt.

Les 03

Je eerste Base44-tool

Bouw een tool met een echte database. Data blijft bewaard. Meerdere mensen kunnen er tegelijk mee werken. Dat is precies waar de meeste no-code tools tekortschieten.

Bouw een lead tracker. Een formulier om leads toe te voegen (naam, bedrijf, status, notities). Een dashboard met alle leads, filterbaar op status. Klikken om te bewerken. Het moment dat het klikt. voeg een lead toe, sluit de browser, kom terug. Hij staat er nog. Dat is het verschil tussen een demo en een echt werkend product. De termen in Base44 sluiten aan op spreadsheets. Tabellen zijn als sheets. Velden zijn als kolommen. Views zijn als gefilterde weergaves. Wie Excel kent, kan met Base44 uit de voeten. Stap voor stap. maak de tabel, bouw het formulier, bouw de view, verbind ze. Binnen 30 minuten staat er iets dat werkt.

Maak dit

Bouw de lead tracker. Voeg vijf echte contacten toe. Sluit de browser. Kom terug. Ze staan er nog. Voeg nu een collega toe als gebruiker. Je hebt net een gedeeld CRM gebouwd.

Les 04

Lovable. meerdere schermen bouwen in één app

Lovable bouwt apps met meerdere pagina's, navigatie en gedeelde state. Dat is echte appstructuur.

Bouw een project dashboard met drie pagina's. Een overzicht met actieve projecten en statusmarkeringen. Een detailpagina per project met tijdlijn, taken en notities. Een instellingenpagina voor categorieën. Navigatie tussen pagina's. Gedeelde data. Het voelt als een echte applicatie, geen losstaand tooltje. Lovable genereert onder de motorkap React-code. Routing, state management, responsive design: dat regelt het zelf. Jij beschrijft wat je wilt. De rest lost het op. De les. je zit niet vast aan tools met één pagina. Apps met echte navigatie en meerdere views zijn gewoon haalbaar.

Maak dit

Bouw verder op wat je al hebt. Voeg een tweede pagina toe, zet er navigatie tussen. Kijk hoe Lovable omgaat met een structuur van meerdere pagina's.

Les 05

Base44 van binnen. data koppelen

Contacten hebben projecten. Projecten hebben taken. Taken hebben statussen. Verbonden data, geen databasejargon.

Bouw een eenvoudige CRM met drie gekoppelde tabellen. Contacten (naam, bedrijf, e-mail). Projecten (titel, contact, status, waarde). Activiteiten (datum, project, notitie, volgende stap). Het slimme eraan. klik op een contact en je ziet meteen hun projecten. Klik op een project en de bijbehorende activiteiten verschijnen. Alles in samenhang. Relationele data in gewone taal. "Een contact heeft meerdere projecten. Een project heeft meerdere activiteiten. Base44 houdt die verbanden bij." Geen databasejargon. Geen SQL. Gewoon: "dit hoort bij dat." Dit is wat Excel niet netjes kan. Data die verbonden en overzichtelijk blijft, ook als het groeit.

Maak dit

Bouw een CRM met drie tabellen. Voeg echte data toe. Klik wat rond tussen gekoppelde records. Vanaf dat punt voelt het als echt werk.

Les 06

Er goed uit laten zien

Standaard output ziet er functioneel uit. Met deze technieken ziet het er meteen professioneel uit, ook zonder designervaring.

Voor Lovable. geef een stijlreferentie mee. "Laat dit eruitzien als [bekende site]" of "Dark theme, oranje accenten, strakke sans-serif, veel witruimte." Zeg dat het shadcn/ui-componenten moet gebruiken voor een moderne, verzorgde UI. Upload een screenshot van een design dat je aanspreekt. Lovable is goed in het matchen van visuele referenties. Voor Base44. denk aan overzichtelijke dataweergaven, leesbare tabellen en duidelijke formulieren. Base44-tools zien er functioneel uit, niet sfeervol. Voor interne tools is dat prima. Wil je het mooi? Bouw in Lovable. Gaat het om data? Gebruik Base44. Wil je allebei? Combineer ze.

Maak dit

Pak een Lovable-app die je hebt gebouwd. Voeg dit toe aan je prompt: 'Use shadcn/ui components. Dark theme. Clean and modern.' Genereer opnieuw. Vergelijk voor en na.

Les 07

Lovable koppelen aan data

Lovable kan worden gekoppeld aan Supabase voor een echte database. Strak frontend, professionele backend.

Lovable + Supabase. je bouwt de frontend in Lovable, je data staat in Supabase. Twee tools, elk op hun sterkst. Maak een gratis Supabase-project aan. Zet een tabel op. Vertel Lovable: "Deze app moet data lezen en wegschrijven naar mijn Supabase-database." Dit geeft je meer dan de ingebouwde data van Base44. Je werkt met een volwaardige database, met toegangscontrole en ruimte om later te groeien. Het is ook de eerste stap richting Assisted Coding. Een eerlijke kanttekening. deze les zit op het randje van no-code. Voelt het te veel, dan is de ingebouwde data van Base44 een prima keuze. Echt.

Maak dit

Maak een gratis Supabase-project aan. Maak één tabel. Probeer het te koppelen aan een Lovable-app. Lukt het: dan zit je al op intermediate niveau. Lukt het niet: geen probleem, gebruik Base44.

Les 08

Wanneer je wat kiest, en wanneer je het laat

Lovable, Base44 of toch code schrijven. Wanneer kies je welke aanpak.

Lovable is de juiste keuze als het er goed uit moet zien, meerdere pagina's heeft, aangepaste interacties nodig zijn of als klanten het te zien krijgen.

Base44 past beter als je data wilt opslaan, met relationele data werkt, een intern tool bouwt of als tempo zwaarder weegt dan uitstraling.

Gebruik beide als je een nette frontend wilt combineren met echte dataopslag.

Tijd om code erbij te pakken als je meer dan 20 dagelijkse gebruikers hebt, gebruikersrollen nodig hebt, het 24/7 moet draaien of de logica te ingewikkeld wordt voor gewone taal.

Lovable genereert React-code. Exporteer die naar VS Code en ga verder met Claude Code. Je prototype zonder code wordt zo de vertrekpunt voor een echte productie-app.

Maak dit

Wees eerlijk. is wat je hebt gebouwd goed genoeg? Zo ja, blijf het gebruiken en verbeteren. Zit je vast, kijk dan waar precies. Dat vertelt je wat de volgende stap is.

Je hebt echte tools gebouwd.

Apps met data, logica en echte gebruikers. Wil je snappen hoe de code daarachter werkt? VS Code voor AI is waar je naartoe gaat.

VS Code voor AIVS Code voor AILaten we pratenLaten we praten