MediAgenda — Complete Medical Booking SaaS (Next.js 14 + Stripe + Prisma)

Waarom MediAgenda?

MediAgenda is geen UI-kit en geen sjabloon: het is een werkende medische boekings-SaaS. Elk scherm hieronder is ondersteund door een echte PostgreSQL-schema (65+ Prisma-modellen), Server Actions, rolgebaseerde authenticatie en rijke seed-gegevens, zodat je een doktersboekingsmarktplaats, een klinieksysteem of een niche telehealth-product in dagen in plaats van maanden kunt lanceren.

Het dekt de hele cyclus: de patiënt vindt een dokter, boekt, betaalt, krijgt zorg en laat een beoordeling achter, terwijl de beheerder alles runt vanuit een white-label paneel zonder code aan te raken. De animaties en de video tonen de echte app die draait met demo-gegevens: geen mockups.

• 4 complete portalen: Patiënt, Dokter, Beheerder en Ondersteuningsagent
• Open marktplaats met zoekfunctie, rijke profielen en directe boekingen (gasten kunnen boeken zonder een account)
• Volledige afspraakcyclus: in afwachting, bevestigd, voltooid, geannuleerd, no-show
• Twee inkomstenbronnen met Stripe: doktersabonnementen en per-consult vergoedingen (Stripe Connect)
• Echt-tijd messaging tussen dokter en patiënt met Pusher, met een metrics-paneel in de admin
• Elektronische medische dossiers met een stapsgewijze wizard
• Beoordelingen met beoordelingen, tags, antwoorden van dokters en moderatie
• Ingebouwde ondersteuningsticket-suite met SLA-metrics en agentplanning
• Runtime EN/ES taalswitch: 11.000+ vertaalde strings
• Google Maps voor klinieklocaties, Excel-export van catalogi, gebruikers en afspraken
• Realistische demo-gegevens: 26 dokters, 35 patiënten, 750+ afspraken

01. Zie het werken: een patiënt boekt in real-time

De boekingswidget begeleidt de patiënt door het type bezoek, het kantooradres, de dienst, de verzekeraar en een live beschikbaarheidsrooster dat is berekend op basis van de wekelijkse agenda van de dokter, pauzes, vakanties en bestaande afspraken. Gasten kunnen boeken met alleen een naam en e-mailadres; slotreserveringen voorkomen dubbele boekingen, en wanneer je het inschakelt, betalen patiënten de consultatie online op het moment van boeken.

Enkele seconden later wacht de afspraak in het dokterspaneel, met de contactgegevens van de patiënt, modaliteit, status en een directe link naar hun medisch dossier.

02. Een landingspagina die voor jou verkoopt

Een moderne, conversiegerichte marketingwebsite met geanimeerde heldenstatistieken, een live productmock, storytelling over pijnpunten, functiepresentaties, concurrentievergelijkingen, getuigenissen en prijzen: alles wat een medische SaaS nodig heeft om bezoekers van dokters om te zetten in abonnees. Logo, teksten, kleuren en SEO-metadata worden bewerkt vanuit het adminpaneel.

03. Doktersmarktplaats met slimme zoekfunctie

Patiënten vinden de juiste specialist met gecombineerde filters: vrije-tekst zoekopdracht, 100+ medische specialismen, stad en consultatiemodaliteit (persoonlijk of virtueel). Elke resultaatkaart toont de foto van de dokter, live beoordelingsscore, ziekenhuis, modaliteit chips en consultatievergoeding.

04. Publieke doktersprofielen die vertrouwen opbouwen

Elke dokter krijgt een rijke, SEO-vriendelijke openbare pagina: fotogalerij en YouTube-video's, geverifieerde badge, sterbeoordeling, biografie, onderwijs- en ervaringslijn, diensten met prijzen, meerdere kantoorlocaties met een ingesloten Google Map, geaccepteerde verzekeraars, downloadbare PDF-certificaten, patiëntenbeoordelingen met antwoorden van dokters, en een persistente boekingswidget. Patiëntinteresse-evenementen (profielweergaven, begonnen boekingen, contactklikken) voeden de analytics van de dokter.

05. Authenticatie en onboarding voor elke rol

Authenticatie met NextAuth, wachtwoordherstel en verfijnde registratieprocessen. De sjabloon wordt geleverd met een-klik demo-inloggegevens voor alle vier de rollen, zodat kopers direct kunnen verkennen. Patiënten melden zich aan via een 2-staps wizard; dokters via een 5-staps wizard met een live profielvoorbeeld dat profiel, specialiteit, kliniekadres (Google Places-autocompleet) en wekelijkse beschikbaarheid verzamelt, en afhankelijk van de factureringsmodus die je configureert, een eenmalige vergoeding in rekening brengt of een Stripe-abonnement start voordat het account wordt geactiveerd.

06. Dokterportaal: een echte praktijkcockpit

