Proces Visualisatie
Swimminglane overzicht van alle belangrijke processen in de applicatie
Legenda - Zwembanen
Bestelling Plaatsen
Vult bestelformulier in
Valideert invoer & verzamelt data
base44.entities.Order.create()
Controleert authenticatie
Slaat order op in database
Retourneert order ID
Toont bevestiging aan gebruiker
Betaling Verwerken (Stripe)
Klikt op 'Betalen'
Roept createCheckoutSession aan
base44.functions.invoke('createCheckoutSession')
Backend functie wordt uitgevoerd
Stripe checkout sessie wordt aangemaakt
Retourneert checkout URL
Redirect naar Stripe
Gebruiker betaalt op Stripe
Stripe webhook naar stripeWebhook functie
Update order status naar 'paid'
Liedjes Afspelen
Opent home pagina
Laadt SampleSongsSection component
base44.entities.SampleSong.list()
Haalt liedjes op uit database
Retourneert lijst met liedjes
Toont liedjes in carousel
Klikt op play button
Speelt audio af via HTML5 audio element
Admin: Order Beheer
Admin opent Admin pagina
base44.auth.me() controleert admin role
Valideert admin rechten
base44.entities.Order.list()
Haalt alle orders op
Toont orders in tabel
Upload MP3 bestand
Roept UploadFile integration aan
base44.integrations.Core.UploadFile()
Slaat bestand op in storage
Update order met file_url
Email Verzenden
Admin klikt 'Verstuur Leveringsemail'
Roept sendDeliveryEmail functie aan
base44.functions.invoke('sendDeliveryEmail')
Backend functie wordt uitgevoerd
Haalt email template op
Stuurt email via Brevo API
Update delivery_email_sent_date
Retourneert success
Toont success notificatie
Technische Architectuur
Frontend Stack:
- React 18 met TypeScript
- Tailwind CSS voor styling
- React Query voor data fetching & caching
- React Router voor navigatie
- Shadcn/ui voor UI componenten
Backend (Base44 Platform):
- Deno Deploy voor serverless functies
- PostgreSQL database (via Supabase)
- Built-in authenticatie & autorisatie
- Automatische API generatie voor entiteiten
- Real-time subscriptions via WebSockets
Externe Integraties:
- Stripe voor betalingen
- Brevo (SMTP) voor email verzending
- OpenAI voor AI-tekstgeneratie (lyrics)
- Cloud Storage voor bestanden (audio, PDF)