UnternehmenssystemeKundenportal

Kundenportal

Ein sicheres Self-Service-Portal, in dem Geschäftskunden Aufträge und Projekte verfolgen, Rechnungen bezahlen, Dokumente herunterladen und Support-Tickets eröffnen — mit einer Mitarbeiteransicht für das Team dahinter.

Projektdaten

Projektart: Kundenportal
Kategorie: Unternehmenssysteme
Branche: B2B-Dienstleister und Lieferanten
Technologie-Stack: Next.js
React
TypeScript
PostgreSQL
Prisma
WebSockets
S3-compatible storage

Kundenportal-Dashboard mit offenen Aufträgen, fälligen Rechnungen, Support-Tickets, Projektfortschritt und neuesten Dokumenten

Überblick

Dieses Demonstrationsprojekt zeigt ein Kundenportal für einen B2B-Anbieter von Anlagen und Dienstleistungen. Jedes Kundenunternehmen erhält einen eigenen geschützten Bereich mit mehreren Nutzern: offene Aufträge mit Sendungsverfolgung, eine Projektzeitleiste, online bezahlbare Rechnungen, geteilte Dokumente und einen Support-Kanal mit Ticket-Historie.

Auf der Mitarbeiterseite sieht das Team alle Kundenkonten, arbeitet in einer gemeinsamen Support-Warteschlange und kann das Portal genau so ansehen wie der Kunde. Dasselbe Muster passt für Agenturen, Installateure, Logistiker und Softwareanbieter.

Die Herausforderung

Ohne Portal stellen Kunden dieselben Fragen per Telefon und E-Mail: Wo ist meine Bestellung, können Sie die Rechnung noch einmal schicken, wie ist der Projektstand, wer kümmert sich um mein Problem? Die Antwort hängt davon ab, wer abhebt, Dokumente gehen in Postfächern verloren, und Mitarbeitende verbringen Stunden mit Anliegen, die Kunden selbst erledigen könnten. Dokumente per E-Mail zu teilen erschwert zudem die Zugriffskontrolle.

Die Lösung

Das Konzept gibt Kunden einen Ort für alles rund um ihr Konto. Aufträge zeigen Live-Status und Tracking, Projekte zeigen Phasen und Updates, Rechnungen lassen sich online bezahlen, und Dokumente werden pro Konto mit rollenbasiertem Zugriff geteilt. Support läuft über Tickets mit Anhängen und klarem Status, sodass beide Seiten die komplette Historie sehen. Mitarbeitende arbeiten aus einer priorisierten Warteschlange und können Tickets zuweisen, beantworten und schließen.

Wichtigste Funktionen

Kundenkonten mit mehreren Nutzern und Rollen
Auftragsstatus und Sendungsverfolgung
Projektzeitleiste mit Phasen und veröffentlichten Updates
Rechnungen mit Online-Zahlung und PDF-Download
Dokumentenfreigabe pro Konto mit kontrolliertem Zugriff
Support-Tickets mit Anhängen, Priorität und Status
Mitarbeiter-Warteschlange mit Zuweisung und Reaktionszeiten
„Als Kunde ansehen“ für das Support-Team

Für wen

B2B-Lieferanten und Dienstleister mit Stammkunden
Installateure und Agenturen, die Projekte für Kunden umsetzen
Teams, die täglich dieselben Statusfragen beantworten
Unternehmen, die Verträge und Berichte heute per E-Mail teilen

Technisches Vorgehen

Eine Next.js-Anwendung bedient Kundenportal und Mitarbeiterseite, wobei jede Abfrage serverseitig auf Kundenkonto und Rolle beschränkt ist. PostgreSQL über Prisma speichert Konten, Nutzer, Aufträge, Projekte, Rechnungen, Dokumente und Tickets. Dateien liegen in S3-kompatiblem Speicher und werden über kurzlebige signierte Links ausgeliefert, Ticket-Updates kommen live per WebSockets, und größere Kunden erhalten bei Bedarf Single Sign-on über OpenID Connect.

Frontend: Next.js
React
TypeScript
Backend: Prisma
WebSockets
Datenbank: PostgreSQL
Infrastruktur: S3-compatible storage
Integrationen: MollieOpenID ConnectSMTP

Screens

Kundenoberfläche

Support-Ticket-Verlauf zwischen Kunde und Support-Ingenieur mit Anhängen und Ticketdetails

Verwaltungsoberfläche

Support-Warteschlange der Mitarbeitenden mit Tickets je Kunde, Priorität und Status sowie Tickets nach Kategorie

Mobile und responsive Ansichten

Drei Smartphone-Bildschirme des Kundenportals: Kontoübersicht, Auftragsverfolgung und Support-Tickets

Leistungen hinter diesem Projekt

Die Arbeit in dieser Fallstudie entspricht diesen Leistungen. Jede Seite erklärt Umfang, Ablauf und was Sie erhalten.

Fragen zu dieser Art von Projekt

Wird dieses Portal von einem echten Unternehmen genutzt?

Nein. Es ist ein Demonstrationsprojekt mit Beispielkonten, -aufträgen und -tickets. Es zeigt, wie Saad ein sicheres Kundenportal entwickelt.

Wie wird verhindert, dass ein Kunde die Daten eines anderen sieht?

Jeder Datensatz gehört zu einem Kundenkonto, und der Server prüft bei jeder Anfrage Konto und Rolle des angemeldeten Nutzers. Dateien werden über kurzlebige signierte Links ausgeliefert, sodass ein kopierter Link bald ungültig ist.

Lässt sich das Portal an bestehende Systeme anbinden?

In der Regel ja. Aufträge, Rechnungen oder Projektdaten können über die API aus einem bestehenden ERP-, CRM- oder Buchhaltungssystem gelesen werden, sodass das Portal dieselben Informationen zeigt, mit denen Ihr Team arbeitet.

Sie möchten ein ähnliches Projekt?

Sagen Sie Saad, was Sie brauchen. Sie erhalten einen klaren Umfang, einen Plan in Phasen und direkten Kontakt zum Entwickler – ohne Zwischenhändler.

Direkte, klare Kommunikation
Sie sprechen direkt mit dem Ingenieur, der den Code schreibt — ohne Vertrieb dazwischen, ohne vage Termine.
Vollständig individuell
Keine fertigen WordPress-Themes oder kopierter Code — jede Zeile wird für die Anforderungen und Größe Ihres Unternehmens geschrieben.
Von der Idee zum Launch
Hilfe beim Ausformulieren der Spezifikation und bei der Umsetzung einer groben Idee in ein echtes, nutzbares Produkt.

Das Anfrageformular öffnet sich mit dieser Projektart bereits ausgewählt.