Das Projekt umfasst die Entwicklung eines webbasierten Kundenportals (sowie der öffentlichen Service-Seiten) für einen Hosting-Anbieter. Über das Portal lassen sich Services und Einstellungen einfach verwalten.
Web-UI für Hosting-Control-Panel
Das Projekt umfasst die Entwicklung eines webbasierten Kundenportals (sowie der öffentlichen Service-Seiten) für einen Hosting-Anbieter. Über das Portal lassen sich Services und Einstellungen einfach verwalten.
Die Aufgabe
Ein Unternehmen hat Chudovo mit der Entwicklung seiner zentralen Webhosting-Plattform auf Basis einer Microservices-Architektur beauftragt. Chudovo-Team hat die Web-UI für die Verwaltung von Hosting-Einstellungen im Control-Panel übernommen. Die zentralen Anforderungen waren:
- Entwicklung einer intuitiven Weboberfläche unter Berücksichtigung der Hosting-Workflows und UI/UX-Prinzipien
- Entwicklung einer modernen UI und Integration in das Backend
- Einhaltung von Sicherheitsanforderungen, sichere Authentifizierung und zuverlässige Datenverarbeitung
- Entwicklung der Weboberfläche innerhalb der vorgegebenen Zeitrahmen
Lösung
In funktionaler Hinsicht werden im Projekt die typischen Hosting-Szenarien abgedeckt::
- Anzeige- und Verwaltungsfunktion von Tarifen und Abonnements
- Verwaltung von Services wie Domains und Hosting-Ressourcen
- Kontoeinstellungen
- Weitere Funktionen wie Mehrsprachigkeit, schnelle Suche, Filter, Statusanzeigen und Push-Benachrichtigungen
Hauptaufgaben des Frontend-Entwicklers:
- Entwicklung der Web-UI für das Hosting-Control-Panel mit Next.js, React und TypeScript: Grundarchitektur, Seitenstruktur, Routing, UI-Aufbau
- Entwicklung des Kundenkontos: Ansichten und Module zur Verwaltung von Services und Nutzerinformationen (Listen, Detailseiten, ‚Empty/Loading/Error‘-Zustände, grundlegende Navigation)
- Integration mit der API und Aufbau einer typisierten Dateninteraktion mit SWR (Caching, Datenaktualisierung sowie einheitliche Fehler- und Systemmeldungen)
- Erstellung wiederverwendbarer UI-Komponenten wie Tasten, Eingabefelder und Selects auf Basis von Radix sowie kleine Statusanzeigen mit konsistenten Styles über Tailwind und clsx
- Implementierung der Mehrsprachigkeit mit next-intl (Integration der Sprachversionen, Begriffslisten und Namespaces, Sprachumschaltung im Interface)
- Optimierung von UX/UI, Verbesserung der Formular- und Listenlogik, klare Statusanzeigen, dezente Animationen und Anpassung an verschiedene Bildschirmgrößen
- Sicherstellung der Codequalität mit ESLint, konsistentem Typing und gezieltem Refactoring von Komponenten
Einfluss auf das Business
- Der Kunde hat die Lösung erfolgreich lanciert und Nutzern ermöglicht, Hosting-Einstellungen über die Web-UI zu verwalten
- Bereitstellung eines vollständig funktionsfähigen Hosting-Control-Panels für die effiziente Verwaltung von Hosting-Services
- Optimierte Darstellung und Nutzung auf mobilen Geräten