Dokters runnen hun hele praktijk vanuit één paneel: een KPI-dashboard met patiëntbetrokkenheidsanalyses, een volledige kalender met wekelijkse beschikbaarheidsregels per kantoor, tijdsblokkering en vakanties, afspraakbeheer, een patiënt CRM met directe toegang tot de medische geschiedenis van elke patiënt, service- en prijsbeheer per kantoor, verzekeraars en behandelde aandoeningen, beoordelingsbeheer met antwoorden, real-time messaging, Stripe-uitbetalingen onboarding en profielbewerking met fotogalerij, video's en certificaten.

Beschikbaarheid is per kantoor geconfigureerd: dagen en uren, aangeboden diensten, patiënttypen en een kleur voor de kalender. Pauzes, planningsblokken en vakanties worden automatisch gerespecteerd door het openbare boekingsrooster.

Berichten zijn direct dankzij Pusher Channels: de arts ziet patiëntberichten op het moment dat ze binnenkomen, met ongelezen tellers en gespreksgeschiedenis.

07. Patiëntenportaal: alles op één plek

Patiënten beheren hun hele gezondheidsleven: een persoonlijk dashboard met gezondheidsstatistieken, afspraakbeheer met herplannen en annuleringsstromen en kalenderexport, hun artsen, recepten, betalingsgeschiedenis, realtime chat met artsen en een complete elektronische medische geschiedenis gebouwd met een stapsgewijze wizard. Beoordelingen hebben een badge voor geverifieerde afspraken.

08. Beheerderpaneel: beheer het hele platform

Een compleet backoffice om de marktplaats te bedienen: wereldwijd dashboard, gebruikersbeheer met rolfilters en detailpagina's, toezicht op afspraken, zes catalogusbeheerders (specialismen, diensten, ziekten, verzekeraars, patiënttypen, professionele voorvoegsels) met Excel-export, beoordeling moderatie met een gerapporteerde-beoordeling workflow, een volledige ondersteuningssuite en diepgaande monetisatie-instellingen.

Instellingen omvatten ook branding (logo, favicon, OG-afbeelding, SEO-metadata), Google Maps en Pusher-gegevens, Stripe test/live-sleutels met verbindingscontroles, patiënt-naar-arts betalingskosten via Stripe Connect met een interactieve kosten simulator, Pusher-metrics (P95 latenties, afleveringssuccespercentage, kanaalautorisaties, evenementen per rol en foutlog) en een server- en cache-onderhoudspagina met databasegezondheidscontroles. Geen omgevingsvariabelen nodig voor integraties: API-sleutels leven in de database en worden in- of uitgeschakeld vanuit de gebruikersinterface.

09. Ondersteuningsagentportaal: ingebouwde helpdesk

Een speciaal portaal voor uw ondersteunend personeel: een ticketinbox met persoonlijke wachtrij en niet-toegewezen pool, één klik "ticket nemen", automatische toewijzing, prioriteiten, bijlagen, geneste antwoorden met interne notities die niet zichtbaar zijn voor gebruikers, statusworkflow (open, in behandeling, wachtend op gebruiker, opgelost, gesloten), agentenschema's en SLA- en sluitingspercentages per agent, met toezicht van de supervisor op elk ticket.

10. Twee inkomstenmotoren, aangedreven door Stripe

MediAgenda is gebouwd om vanaf dag één geld te verdienen, met twee onafhankelijke inkomstenstromen aangedreven door Stripe die u volledig configureert vanuit het beheerderspaneel.

Motor 1: SaaS-inkomsten, vraag artsen om te betalen voor het platform

Kies hoe professionals betalen om lid te worden: Gratis (groei eerst de aanbodzijde), Eenmalige betaling (levenslange toegang verzameld tijdens aanmelding) of Terugkerend abonnement (wekelijks, maandelijks of jaarlijks via Stripe Billing). Stel de reguliere prijs in, voer promotionele prijzen uit, bied proefdagen aan, kies de valuta en de betaalmethoden, en kies tussen Stripe's gehoste checkout of een ingebed kaartformulier binnen de registratiewizard. Artsen worden niet geactiveerd totdat Stripe de betaling bevestigt.

Motor 2: transactie-inkomsten, verdien op elke betaalde consultatie

Zet patiënt-naar-arts betalingen aan via Stripe Connect en behoud een configureerbare platformcommissie op elke consultatie: een percentage, een extra vaste vergoeding, of beide (stel 0% in om 100% aan de arts door te geven). Beslis wie als verkoper van het record optreedt: het platform factureert de kosten en draagt het netto bedrag over aan de arts (bestemmingskosten), of de arts factureert rechtstreeks en Stripe routeert uw vergoeding automatisch (directe kosten). Artsen voltooien hun eigen Stripe onboarding (KYC) vanuit hun paneel, en het beheerdersdashboard houdt verbonden accounts, kosten en opgebouwde commissie bij.

