Warum MediAgenda?
MediAgenda ist kein UI-Kit und keine Vorlage: es ist ein funktionierendes medizinisches Buchungs-SaaS. Jeder Bildschirm unten wird von einem echten PostgreSQL-Schema (65+ Prisma-Modelle), Server-Aktionen, rollenbasierter Authentifizierung und umfangreichen Seed-Daten unterstützt, sodass Sie einen Arztbuchungs-Marktplatz, ein Kliniksystem oder ein Nischen-Telemedizinprodukt in Tagen anstelle von Monaten starten können.
Es deckt den gesamten Zyklus ab: der Patient findet einen Arzt, bucht, bezahlt, erhält Pflege und hinterlässt eine Bewertung, während der Administrator alles von einem White-Label-Panel aus verwaltet, ohne den Code zu berühren. Die Animationen und das Video zeigen die echte App mit Demodaten: keine Mockups.
- 4 vollständige Portale: Patient, Arzt, Administrator und Support-Agent
- Öffentlicher Marktplatz mit Suche, umfangreichen Profilen und sofortiger Buchung (Gäste können ohne Konto buchen)
- Vollständiger Lebenszyklus von Terminen: ausstehend, bestätigt, abgeschlossen, storniert, nicht erschienen
- Zwei Einnahmequellen mit Stripe: Arzt-Abonnements und Gebühren pro Konsultation (Stripe Connect)
- Echtzeit-Nachrichten zwischen Arzt und Patient mit Pusher, mit einem Metriken-Panel im Admin-Bereich
- Elektronische Patientenakten mit einem Schritt-für-Schritt-Assistenten
- Bewertungen mit Bewertungen, Tags, Antworten der Ärzte und Moderation
- Integrierte Support-Ticketing-Suite mit SLA-Metriken und Agentenplanung
- Runtime EN/ES Sprachumschaltung: 11.000+ übersetzte Strings
- Google Maps für Klinikstandorte, Excel-Export von Katalogen, Benutzern und Terminen
- Realistische Demodaten: 26 Ärzte, 35 Patienten, 750+ Termine

01. Sehen Sie es in Aktion: ein Patient bucht in Echtzeit
Das Buchungs-Widget führt den Patienten durch den Besuchstyp, die Büroadresse, den Service, den Versicherer und ein Live-Verfügbarkeitsgitter, das aus dem wöchentlichen Zeitplan des Arztes, Pausen, Urlauben und bestehenden Terminen berechnet wird. Gäste können nur mit Namen und E-Mail buchen; Slot-Reservierungen verhindern Doppelbuchungen, und wenn Sie es aktivieren, zahlen die Patienten die Konsultation online zum Buchungszeitpunkt.

Sekunden später wartet der Termin im Panel des Arztes, mit den Kontaktdaten des Patienten, der Modalität, dem Status und einem direkten Link zu seiner Patientenakte.

02. Eine Landingpage, die für Sie verkauft
Eine moderne, konversionsorientierte Marketingseite mit animierten Heldenmetriken, einem Live-Produkt-Mockup, Storytelling zu Schmerzpunkten, Feature-Präsentationen, Wettbewerbsvergleichen, Testimonials und Preisen: alles, was ein medizinisches SaaS benötigt, um besuchende Ärzte in Abonnenten zu konvertieren. Logo, Texte, Farben und SEO-Metadaten werden über das Admin-Panel bearbeitet.

03. Arztmarktplatz mit intelligenter Suche
Patienten finden den richtigen Spezialisten mit kombinierten Filtern: Freitextsuche, 100+ medizinische Fachrichtungen, Stadt und Konsultationsmodalität (persönlich oder virtuell). Jede Ergebniskarte zeigt das Foto des Arztes, die aktuelle Bewertungsbewertung, das Krankenhaus, Modalitätschips und die Konsultationsgebühr.

04. Öffentliche Arztprofile, die Vertrauen aufbauen
Jeder Arzt erhält eine umfangreiche, SEO-freundliche öffentliche Seite: Fotogalerie und YouTube-Videos, verifiziertes Abzeichen, Sternebewertung, Biografie, Bildungs- und Erfahrungslaufzeit, Dienstleistungen mit Preisen, mehrere Bürostandorte mit einer eingebetteten Google-Karte, akzeptierte Versicherer, herunterladbare PDF-Zertifikate, Patientenbewertungen mit Antworten des Arztes und ein dauerhaftes Buchungs-Widget. Patienteninteresse-Events (Profilansichten, gestartete Buchungen, Kontaktklicks) speisen die Analytik des Arztes.


