Robin

Ziel des Projekt war die Entwicklung einer digitalen Speisekarte, die sowohl die Interaktion zwischen Gästen und Servicepersonal ermöglichte und auch das Management von Speisen und Getränken effizienter gestaltet. Im Rahmen dieser Arbeit entwickelte ich mit React, TypeScript und Tailwind-CSS drei verschiedenen Weboberflächen mit unterschiedlichen Anforderungen und Herausforderungen:

1. Digitale Speisekarte: Ich entwickelte ein benutzerfreundliches Frontend, das es Gästen ermöglicht, über das Scannen eines QR-Codes auf die digitale Speisekarte zuzugreifen. Dieses Interface bot nicht nur Zugriff auf die aktuelle Speise- und Getränkekarte, sondern auch auf Tagesempfehlungen und informative Videos und Beiträge über den Betrieb. Besonders hervorzuheben ist die integrierte Bestellfunktion, die eine direkte und unkomplizierte Bestellung von Speisen und Getränken ermöglichte.

2. Interface für Servicekräfte: Für das Servicepersonal entwickelte ich eine spezielle Benutzeroberfläche, die es ihnen erlaubte, Bestellungen einzusehen und zu bearbeiten. Diese Anwendung erleichterte die Kommunikation und sorgte für einen reibungslosen Ablauf im Service.

3. Administrationsoberfläche: Ein wesentlicher Bestandteil meines Beitrags war auch die Entwicklung eines Frontends für die Verwaltung der Menüinhalte. Dieses Tool ermöglichte das einfache Hinzufügen, Bearbeiten und Organisieren von Gerichten, Preisen, Kategorien und Beilagen, was eine flexible und unkomplizierte Menuführung gewährleistete.

Dieses Projekt war nicht nur eine Herausforderung, sondern auch eine Bestätigung meiner Fähigkeiten als Frontend-Entwickler, bei der ich meine Leidenschaft für innovative Lösungen und ausgezeichnete Benutzererfahrung unter Beweis stellen konnte.

Das Projekt hatte das Ziel gesammelte Signaldaten verschiedener hochfrequenter Datenquellen im Browser interaktiv exlorier-und analysierbar zu machen. Die K.I.-getriebene Anomieerkennung ermöglichte es außerdem sehr einfach erkannte Anomalien zu untersuchen und direkt mit dem Normalzustand zu vergleichen. Als Fullstack-Entwickler war ich sowohl für das Backend als auch das Frontend federführend, sowohl in Konzeption als auch Entwicklung:

• Backend: Eine RestAPI entwickelt mit Python und FastAPI. Durch die Endpunkte wurden einerseits Daten einer PostgreSQL Datenbank gelesen und geschrieben. Andererseits wurden auch Zeitreihendaten (im Parquet-Format) aus der Cloud (S3) gelesen, gefiltert und transformiert zurückgegeben. Das Ganze wurde dann in einem Docker-Container verpackt und lief mittels Kubernetes.
• Frontend: Eine interaktive React/TypeScript WebApp, die es Nutzern erlaubte eigene Sessions zum Explorieren von Daten anzulegen oder auch bestehende Anomalien detailliert zu analysieren. Hierbei konnte ich mich mit einer ganzen Reihe von erweiterten Frontend-Themen auseinandersetzen wie z.B.
  • Drag-and-Drop und Resizing von UI-Elementen
  • State-Management (mit Jotai und Zustand)
  • Caching und Preloading der Daten für eine flüssige Nutzererfahrung
  • Interaktive Diagramme mit Tooltips, Mauszoom und anderen Features (mit Recharts)
  • Styling mit TailwindCSS
  • Eine ganze Reihe von interaktiven Elementen wie zB Toolbars, Context-Menus, DateTime-Pickern, etc. (mit Radix-UI und React Aria)
  • Performance-Optimierungen um die Nutzererfahrung flüssig zu halten und unnötige Rerenderings zu vermeiden

Ziel und Anwendung: Hierbei handelte es sich um ein innovatives Projekt im Bereich des Qualitätsmanagements, das in Fabriken zum Einsatz kommt. Es revolutioniert den Start neuer Produktionsprozesse, indem es präzise Vorgaben liefert, was von Vorarbeitern zur erfolgreichen Einleitung eines Prozesses geprüft werden muss. Dieses System informiert die Werker anschließend laufend über anstehende Prüfungen, abhängig von der produzierten Stückzahl oder der vergangenen Zeit. Durch die Implementierung von dieser Lösung wurden eine bestehende "legacy" Anwendung auf Basis von MC Access und SQL Server abgelöst und als moderne Web-Anwendung verfügbar gemacht. Dies minimiert Fehlerquellen bei der Qualitätsprüfung, erleichtert die Durchführung der Prüfungen und verbessert die Nachverfolgbarkeit und Analyse von Produktionsfehlern.

Meine Rolle: Als Fullstack-Entwickler war ich verantwortlich für die Entwicklung und Umsetzung sowohl des Backends als auch des Frontends.

• Backend:
  • Technologie: RestAPI mit Express, JavaScript und TypeScript, unter Verwendung von PostgreSQL als Datenbank.
  • Herausforderungen:
    • Entwicklung zahlreicher Endpunkte mit umfassender Authentifizierung, Autorisierung und Datenbanktransaktionen.
    • Erstellung eines eigenen Versionierungssystems, um Änderungen in den Checklisten nachvollziehbar zu gestalten.
    • Stückweise Migration von JavaScript zu TypeScript, um Fehler bereits vor dem Anwendungsstart zu identifizieren.
• Frontend:
  • Technologie: React, JavaScript und TypeScript.
  • Funktionen:
    • Starten neuer Produktionen, Nachverfolgen des Lebenszyklus von Teilen und Boxen, Anlegen von Checklisten.
    • Live-Updates während laufender Produktionen mittels WebSockets, präzise Benachrichtigung der Werker über Prüfzeiten (z.B. Messung des Umfangs eines Teils alle 7 Teile).
    • Bei Abweichungen von der Norm, Alarmierung eines Vorarbeiters zur Fehleruntersuchung.
  • Herausforderungen:
    • Implementierung eines komplexen Live-Systems mit WebSockets, Handhabung vielfältiger Edge-Cases.
    • State-Management mit Redux.
    • Entwicklung von robusten, gegenüber Seiten-Reloads resistenten Schritt-für-Schritt-Abläufen.

Dieses Projekt markiert einen entscheidenden Fortschritt im Bereich des Qualitätsmanagements und stellt einen bedeutenden Beitrag zur Modernisierung und Effizienzsteigerung in der Fabrikproduktion dar.