• Gratis / eenmalige / abonnements onboarding voor artsen
• Proefdagen, promotionele prijzen en multi-valuta
• Gehoste of ingebedde Stripe Checkout in de aanmeldwizard
• Stripe Connect uitbetalingen met platformkosten per consult
• Bestemmings- of directe kosten (keuze van de handelaar)
• Test/live modus schakelaar met verbindingsgezondheidscontroles
• Abonnements- en betalingsgeschiedenis in het beheerderspaneel
• Interactieve kosten simulator met echte Stripe kosten

11. Bilingual by design: Engels en Spaans

Een eenklik EN/ES taalschakelaar bevindt zich in elke header en zijbalk. De runtime vertaalengine wordt geleverd met een woordenboek van meer dan 11.000 entries dat het hele product dekt, inclusief de medische catalogi (specialismen, ziekten, diensten), data, dynamische tellers en zelfs vooraf ingevulde demo-inhoud, met slimme patroonherkenning voor geïnterpoleerde nummers en samengestelde zinnen. Google Maps laadt ook in de geselecteerde taal, en het woordenboek is uitbreidbaar voor meer talen.

Functieverdeling per rol

Artsen: openbaar profiel met galerij, video's en certificaten · KPI-dashboard met betrokkenheidsanalyses · kalender, wekelijkse beschikbaarheid, pauzes en vakanties per kantoor · beheer van de levenscyclus van afspraken · patiënt CRM met medische geschiedenis · diensten met vaste of variabele prijzen per kantoor · verzekeraars en behandelde aandoeningen · antwoorden op beoordelingen · realtime chat · onboarding voor Stripe uitbetalingen · ondersteuningstickets

Patiënten: zoeken en boeken in enkele minuten (zelfs als gast) · dashboard met gezondheidsoverzicht · opnieuw plannen en annuleren met beleid · kalender export · wizard voor elektronische medische geschiedenis · betalingsgeschiedenis · chat met artsen · beoordelingen met geverifieerde afspraakbadge · tweetalige UI

Beheerders: wereldwijd dashboard · gebruikers- en rolbeheer · toezicht op afspraken · 6 catalogusbeheerders met Excel-export · beoordeling moderatie · branding en SEO-instellingen · Stripe test/live, factureringsmodellen en kosten simulator · Google Maps en Pusher geconfigureerd vanuit de UI · Pusher statistieken · ondersteuningssuite met SLA en agentplanning · server- en cachetools

Ondersteuningsagenten: persoonlijke inbox en niet-toegewezen wachtrij · tickets aannemen en beantwoorden · interne notities · statusworkflow · supervisorrol ziet alles · agentenschema's (diensten, weekenden, nachten) · op categorie gebaseerde routeringstags · SLA en sluitingspercentages

Technische stack

• Next.js 14 (App Router, Server Components en Server Actions)
• TypeScript end-to-end (~500 TypeScript/TSX-bestanden)
• Prisma ORM · PostgreSQL (65+ modellen)
• Tailwind CSS met een aangepast ontwerpsysteem · Framer Motion animaties
• NextAuth (referenties, JWT-sessies, rolgebaseerde routebescherming)
• Stripe: Checkout, Abonnementen, Betalingsintenties en Connect
• Pusher Channels voor realtime messaging
• Google Maps en Places (invoegen, geocodering, autocompleteren) · Leaflet kantoor kaarten
• date-fns, Zod validatie, Lucide iconen, xlsx export
• Aangepaste runtime i18n-engine (EN/ES)

Wat je krijgt

• Volledige Next.js 14 + TypeScript broncode
• Prisma schema + migratie-klaar modellen
• Seed-scripts met rijke, realistische demo-gegevens en eenklik demo-inloggegevens voor alle 4 rollen
• Runtime i18n-engine + 11.000-entry EN woordenboek
• Engelse codebase: opmerkingen, mappen en routes
• Tailwind ontwerpsysteem en herbruikbare UI-componenten
• .env.example en een stapsgewijze installatie

Installeer in 4 stappen

Getest van nul tot een draaiende app:

1. npm install
2. Kopieer .env.example naar .env en stel je PostgreSQL verbindingsstring in
3. npx prisma db push && npx tsx prisma/seed.ts
4. npm run dev

Vereisten

• Node.js 20+ en PostgreSQL 14+ (werkt geweldig met Neon, Supabase, RDS of lokale Postgres)
• Optioneel, afhankelijk van wat je inschakelt: Stripe-account (betalingen), Pusher-app (realtime chat), Google Maps API-sleutel (kaarten en autocompleteren). Alles geconfigureerd vanuit de admin panel UI.

Demo-inloggegevens (na seeding)

RolEmailWachtwoord Adminadmin@mediagenda.demoAdmin123! Doctordoctor1@mediagenda.demoDoctor123! Patientpaciente1@mediagenda.demoPaciente123!

Goed om te weten

• De interface is tweetalig Engels/Spaans; de codebase, opmerkingen en routes zijn in het Engels.
• Geen sleutels of inloggegevens zijn inbegrepen: Stripe, Pusher en Google Maps worden ingesteld vanuit het beheerderspaneel met je eigen accounts.
• De screenshots, animaties en video zijn gemaakt met de echte app en verzonnen demo-gegevens.