05. Authentifizierung und Onboarding für jede Rolle
Authentifizierung mit NextAuth, Passwortwiederherstellung und optimierte Registrierungsabläufe. Die Vorlage wird mit Ein-Klick-Demo-Logins für alle vier Rollen geliefert, damit Käufer sofort erkunden können. Patienten melden sich über einen 2-Schritte-Assistenten an; Ärzte über einen 5-Schritte-Assistenten mit einer Live-Profilvorschau, die Profil, Fachrichtung, Klinikadresse (Google Places-Autovervollständigung) und wöchentliche Verfügbarkeit erfasst, und je nach dem von Ihnen konfigurierten Abrechnungsmodus wird eine einmalige Gebühr erhoben oder ein Stripe-Abonnement gestartet, bevor das Konto aktiviert wird.


06. Arztportal: ein echtes Praxis-Cockpit
Ärzte verwalten ihre gesamte Praxis von einem Panel aus: ein KPI-Dashboard mit Analytik zur Patientenbindung, ein vollständiger Kalender mit wöchentlichen Verfügbarkeitsregeln pro Büro, Zeitblockierung und Urlauben, Terminverwaltung, ein Patienten-CRM mit sofortigem Zugriff auf die medizinische Geschichte jedes Patienten, Service- und Preisverwaltung pro Büro, Versicherer und behandelte Bedingungen, Bewertungsmanagement mit Antworten, Echtzeit-Nachrichten, Stripe-Auszahlungen und Profilbearbeitung mit Fotogalerie, Videos und Zertifikaten.

Die Verfügbarkeit wird pro Büro konfiguriert: Tage und Stunden, angebotene Dienstleistungen, Patiententypen und eine Farbe für den Kalender. Pausen, Zeitblöcke und Urlaube werden automatisch vom öffentlichen Buchungsgitter respektiert.


Die Nachrichtenübermittlung erfolgt sofort dank Pusher Channels: Der Arzt sieht die Nachrichten der Patienten in dem Moment, in dem sie ankommen, mit ungelesenen Zählern und Gesprächsverlauf.



07. Patientenportal: alles an einem Ort
Patienten verwalten ihr gesamtes Gesundheitsleben: ein persönliches Dashboard mit Gesundheitsstatistiken, Terminverwaltung mit Neuplanungs- und Stornierungsabläufen sowie Kalenderexport, ihre Ärzte, Rezepte, Zahlungshistorie, Echtzeit-Chat mit Ärzten und eine vollständige elektronische Krankengeschichte, die mit einem Schritt-für-Schritt-Assistenten erstellt wurde. Bewertungen tragen ein verifiziertes Terminabzeichen.


08. Admin-Panel: die gesamte Plattform verwalten
Ein komplettes Backoffice zur Verwaltung des Marktplatzes: globales Dashboard, Benutzerverwaltung mit Rollenfiltern und Detailseiten, Terminüberwachung, sechs Katalogmanager (Fachrichtungen, Dienstleistungen, Krankheiten, Versicherer, Patiententypen, berufliche Präfixe) mit Excel-Export, Moderation von Bewertungen mit einem Workflow für gemeldete Bewertungen, eine vollständige Support-Suite und umfassende Monetarisierungseinstellungen.

Die Einstellungen umfassen auch Branding (Logo, Favicon, OG-Bild, SEO-Metadaten), Google Maps und Pusher-Anmeldeinformationen, Stripe-Test-/Live-Schlüssel mit Verbindungsprüfungen, Gebühren für Zahlungen von Patienten an Ärzte über Stripe Connect mit einem interaktiven Gebührensimulator, Pusher-Metriken (P95-Latenzen, Erfolgsquote bei der Zustellung, Kanalautorisierungen, Ereignisse pro Rolle und Fehlerprotokoll) und eine Wartungsseite für Server und Cache mit Datenbankgesundheitsprüfungen. Keine Umgebungsvariablen für Integrationen erforderlich: API-Schlüssel leben in der Datenbank und werden über die Benutzeroberfläche aktiviert oder deaktiviert.


