[{"data":1,"prerenderedAt":195},["ShallowReactive",2],{"service-projects-de-printer-management-healthcare-chat-integration-photobooth-platform":3},[4,78,137],{"id":5,"title":6,"body":7,"category":56,"challenge":57,"description":50,"extension":58,"featured":59,"image":60,"images":60,"impact":61,"meta":62,"navigation":63,"order":64,"path":65,"seo":66,"slug":67,"solution":68,"stem":69,"tagline":70,"tags":71,"testimonial":60,"testimonial_author":60,"testimonial_role":60,"url":60,"__hash__":77},"projects_de\u002Fprojects\u002Fde\u002Fprinter-management.md","Drucker-Management Plattform",{"type":8,"value":9,"toc":49},"minimark",[10,15,19,23,42,46],[11,12,14],"h2",{"id":13},"projektübersicht","Projektübersicht",[16,17,18],"p",{},"Entwickelt bei CAMAO Tec (später umbenannt in mmmake), umfasste dieses Projekt den Aufbau einer Drucker-Management-Webanwendung für einen europäischen Multichannel-Händler. Ziel war es, Betriebsteams eine klare Übersicht über alle physischen Drucker im europäischen Filialnetz zu geben – inklusive Einstellungen, Standorten und zugehöriger Metadaten.",[11,20,22],{"id":21},"funktionen","Funktionen",[24,25,26,30,33,36,39],"ul",{},[27,28,29],"li",{},"Geräteübersichts-Dashboard für alle Filialstandorte",[27,31,32],{},"CRUD-Operationen für Drucker, Einstellungen und Metadaten",[27,34,35],{},"OIDC\u002FOAuth-Authentifizierung mit Audience-Validierung und berechtigungsbasierter Zugriffskontrolle",[27,37,38],{},"Integration einer internen StencilJS UI-Komponentenbibliothek",[27,40,41],{},"Mock-Datenschicht zur Einhaltung von Lieferterminen während der API-Entwicklung",[11,43,45],{"id":44},"technische-highlights","Technische Highlights",[16,47,48],{},"Die Anwendung wurde auf Basis von Vue 3 entwickelt – dem ersten Einsatz des Frameworks im Unternehmen. Die REST-API folgte OpenAPI Spec 3 und erforderte die Implementierung eines vollständigen OIDC-Authentifizierungsflows gegen einen internen Identity Provider. Wo das Produktdesign von der Komponentenbibliothek abwich, arbeitete ich direkt mit den Bibliothekseigentümern zusammen, um Probleme zu identifizieren und zu beheben.",{"title":50,"searchDepth":51,"depth":51,"links":52},"",2,[53,54,55],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"web-app","Ein europäischer Multichannel-Händler benötigte eine Weboberfläche zur Verwaltung physischer Drucker an allen Standorten – inklusive Geräteübersicht, Einstellungen, Standortzuordnung und Metadaten. Das Projekt diente gleichzeitig als erster Einstieg des Unternehmens in Vue.","md",false,null,"Die Anwendung wurde erfolgreich ausgeliefert und dient als Basis für künftige Erweiterungen. Das Team wurde vollständig in Vue eingearbeitet. Bugfixes, die an die Komponentenbibliothek zurückgespielt wurden, kamen allen Framework-Konsumenten zugute.",{},true,3,"\u002Fprojects\u002Fde\u002Fprinter-management",{"title":6,"description":50},"printer-management","Ich entwickelte die Webanwendung mit Vue 3 und einer internen, auf StencilJS basierenden UI-Komponentenbibliothek, verbunden mit einer REST-API nach OpenAPI Spec 3 mit OIDC-Authentifizierung. Ich implementierte den vollständigen OAuth-Flow inklusive Audience- und Berechtigungsprüfung, überbrückte Abweichungen zwischen Design und Komponentenbibliothek und hielt Deadlines durch Mock-Daten und Mock-Services ein, während die API noch in Entwicklung war. Zudem onboardete ich das Entwicklungsteam in Vue und vermittelte Best Practices in Komponentendesign und Vue-Ökosystem.","projects\u002Fde\u002Fprinter-management","Europaweites Gerätmanagement für den Handel",[72,73,74,75,76],"Vue 3","TypeScript","OIDC","REST API","StencilJS","uIRUtuvQddp6FkjBI2q1IPEwDe9MKcU3z94G1WRAsc0",{"id":79,"title":80,"body":81,"category":117,"challenge":118,"description":50,"extension":58,"featured":59,"image":60,"images":60,"impact":119,"meta":120,"navigation":63,"order":121,"path":122,"seo":123,"slug":124,"solution":125,"stem":126,"tagline":127,"tags":128,"testimonial":60,"testimonial_author":60,"testimonial_role":60,"url":60,"__hash__":136},"projects_de\u002Fprojects\u002Fde\u002Fhealthcare-chat-integration.md","Healthcare PWA Chat-Integration",{"type":8,"value":82,"toc":112},[83,85,88,90,107,109],[11,84,14],{"id":13},[16,86,87],{},"Dieses NDA-geschützte Projekt umfasste die Integration eines Echtzeit-Chat-Systems in eine bestehende React-Progressive-Web-App für Klienten und Gesundheitsfachkräfte. Die App verwaltete Nutzerdaten beider Rollen und benötigte einen Kommunikationskanal zwischen ihnen. Der Projektumfang war klar definiert: die richtige Chat-Technologie auswählen und unter Zeitdruck vollständig implementieren.",[11,89,22],{"id":21},[24,91,92,95,98,101,104],{},[27,93,94],{},"RocketChat via Docker in die bestehende Infrastruktur integriert",[27,96,97],{},"Automatische RocketChat-Nutzeranlage bei Registrierung und Login",[27,99,100],{},"NestJS-Proxy-Endpunkte für Chat-Raum-Erstellung, Nachrichtenhandling und Business-Logik",[27,102,103],{},"Eigene WebSocket-Client-Implementierung für Echtzeit-Messaging im React-Frontend",[27,105,106],{},"Jest-Unit-Tests für alle neuen NestJS-Endpunkte mit Dependency Injection und Module Mocking",[11,108,45],{"id":44},[16,110,111],{},"Das Backend wurde mit Amplication generiert und nutzte bereits MongoDB, was die gemeinsame Nutzung derselben Datenbankinstanz mit RocketChat vereinfachte. Statt RocketChats vorgefertigter UI implementierte ich die WebSocket-Verbindung manuell, um das bestehende Interface-Design des Kunden zu respektieren. NestJS' Modulsystem und Dependency Injection ermöglichten isolierte Unit-Tests für die neuen Proxy-Endpunkte – die erste Testabdeckung im gesamten Projekt.",{"title":50,"searchDepth":51,"depth":51,"links":113},[114,115,116],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"integration","Eine Healthcare-Webanwendung zur Kommunikation zwischen Klienten und Ärzten fehlte ihre zentrale Funktion – ein Echtzeit-Chat – mit einem nahenden harten Deadline. Die bestehende Codebasis war eine React PWA mit NestJS\u002FAmplication-Backend, beide ohne Tests oder Qualitätssicherung. Der Kunde hatte keine Tool-Strategie und benötigte sowohl eine Technologieempfehlung als auch eine vollständige Implementierung.","Die Chat-Funktion wurde termingerecht geliefert und vollständig in die bestehende Anwendung integriert. Die NestJS-Endpunkte wurden erstmalig mit Jest-Unit-Tests abgesichert. Die Lösung hält die Nutzerverwaltung zentralisiert und Echtzeit-Messaging performant durch eine direkte WebSocket-Verbindung.",{},4,"\u002Fprojects\u002Fde\u002Fhealthcare-chat-integration",{"title":80,"description":50},"healthcare-chat-integration","Ich recherchierte und evaluierte Chat-Lösungen mit React-Unterstützung (u. a. GetStream.io und RocketChat), präsentierte die Ergebnisse dem Kunden und leitete die Integration von RocketChat. Ich erweiterte das bestehende Docker-Compose-Setup um RocketChat auf der vorhandenen MongoDB-Instanz, deaktivierte die Selbstregistrierung und implementierte die automatische Nutzeranlage in RocketChat bei Login und Registrierung. Im NestJS-Backend baute ich Proxy-Endpunkte für Chat-Raum-Erstellung und Nachrichtenversand, abgedeckt durch Jest-Unit-Tests. Im Frontend implementierte ich eine eigene RocketChat-WebSocket-Verbindung für Echtzeit-Messaging innerhalb des bestehenden UI-Designs.","projects\u002Fde\u002Fhealthcare-chat-integration","Echtzeit-Chat für eine Klienten-Arzt-App",[129,130,131,132,133,134,135],"React","NestJS","RocketChat","WebSockets","MongoDB","Jest","PWA","n_Mq0zNoJb8h345OSkU0wC2DVdeTM3SFJRxJ_S1wJps",{"id":138,"title":139,"body":140,"category":56,"challenge":179,"description":50,"extension":58,"featured":59,"image":60,"images":60,"impact":180,"meta":181,"navigation":63,"order":182,"path":183,"seo":184,"slug":185,"solution":186,"stem":187,"tagline":188,"tags":189,"testimonial":60,"testimonial_author":60,"testimonial_role":60,"url":60,"__hash__":194},"projects_de\u002Fprojects\u002Fde\u002Fphotobooth-platform.md","Photobooth Plattform",{"type":8,"value":141,"toc":174},[142,144,147,149,169,171],[11,143,14],{"id":13},[16,145,146],{},"Dieses Projekt umfasste die komplette Neuentwicklung einer Photobooth-Softwareplattform für ein Unternehmen, das Photobooths – inklusive Hardware, Personal, individuellen Overlays und Software – für Firmenevents und Live-Veranstaltungen vermietet. Das bestehende MVP war nur bedingt alltagstauglich und für hochvolumige Live-Einsätze nicht geeignet.",[11,148,22],{"id":21},[24,150,151,154,157,160,163,166],{},[27,152,153],{},"Node.js-Disk-Watcher erkennt neue Aufnahmen von einer WLAN-SD-Karte in Echtzeit",[27,155,156],{},"Laravel-Backend für Bildaufnahme, Thumbnail-Generierung und Overlay-Komposition",[27,158,159],{},"WebSocket-Benachrichtigungen übertragen neue Bilder sofort an das Vue-Frontend",[27,161,162],{},"Overlay-Auswahl mit backend-gerenderter Vorschau in optimierter Auflösung",[27,164,165],{},"Vollauflösungs-Bildgenerierung mit gewähltem Overlay nach Bestätigung",[27,167,168],{},"PHP-Druckbefehl direkt aus Laravel an den angeschlossenen Event-Drucker",[11,170,45],{"id":44},[16,172,173],{},"Die zentrale Herausforderung war Echtzeit-Reaktivität ohne Polling. Die Kombination aus Node.js-File-Watcher und Laravel-WebSocket-Broadcaster hielt das Frontend immer aktuell, sobald ein Foto auf der Disk landete. Die Thumbnail-Generierung im Backend war entscheidend für die Schnelligkeit des Frontends – das Laden von Bildern in voller Auflösung hätte bei Live-Events spürbare Verzögerungen verursacht. Der Laravel\u002FVue-Stack ersetzte eine unwartbare PHP\u002FJS-Codebasis durch eine saubere, framework-strukturierte Anwendung.",{"title":50,"searchDepth":51,"depth":51,"links":175},[176,177,178],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"Ein Photobooth-Verleihunternehmen betrieb ein MVP in reinem PHP und HTML\u002FJS ohne Framework, ohne Live-Bildladung und mit für Live-Events unzureichender Performance. Frisch aufgenommene Fotos wurden nicht in Echtzeit angezeigt, die Codebasis war nicht wartbar und dem Frontend fehlte die nötige Reaktivität für ein flüssiges Booth-Erlebnis.","Die Plattform ersetzte ein fragiles MVP durch eine robuste, wartbare Anwendung für hochvolumige Live-Events. Echtzeit-Bildübertragung und sofortiger Druckversand sorgten für ein flüssiges Erlebnis für Booth-Betreiber und Gäste. Der Laravel\u002FVue-Stack schuf eine saubere Grundlage für künftige Features.",{},5,"\u002Fprojects\u002Fde\u002Fphotobooth-platform",{"title":139,"description":50},"photobooth-platform","Ich entwickelte die Plattform mit einem Laravel-Backend und Vue.js-Frontend neu. Ein Node.js-Script scannte kontinuierlich die Zieldisk auf neue Bilder, die über eine WLAN-fähige SD-Karte übertragen wurden. Bei Erkennung benachrichtigte es das Laravel-Backend, das jedes Bild verarbeitete – Thumbnails für schnelle Vorschau und Overlay-Kompositionen zur Auswahl generierte. Nach Auswahl von Foto und Overlay erzeugte Laravel das endgültige Bild in voller Auflösung und sendete einen PHP-Druckbefehl direkt an den angeschlossenen Drucker. Das Frontend erhielt Echtzeit-Updates per WebSocket und zeigte neue Fotos sofort ohne manuelles Neuladen an.","projects\u002Fde\u002Fphotobooth-platform","Echtzeit-Fotoverarbeitung für Live-Events",[190,191,192,132,193],"Vue.js","Laravel","Node.js","PHP","jr15fnaryQWUqXQVfKFK2hReA_2Cjd4UJCO4f5FaYys",1787644785018]