[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portfolio-de":3},[4,77,140,195,254],{"id":5,"title":6,"body":7,"category":56,"challenge":57,"description":50,"extension":58,"featured":59,"image":60,"impact":61,"meta":62,"navigation":59,"order":63,"path":64,"seo":65,"slug":66,"solution":67,"stem":68,"tagline":69,"techStack":70,"__hash__":76},"portfolio_de/de/portfolio/impax-tours.md","IMPAX Tours",{"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",{},"IMPAX Tours ist eine Online-Plattform für die Buchung von Outdoor-Reisen, spezialisiert auf Surfcamps und Backpacker-Unterkünfte weltweit. Im Auftrag von IMPAX Tours UG entwickelten wir die vollständige Web-Plattform über einen Zeitraum von 10 Monaten.",[11,20,22],{"id":21},"key-features","Key Features",[24,25,26,30,33,36,39],"ul",{},[27,28,29],"li",{},"Standortbasierte Suche mit Filterfunktionen nach Destination, Unterkunftstyp und Verfügbarkeit",[27,31,32],{},"Integrierter Buchungsablauf mit Zahlungsintegration",[27,34,35],{},"Anbieter-Dashboard zur Verwaltung von Surf Camps und Backpacker-Lodges",[27,37,38],{},"Responsive Design für mobile und Desktop-Nutzer",[27,40,41],{},"Nachhaltigkeits-Sektion mit Informationen zu umweltbewusstem Reisen",[11,43,45],{"id":44},"technical-highlights","Technical Highlights",[16,47,48],{},"Die Plattform wurde mit einem Laravel-Backend und Vue.js-Frontend realisiert. Die Architektur ist auf Skalierbarkeit ausgelegt und unterstützt mehrere Anbieter mit eigenem Content-Management. Die Suchfunktion basiert auf einer datenbankgestützten Filterlösung mit geographischen Kriterien.",{"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},"booking-platform","IMPAX Tours benötigte eine skalierbare Plattform, auf der Reisende Surfcamps und Backpacker-Unterkünfte weltweit finden und direkt buchen können – inklusive Suche, Destinationsfilter und Zahlungsintegration.","md",true,"/img/projects/impax-tours.webp","Die Plattform ging erfolgreich live und ermöglicht es Reisenden weltweit, Outdoor-Unterkünfte zu finden und zu buchen. Das Projekt wurde in 10 Monaten abgeschlossen und vom Geschäftsführer mit vollster Zufriedenheit bewertet.",{},1,"/de/portfolio/impax-tours",{"title":6,"description":50},"impax-tours","Wir entwickelten die gesamte Plattform als Full-Stack-Entwicklungsteam mit Laravel als Backend und Vue.js als Frontend. Die Lösung umfasst eine standortbasierte Suche, Filterfunktionen nach Destination und Unterkunftstyp sowie einen integrierten Buchungs- und Zahlungsablauf.","de/portfolio/impax-tours","Surf- & Reisebuchungsplattform",[71,72,73,74,75],"Vue.js","Laravel","PHP","MySQL","Booking","ZGndi6SKz9hasnQxTfT1GQR79JV75k7FQ-0Wff4fu2U",{"id":78,"title":79,"body":80,"category":126,"challenge":127,"description":50,"extension":58,"featured":59,"image":128,"impact":129,"meta":130,"navigation":59,"order":51,"path":131,"seo":132,"slug":133,"solution":134,"stem":135,"tagline":79,"techStack":136,"__hash__":139},"portfolio_de/de/portfolio/hotel-checkin-platform.md","Digitales Hotel Check-in System",{"type":8,"value":81,"toc":121},[82,84,87,91,114,118],[11,83,14],{"id":13},[16,85,86],{},"Für eine Hotelgruppe wurde ein vollständig digitales Gäste-Check-in- und Zimmerbuchungssystem entwickelt. Die Anwendung führt Gäste Schritt für Schritt durch den gesamten Check-in-Prozess – von der Zimmerauswahl bis zur Buchungsbestätigung – und ist für den Einsatz auf Lobby-Tablets optimiert.",[11,88,90],{"id":89},"funktionen","Funktionen",[24,92,93,96,99,102,105,108,111],{},[27,94,95],{},"Interaktiver Grundriss zur Zimmerauswahl mit Echtzeit-Verfügbarkeitsanzeige",[27,97,98],{},"Zimmertypübersicht mit Merkmalsvergleich (Standard, Deluxe, Suite)",[27,100,101],{},"Mehrseitiges Persönliche-Daten-Formular mit client-seitiger Validierung",[27,103,104],{},"Buchungsübersicht mit vollständiger Zusammenfassung vor der Bestätigung",[27,106,107],{},"Digitale Unterschrift mit Touchscreen-Unterstützung",[27,109,110],{},"Integration von AGB und Gästetaxe",[27,112,113],{},"Vollständig deutschsprachige Oberfläche im Corporate Design des Kunden",[11,115,117],{"id":116},"technische-highlights","Technische Highlights",[16,119,120],{},"Die Anwendung wurde mit Vue.js und einem PHP/REST-API-Backend entwickelt. Der interaktive Grundriss zeigt die Zimmerverfügbarkeit dynamisch anhand von Backend-Daten an. Der mehrstufige Ablauf nutzt client-seitiges State-Management, um Gästedaten über alle Schritte hinweg zu erhalten.",{"title":50,"searchDepth":51,"depth":51,"links":122},[123,124,125],{"id":13,"depth":51,"text":14},{"id":89,"depth":51,"text":90},{"id":116,"depth":51,"text":117},"web-app","Eine Hotelgruppe wollte ihren papierbasierten Gäste-Check-in-Prozess durch eine moderne, tablet-freundliche Webanwendung ersetzen, die Gäste eigenständig durch Zimmerauswahl, Dateneingabe und Buchungsbestätigung führt.",null,"Das System ersetzte den papierbasierten Check-in vollständig, verkürzte die durchschnittliche Eincheckzeit deutlich und ermöglichte die digitale Verwaltung von Zimmerverfügbarkeiten und Gästedaten ab dem ersten Tag.",{},"/de/portfolio/hotel-checkin-platform",{"title":79,"description":50},"hotel-checkin-platform","Wir entwickelten eine mehrstufige Webanwendung mit Vue.js: interaktiver Grundriss zur Zimmerauswahl, Persönliche-Daten-Formular mit Validierung, Buchungsübersicht mit digitaler Unterschrift und vollständig deutschsprachiger, markenkonformer Oberfläche.","de/portfolio/hotel-checkin-platform",[71,137,73,138],"TypeScript","REST API","yBSOTFnO4TeuXSyrtWB8JCJ6U7dolW1yMwWDodFctyQ",{"id":141,"title":142,"body":143,"category":126,"challenge":179,"description":50,"extension":58,"featured":180,"image":128,"impact":181,"meta":182,"navigation":59,"order":183,"path":184,"seo":185,"slug":186,"solution":187,"stem":188,"tagline":189,"techStack":190,"__hash__":194},"portfolio_de/de/portfolio/printer-management.md","Drucker-Management Plattform",{"type":8,"value":144,"toc":174},[145,147,150,152,169,171],[11,146,14],{"id":13},[16,148,149],{},"Dieses Projekt, umgesetzt bei CAMAO Tec (später umbenannt in mmmake), umfasste 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,151,90],{"id":89},[24,153,154,157,160,163,166],{},[27,155,156],{},"Geräteübersichts-Dashboard für alle Filialstandorte",[27,158,159],{},"CRUD-Operationen für Drucker, Einstellungen und Metadaten",[27,161,162],{},"OIDC/OAuth-Authentifizierung mit Audience-Validierung und berechtigungsbasierter Zugriffskontrolle",[27,164,165],{},"Integration einer internen StencilJS UI-Komponentenbibliothek",[27,167,168],{},"Mock-Datenschicht zur Einhaltung von Lieferterminen während der API-Entwicklung",[11,170,117],{"id":116},[16,172,173],{},"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, arbeiteten wir direkt mit den Bibliothekseigentümern zusammen, um Probleme zu identifizieren und zu beheben.",{"title":50,"searchDepth":51,"depth":51,"links":175},[176,177,178],{"id":13,"depth":51,"text":14},{"id":89,"depth":51,"text":90},{"id":116,"depth":51,"text":117},"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.",false,"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.",{},3,"/de/portfolio/printer-management",{"title":142,"description":50},"printer-management","Wir entwickelten 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. Wir implementierten den vollständigen OAuth-Flow inklusive Audience- und Berechtigungsprüfung, überbrückten Abweichungen zwischen Design und Komponentenbibliothek und hielten Deadlines durch Mock-Daten und Mock-Services ein, während die API noch in Entwicklung war. Zudem onboardeten wir das Entwicklungsteam in Vue und vermittelten Best Practices in Komponentendesign und Vue-Ökosystem.","de/portfolio/printer-management","Europaweites Gerätmanagement für den Handel",[191,137,192,138,193],"Vue 3","OIDC","StencilJS","Rby08Gq9TLYYcVOCb6_-HEXFfB2_Z7Q68VNPREqw1yE",{"id":196,"title":197,"body":198,"category":234,"challenge":235,"description":50,"extension":58,"featured":180,"image":128,"impact":236,"meta":237,"navigation":59,"order":238,"path":239,"seo":240,"slug":241,"solution":242,"stem":243,"tagline":244,"techStack":245,"__hash__":253},"portfolio_de/de/portfolio/healthcare-chat-integration.md","Healthcare PWA Chat-Integration",{"type":8,"value":199,"toc":229},[200,202,205,207,224,226],[11,201,14],{"id":13},[16,203,204],{},"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,206,90],{"id":89},[24,208,209,212,215,218,221],{},[27,210,211],{},"RocketChat via Docker in die bestehende Infrastruktur integriert",[27,213,214],{},"Automatische RocketChat-Nutzeranlage bei Registrierung und Login",[27,216,217],{},"NestJS-Proxy-Endpunkte für Chat-Raum-Erstellung, Nachrichtenhandling und Business-Logik",[27,219,220],{},"Eigene WebSocket-Client-Implementierung für Echtzeit-Messaging im React-Frontend",[27,222,223],{},"Jest-Unit-Tests für alle neuen NestJS-Endpunkte mit Dependency Injection und Module Mocking",[11,225,117],{"id":116},[16,227,228],{},"Das Backend wurde mit Amplication generiert und nutzte bereits MongoDB, was die gemeinsame Nutzung derselben Datenbankinstanz mit RocketChat vereinfachte. Statt RocketChats vorgefertigter UI implementierten wir 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":230},[231,232,233],{"id":13,"depth":51,"text":14},{"id":89,"depth":51,"text":90},{"id":116,"depth":51,"text":117},"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/Amplication-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,"/de/portfolio/healthcare-chat-integration",{"title":197,"description":50},"healthcare-chat-integration","Wir recherchierten und evaluierten Chat-Lösungen mit React-Unterstützung (u. a. GetStream.io und RocketChat), präsentierten die Ergebnisse dem Kunden und leiteten die Integration von RocketChat. Wir erweiterten das bestehende Docker-Compose-Setup um RocketChat auf der vorhandenen MongoDB-Instanz, deaktivierten die Selbstregistrierung und implementierten die automatische Nutzeranlage in RocketChat bei Login und Registrierung. Im NestJS-Backend bauten wir Proxy-Endpunkte für Chat-Raum-Erstellung und Nachrichtenversand, abgedeckt durch Jest-Unit-Tests. Im Frontend implementierten wir eine eigene RocketChat-WebSocket-Verbindung für Echtzeit-Messaging innerhalb des bestehenden UI-Designs.","de/portfolio/healthcare-chat-integration","Echtzeit-Chat für eine Klienten-Arzt-App",[246,247,248,249,250,251,252],"React","NestJS","RocketChat","WebSockets","MongoDB","Jest","PWA","vkU3rJEMDP_otUJuQSSOc-p7qtTCyJ2Tk-6-BnWFvCQ",{"id":255,"title":256,"body":257,"category":126,"challenge":296,"description":50,"extension":58,"featured":180,"image":128,"impact":297,"meta":298,"navigation":59,"order":299,"path":300,"seo":301,"slug":302,"solution":303,"stem":304,"tagline":305,"techStack":306,"__hash__":308},"portfolio_de/de/portfolio/photobooth-platform.md","Photobooth Plattform",{"type":8,"value":258,"toc":291},[259,261,264,266,286,288],[11,260,14],{"id":13},[16,262,263],{},"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,265,90],{"id":89},[24,267,268,271,274,277,280,283],{},[27,269,270],{},"Node.js-Disk-Watcher erkennt neue Aufnahmen von einer WLAN-SD-Karte in Echtzeit",[27,272,273],{},"Laravel-Backend für Bildaufnahme, Thumbnail-Generierung und Overlay-Komposition",[27,275,276],{},"WebSocket-Benachrichtigungen übertragen neue Bilder sofort an das Vue-Frontend",[27,278,279],{},"Overlay-Auswahl mit backend-gerenderter Vorschau in optimierter Auflösung",[27,281,282],{},"Vollauflösungs-Bildgenerierung mit gewähltem Overlay nach Bestätigung",[27,284,285],{},"PHP-Druckbefehl direkt aus Laravel an den angeschlossenen Event-Drucker",[11,287,117],{"id":116},[16,289,290],{},"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/Vue-Stack ersetzte eine unwartbare PHP/JS-Codebasis durch eine saubere, framework-strukturierte Anwendung.",{"title":50,"searchDepth":51,"depth":51,"links":292},[293,294,295],{"id":13,"depth":51,"text":14},{"id":89,"depth":51,"text":90},{"id":116,"depth":51,"text":117},"Ein Photobooth-Verleihunternehmen betrieb ein MVP in reinem PHP und HTML/JS 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/Vue-Stack schuf eine saubere Grundlage für künftige Features.",{},5,"/de/portfolio/photobooth-platform",{"title":256,"description":50},"photobooth-platform","Wir entwickelten 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.","de/portfolio/photobooth-platform","Echtzeit-Fotoverarbeitung für Live-Events",[71,72,307,249,73],"Node.js","4lfkIrBynNRnjkQno0KIj6U4kkYANJ3mnvxZQAbAtCo"]