09. Support-Agent-Portal: integrierte Hilfe
Ein dediziertes Portal für Ihr Support-Team: ein Ticket-Posteingang mit persönlicher Warteschlange und nicht zugewiesenem Pool, Ein-Klick "Ticket annehmen", automatische Zuweisung, Prioritäten, Anhänge, threaded Antworten mit internen Notizen, die für Benutzer unsichtbar sind, Status-Workflow (offen, in Bearbeitung, wartet auf Benutzer, gelöst, geschlossen), Agentenpläne und SLA- sowie Abschlussratenmetriken pro Agent, mit Aufsicht durch den Supervisor über jedes Ticket.

10. Zwei Einnahmequellen, betrieben von Stripe
MediAgenda ist darauf ausgelegt, von Tag eins an Geld zu verdienen, mit zwei unabhängigen Einnahmequellen, die von Stripe unterstützt werden, die Sie vollständig über das Admin-Panel konfigurieren.
Motor 1: SaaS-Einnahmen, Ärzte für die Plattform berechnen
Wählen Sie, wie Fachleute bezahlen, um beizutreten: Kostenlos (zuerst die Angebotsseite wachsen), Einmalzahlung (lebenslanger Zugang, der während der Anmeldung erhoben wird) oder Wiederkehrendes Abonnement (wöchentlich, monatlich oder jährlich über Stripe Billing). Legen Sie den regulären Preis fest, führen Sie Aktionspreise durch, bieten Sie Testtage an, wählen Sie die Währung und die Zahlungsmethoden aus und entscheiden Sie sich zwischen Stripes gehostetem Checkout oder einem eingebetteten Kartenformular im Registrierungsassistenten. Ärzte werden erst aktiviert, wenn Stripe die Zahlung bestätigt.
Motor 2: Transaktionseinnahmen, verdienen Sie an jeder bezahlten Konsultation
Aktivieren Sie Zahlungen von Patienten an Ärzte über Stripe Connect und behalten Sie eine konfigurierbare Plattformprovision für jede Konsultation: einen Prozentsatz, eine zusätzliche feste Gebühr oder beides (setzen Sie 0%, um 100% an den Arzt weiterzugeben). Entscheiden Sie, wer als Händler auftritt: Die Plattform stellt die Gebühr in Rechnung und überweist das Netto an den Arzt (Zielgebühren), oder der Arzt stellt direkt in Rechnung und Stripe leitet Ihre Gebühr automatisch weiter (Direktgebühren). Ärzte schließen ihre eigene Stripe-Onboarding (KYC) von ihrem Panel aus ab, und das Admin-Dashboard verfolgt verbundene Konten, Gebühren und angesammelte Provisionen.

- Kostenlose / einmalige / Abonnement-Einführung für Ärzte
- Testtage, Aktionspreise und Mehrwährungsoptionen
- Gehosteter oder eingebetteter Stripe Checkout im Anmeldeassistenten
- Stripe Connect Auszahlungen mit Plattformgebühren pro Konsultation
- Ziel- oder Direktgebühren (Wahl des Händlers)
- Wechsel zwischen Test-/Live-Modus mit Verbindungsüberprüfungen
- Abonnement- und Zahlungshistorie im Administrationsbereich
- Interaktiver Gebührensimulator mit realen Stripe-Kosten
11. Bilingual by design: Englisch und Spanisch
Ein Ein-Klick EN/ES-Sprachwechsel befindet sich in jeder Kopfzeile und Seitenleiste. Die Laufzeit-Übersetzungsmaschine wird mit einem Wörterbuch mit über 11.000 Einträgen geliefert, das das gesamte Produkt abdeckt, einschließlich der medizinischen Kataloge (Fachrichtungen, Krankheiten, Dienstleistungen), Daten, dynamischen Zählern und sogar vorab gefülltem Demoinhalt, mit intelligenter Mustererkennung für interpolierte Zahlen und zusammengesetzte Phrasen. Google Maps wird ebenfalls in der ausgewählten Sprache geladen, und das Wörterbuch ist erweiterbar für weitere Sprachen.
Funktionsübersicht nach Rolle
Ärzte: öffentliches Profil mit Galerie, Videos und Zertifikaten · KPI-Dashboard mit Engagement-Analysen · Kalender, wöchentliche Verfügbarkeit, Pausen und Urlaube pro Praxis · Terminlebenszyklus-Management · Patienten-CRM mit medizinischen Vorgeschichten · Dienstleistungen mit festen oder Preisbereichen pro Praxis · Versicherer und behandelte Bedingungen · Antworten auf Bewertungen · Echtzeit-Chat · Stripe-Auszahlungs-Einführung · Support-Tickets
Patienten: suchen und in Minuten buchen (auch als Gast) · Dashboard mit Gesundheitsübersicht · Umbuchungen und Stornierungen mit Richtlinien · Kalenderexport · elektronischer medizinischer Geschichtsassistent · Zahlungshistorie · Chat mit Ärzten · Bewertungen mit verifiziertem Terminabzeichen · zweisprachige Benutzeroberfläche
Administratoren: globales Dashboard · Benutzer- und Rollenverwaltung · Terminüberwachung · 6 Katalogmanager mit Excel-Export · Überprüfungsmoderation · Branding- und SEO-Einstellungen · Stripe-Test/Live, Abrechnungsmodelle und Gebührensimulator · Google Maps und Pusher über die Benutzeroberfläche konfiguriert · Pusher-Metriken · Support-Suite mit SLA und Agentenplanung · Server- und Cache-Tools
Support-Mitarbeiter: persönlicher Posteingang und nicht zugewiesene Warteschlange · Tickets annehmen und beantworten · interne Notizen · Status-Workflow · Supervisor-Rolle sieht alles · Agentenpläne (Schichten, Wochenenden, Nächte) · kategoriebasierte Routing-Tags · SLA- und Abschlussratenmetriken
Technologiestack
- Next.js 14 (App Router, Serverkomponenten und Serveraktionen)
- TypeScript End-to-End (~500 TypeScript/TSX-Dateien)
- Prisma ORM · PostgreSQL (65+ Modelle)
- Tailwind CSS mit einem benutzerdefinierten Designsystem · Framer Motion-Animationen
- NextAuth (Anmeldeinformationen, JWT-Sitzungen, rollenbasierter Routen-Schutz)
- Stripe: Checkout, Abonnements, Zahlungsabsichten und Connect
- Pusher-Kanäle für Echtzeit-Nachrichten
- Google Maps und Places (einbetten, Geokodierung, Autocomplete) · Leaflet-Bürokarten
- date-fns, Zod-Validierung, Lucide-Icons, xlsx-Export
- Benutzerdefinierte Laufzeit-i18n-Engine (EN/ES)
Was Sie erhalten
- Vollständiger Next.js 14 + TypeScript Quellcode
- Prisma-Schema + migrationsbereite Modelle
- Seed-Skripte mit reichhaltigen, realistischen Demodaten und Ein-Klick-Demo-Logins für alle 4 Rollen
- Laufzeit-i18n-Engine + 11.000-Einträge EN-Wörterbuch
- Englische Codebasis: Kommentare, Ordner und Routen
- Tailwind-Designsystem und wiederverwendbare UI-Komponenten
.env.example und eine Schritt-für-Schritt-Einrichtung
Installation in 4 Schritten
Getestet von null zu einer laufenden App:
npm install
- Kopieren Sie
.env.example nach .env und setzen Sie Ihre PostgreSQL-Verbindungszeichenfolge
npx prisma db push && npx tsx prisma/seed.ts
npm run dev
Anforderungen
- Node.js 20+ und PostgreSQL 14+ (funktioniert hervorragend mit Neon, Supabase, RDS oder lokalem Postgres)
- Optional, abhängig von dem, was Sie aktivieren: Stripe-Konto (Zahlungen), Pusher-App (Echtzeit-Chat), Google Maps API-Schlüssel (Karten und Autocomplete). Alles wird über die Benutzeroberfläche des Administrationsbereichs konfiguriert.
Demo-Anmeldeinformationen (nach dem Seed)
RolleE-MailPasswort
Adminadmin@mediagenda.demoAdmin123!
Arztarzt1@mediagenda.demoArzt123!
Patientpaciente1@mediagenda.demoPaciente123!
Gut zu wissen
- Die Benutzeroberfläche ist zweisprachig Englisch/Spanisch; die Codebasis, Kommentare und Routen sind auf Englisch.
- Keine Schlüssel oder Anmeldeinformationen sind enthalten: Stripe, Pusher und Google Maps werden über das Administrationspanel mit Ihren eigenen Konten eingerichtet.
- Die Screenshots, Animationen und Videos wurden mit der echten App und erfundenen Demodaten erstellt.