[{"data":1,"prerenderedAt":776},["ShallowReactive",2],{"hero-proof-de":3,"projects-de-featured":207,"projects-testimonials-de":312},[4,90,143],{"id":5,"title":6,"body":7,"category":62,"challenge":63,"description":56,"extension":64,"featured":65,"image":66,"images":67,"impact":71,"meta":72,"navigation":65,"order":73,"path":74,"seo":75,"slug":76,"solution":77,"stem":78,"tagline":6,"tags":79,"testimonial":85,"testimonial_author":86,"testimonial_role":87,"url":88,"__hash__":89},"projects_de\u002Fprojects\u002Fde\u002Fhotel-checkin-platform.md","Digitales Hotel Check-in System",{"type":8,"value":9,"toc":55},"minimark",[10,15,19,23,48,52],[11,12,14],"h2",{"id":13},"projektübersicht","Projektübersicht",[16,17,18],"p",{},"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,20,22],{"id":21},"funktionen","Funktionen",[24,25,26,30,33,36,39,42,45],"ul",{},[27,28,29],"li",{},"Interaktiver Grundriss zur Zimmerauswahl mit Echtzeit-Verfügbarkeitsanzeige",[27,31,32],{},"Zimmertypübersicht mit Merkmalsvergleich (Standard, Deluxe, Suite)",[27,34,35],{},"Mehrseitiges Persönliche-Daten-Formular mit client-seitiger Validierung",[27,37,38],{},"Buchungsübersicht mit vollständiger Zusammenfassung vor der Bestätigung",[27,40,41],{},"Digitale Unterschrift mit Touchscreen-Unterstützung",[27,43,44],{},"Integration von AGB und Gästetaxe",[27,46,47],{},"Vollständig deutschsprachige Oberfläche im Corporate Design des Kunden",[11,49,51],{"id":50},"technische-highlights","Technische Highlights",[16,53,54],{},"Die Anwendung wurde mit Vue.js und einem PHP\u002FREST-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":56,"searchDepth":57,"depth":57,"links":58},"",2,[59,60,61],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},"web-app","Die Hotelgruppe checkte Gäste auf Papier ein. Lobby, Formular, Unterschrift, Zimmerschlüssel. Das sollte aufs Tablet, ohne Rezeptionistin am Block.","md",true,"\u002Fimages\u002Fprojects\u002Fhotel-checkin-platform.webp",[66,68,69,70],"\u002Fimages\u002Fprojects\u002Fhotel-checkin-personal-data.webp","\u002Fimages\u002Fprojects\u002Fhotel-checkin-room-selection.webp","\u002Fimages\u002Fprojects\u002Fhotel-checkin-floor-plan.webp","Papier-Check-in ist raus. Gäste gehen den Ablauf auf dem Tablet durch. Zimmer und Daten liegen ab Tag eins digital vor.",{},1,"\u002Fprojects\u002Fde\u002Fhotel-checkin-platform",{"title":6,"description":56},"hotel-checkin-platform","Ich baute die Vue-App: Grundriss zur Zimmerwahl, Formular, Übersicht, Unterschrift auf dem Touchscreen. Deutsch, im Corporate Design.","projects\u002Fde\u002Fhotel-checkin-platform",[80,81,82,83,84],"Vue.js","TypeScript","PHP","REST API","Hotel","Fantastische Zusammenarbeit mit einem hohem Grad an Zuverlässigkeit, Geschwindigkeit und Qualität.","Stephan Wiese","COO, bloc group",null,"yQlaCPk-GlcUZ3VS2WZAdGWA8Bt1TXHIW6WhO5Prbsk",{"id":91,"title":92,"body":93,"category":62,"challenge":129,"description":56,"extension":64,"featured":65,"image":88,"images":88,"impact":130,"meta":131,"navigation":65,"order":57,"path":132,"seo":133,"slug":134,"solution":135,"stem":136,"tagline":137,"tags":138,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":88,"__hash__":142},"projects_de\u002Fprojects\u002Fde\u002Fprinter-management.md","Drucker-Management Plattform",{"type":8,"value":94,"toc":124},[95,97,100,102,119,121],[11,96,14],{"id":13},[16,98,99],{},"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,101,22],{"id":21},[24,103,104,107,110,113,116],{},[27,105,106],{},"Geräteübersichts-Dashboard für alle Filialstandorte",[27,108,109],{},"CRUD-Operationen für Drucker, Einstellungen und Metadaten",[27,111,112],{},"OIDC\u002FOAuth-Authentifizierung mit Audience-Validierung und berechtigungsbasierter Zugriffskontrolle",[27,114,115],{},"Integration einer internen StencilJS UI-Komponentenbibliothek",[27,117,118],{},"Mock-Datenschicht zur Einhaltung von Lieferterminen während der API-Entwicklung",[11,120,51],{"id":50},[16,122,123],{},"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":56,"searchDepth":57,"depth":57,"links":125},[126,127,128],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},"Ein europäischer Händler brauchte eine Oberfläche für Drucker in allen Filialen: Gerät, Standort, Einstellungen. Vue war neu im Haus.","Die App ist live. Das Team arbeitet in Vue weiter. Fixes an der Komponentenbibliothek gelten auch für die anderen Frameworks im Haus.",{},"\u002Fprojects\u002Fde\u002Fprinter-management",{"title":92,"description":56},"printer-management","Ich baute die Vue-3-App gegen die interne Stencil-Bibliothek und eine OpenAPI-REST-API mit OIDC. Solange die API fehlte, lief die UI gegen Mocks. Das Team habe ich in Vue onboarded.","projects\u002Fde\u002Fprinter-management","Europaweites Gerätmanagement für den Handel",[139,81,140,83,141],"Vue 3","OIDC","StencilJS","9e8GfsaL-oO5BvEyprs_us7JR83kFChO0ynw4uBFk2M",{"id":144,"title":145,"body":146,"category":186,"challenge":187,"description":56,"extension":64,"featured":65,"image":188,"images":88,"impact":189,"meta":190,"navigation":65,"order":191,"path":192,"seo":193,"slug":194,"solution":195,"stem":196,"tagline":197,"tags":198,"testimonial":202,"testimonial_author":203,"testimonial_role":204,"url":205,"__hash__":206},"projects_de\u002Fprojects\u002Fde\u002Fimpax-tours.md","IMPAX Tours",{"type":8,"value":147,"toc":181},[148,150,153,157,174,178],[11,149,14],{"id":13},[16,151,152],{},"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 entwickelte ich die vollständige Web-Plattform als freiberuflicher Full-Stack-Entwickler über einen Zeitraum von 10 Monaten.",[11,154,156],{"id":155},"key-features","Key Features",[24,158,159,162,165,168,171],{},[27,160,161],{},"Standortbasierte Suche mit Filterfunktionen nach Destination, Unterkunftstyp und Verfügbarkeit",[27,163,164],{},"Integrierter Buchungsablauf mit Zahlungsintegration",[27,166,167],{},"Anbieter-Dashboard zur Verwaltung von Surf Camps und Backpacker-Lodges",[27,169,170],{},"Responsive Design für mobile und Desktop-Nutzer",[27,172,173],{},"Nachhaltigkeits-Sektion mit Informationen zu umweltbewusstem Reisen",[11,175,177],{"id":176},"technical-highlights","Technical Highlights",[16,179,180],{},"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":56,"searchDepth":57,"depth":57,"links":182},[183,184,185],{"id":13,"depth":57,"text":14},{"id":155,"depth":57,"text":156},{"id":176,"depth":57,"text":177},"booking-platform","IMPAX Tours brauchte eine Buchungsplattform für Surfcamps und Backpacker-Unterkünfte: Suche, Filter, Zahlung.","\u002Fimages\u002Fprojects\u002Fimpax-tours.webp","Die Plattform ist live. 10 Monate Freelancer-Arbeit. Zitat vom GF sitzt auf der Projektseite.",{},3,"\u002Fprojects\u002Fde\u002Fimpax-tours",{"title":145,"description":56},"impax-tours","Ich baute Backend in Laravel und Frontend in Vue. Standortsuche, Filter nach Destination und Typ, Buchung und Zahlung in einem Ablauf.","projects\u002Fde\u002Fimpax-tours","Surf- & Reisebuchungsplattform",[80,199,82,200,201],"Laravel","MySQL","Booking","Herr Enns hat seine Aufgaben zu unserer vollsten Zufriedenheit erledigt und unsere Erwartungen in jeder Hinsicht erfüllt. Wir bedauern es, ihn als Freelancer zu verlieren.","Andre Baumunk","Geschäftsführer, IMPAX Tours UG","https:\u002F\u002Fimpax-tours.com","Moo3ijZAkL2myoUGV3cwT0S_UBRLtZV9KoFo7USIZUk",[208,246,279],{"id":5,"title":6,"body":209,"category":62,"challenge":63,"description":56,"extension":64,"featured":65,"image":66,"images":242,"impact":71,"meta":243,"navigation":65,"order":73,"path":74,"seo":244,"slug":76,"solution":77,"stem":78,"tagline":6,"tags":245,"testimonial":85,"testimonial_author":86,"testimonial_role":87,"url":88,"__hash__":89},{"type":8,"value":210,"toc":237},[211,213,215,217,233,235],[11,212,14],{"id":13},[16,214,18],{},[11,216,22],{"id":21},[24,218,219,221,223,225,227,229,231],{},[27,220,29],{},[27,222,32],{},[27,224,35],{},[27,226,38],{},[27,228,41],{},[27,230,44],{},[27,232,47],{},[11,234,51],{"id":50},[16,236,54],{},{"title":56,"searchDepth":57,"depth":57,"links":238},[239,240,241],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},[66,68,69,70],{},{"title":6,"description":56},[80,81,82,83,84],{"id":91,"title":92,"body":247,"category":62,"challenge":129,"description":56,"extension":64,"featured":65,"image":88,"images":88,"impact":130,"meta":276,"navigation":65,"order":57,"path":132,"seo":277,"slug":134,"solution":135,"stem":136,"tagline":137,"tags":278,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":88,"__hash__":142},{"type":8,"value":248,"toc":271},[249,251,253,255,267,269],[11,250,14],{"id":13},[16,252,99],{},[11,254,22],{"id":21},[24,256,257,259,261,263,265],{},[27,258,106],{},[27,260,109],{},[27,262,112],{},[27,264,115],{},[27,266,118],{},[11,268,51],{"id":50},[16,270,123],{},{"title":56,"searchDepth":57,"depth":57,"links":272},[273,274,275],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},{},{"title":92,"description":56},[139,81,140,83,141],{"id":144,"title":145,"body":280,"category":186,"challenge":187,"description":56,"extension":64,"featured":65,"image":188,"images":88,"impact":189,"meta":309,"navigation":65,"order":191,"path":192,"seo":310,"slug":194,"solution":195,"stem":196,"tagline":197,"tags":311,"testimonial":202,"testimonial_author":203,"testimonial_role":204,"url":205,"__hash__":206},{"type":8,"value":281,"toc":304},[282,284,286,288,300,302],[11,283,14],{"id":13},[16,285,152],{},[11,287,156],{"id":155},[24,289,290,292,294,296,298],{},[27,291,161],{},[27,293,164],{},[27,295,167],{},[27,297,170],{},[27,299,173],{},[11,301,177],{"id":176},[16,303,180],{},{"title":56,"searchDepth":57,"depth":57,"links":305},[306,307,308],{"id":13,"depth":57,"text":14},{"id":155,"depth":57,"text":156},{"id":176,"depth":57,"text":177},{},{"title":145,"description":56},[80,199,82,200,201],[313,375,434,472,532,565,620,653,713],{"id":314,"title":315,"body":316,"category":62,"challenge":355,"description":56,"extension":64,"featured":356,"image":357,"images":358,"impact":361,"meta":362,"navigation":65,"order":57,"path":363,"seo":364,"slug":365,"solution":366,"stem":367,"tagline":368,"tags":369,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":373,"__hash__":374},"projects_de\u002Fprojects\u002Fde\u002Fgrimward-rpg.md","Grimward RPG",{"type":8,"value":317,"toc":350},[318,320,323,325,345,347],[11,319,14],{"id":13},[16,321,322],{},"Grimward ist ein kartenbasiertes Tabletop-Rollenspiel. Inspiriert vom D&D-5e-SRD behält es vertraute Mechaniken und streicht den Charakterbogen. Abstammung, Klasse, Subklasse, Waffenmeisterschaft und Zauber sind Karten – bereit, sobald man sie gelegt hat.",[11,324,22],{"id":21},[24,326,327,330,333,336,339,342],{},[27,328,329],{},"Heldenbauer: Ancestry, Klasse, Subklasse und Waffenmeisterschaft wählen",[27,331,332],{},"Sechs Kartentypen, die sich zu einem Charakter kombinieren",[27,334,335],{},"Regelwerk im Browser, auf Deutsch und Englisch",[27,337,338],{},"Karten für NSCs, Monster, Initiative, Trefferpunkte und magische Gegenstände",[27,340,341],{},"Trailer, Newsletter und Quick-Start-Guide für den Einstieg",[27,343,344],{},"Geplante Online-Plattform für Remote-Runden ohne physisches Deck",[11,346,51],{"id":50},[16,348,349],{},"Die Website läuft auf Nuxt mit i18n (Deutsch\u002FEnglisch) und Supabase. Der Heldenbauer führt durch die Kartenauswahl, das Regelwerk ist als Kapitelstruktur lesbar. Newsletter und Download-Link für den Quick Start sitzen auf derselben Oberfläche.",{"title":56,"searchDepth":57,"depth":57,"links":351},[352,353,354],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},"Wer in Fantasy-Rollenspiele wie D&D 5e einsteigen will, steht zuerst vor Charakterbögen, Regelwerken und Buchhaltung. Viele wollen die Welt und die Geschichte, nicht die Pflege von Tabellen.",false,"\u002Fimages\u002Fprojects\u002Fgrimward-rpg.webp",[357,359,360],"\u002Fimages\u002Fprojects\u002Fgrimward-rpg-builder.webp","\u002Fimages\u002Fprojects\u002Fgrimward-rpg-rules.webp","Spieler bauen Helden in Minuten und spielen ohne Stift. Vorbestellung Ende 2026. Remote-Play folgt, sobald die Plattform steht.",{},"\u002Fprojects\u002Fde\u002Fgrimward-rpg",{"title":315,"description":56},"grimward-rpg","Ich habe Grimward als kartenbasiertes TTRPG gebaut, nah an 5e, ohne Charakterbogen. Ancestry, Klasse, Subklasse, Waffen und Zauber liegen auf Karten. Die Website liefert Heldenbauer, Regelwerk, Trailer und Newsletter. Eine Online-Plattform für Remote-Runden ohne physisches Deck ist in Arbeit.","projects\u002Fde\u002Fgrimward-rpg","Kein Charakterbogen. Nur Karten.",[370,80,81,371,372],"Nuxt","Supabase","TailwindCSS","https:\u002F\u002Fgrimwardrpg.com","xZsvYjQ4jUzVhjc_uEYP6pG3CVT89fRURJj-Qh52eLw",{"id":376,"title":377,"body":378,"category":414,"challenge":415,"description":56,"extension":64,"featured":356,"image":88,"images":88,"impact":416,"meta":417,"navigation":65,"order":418,"path":419,"seo":420,"slug":421,"solution":422,"stem":423,"tagline":424,"tags":425,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":88,"__hash__":433},"projects_de\u002Fprojects\u002Fde\u002Fhealthcare-chat-integration.md","Healthcare PWA Chat-Integration",{"type":8,"value":379,"toc":409},[380,382,385,387,404,406],[11,381,14],{"id":13},[16,383,384],{},"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,386,22],{"id":21},[24,388,389,392,395,398,401],{},[27,390,391],{},"RocketChat via Docker in die bestehende Infrastruktur integriert",[27,393,394],{},"Automatische RocketChat-Nutzeranlage bei Registrierung und Login",[27,396,397],{},"NestJS-Proxy-Endpunkte für Chat-Raum-Erstellung, Nachrichtenhandling und Business-Logik",[27,399,400],{},"Eigene WebSocket-Client-Implementierung für Echtzeit-Messaging im React-Frontend",[27,402,403],{},"Jest-Unit-Tests für alle neuen NestJS-Endpunkte mit Dependency Injection und Module Mocking",[11,405,51],{"id":50},[16,407,408],{},"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":56,"searchDepth":57,"depth":57,"links":410},[411,412,413],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},"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.",{},7,"\u002Fprojects\u002Fde\u002Fhealthcare-chat-integration",{"title":377,"description":56},"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",[426,427,428,429,430,431,432],"React","NestJS","RocketChat","WebSockets","MongoDB","Jest","PWA","uh50KGasdHuZ1SL1rnvmvvsRlIepnNVNYz4pOrnwzno",{"id":5,"title":6,"body":435,"category":62,"challenge":63,"description":56,"extension":64,"featured":65,"image":66,"images":468,"impact":71,"meta":469,"navigation":65,"order":73,"path":74,"seo":470,"slug":76,"solution":77,"stem":78,"tagline":6,"tags":471,"testimonial":85,"testimonial_author":86,"testimonial_role":87,"url":88,"__hash__":89},{"type":8,"value":436,"toc":463},[437,439,441,443,459,461],[11,438,14],{"id":13},[16,440,18],{},[11,442,22],{"id":21},[24,444,445,447,449,451,453,455,457],{},[27,446,29],{},[27,448,32],{},[27,450,35],{},[27,452,38],{},[27,454,41],{},[27,456,44],{},[27,458,47],{},[11,460,51],{"id":50},[16,462,54],{},{"title":56,"searchDepth":57,"depth":57,"links":464},[465,466,467],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},[66,68,69,70],{},{"title":6,"description":56},[80,81,82,83,84],{"id":473,"title":474,"body":475,"category":514,"challenge":515,"description":56,"extension":64,"featured":356,"image":516,"images":517,"impact":520,"meta":521,"navigation":65,"order":191,"path":522,"seo":523,"slug":524,"solution":525,"stem":526,"tagline":527,"tags":528,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":530,"__hash__":531},"projects_de\u002Fprojects\u002Fde\u002Fhundefrisor-karlsruhe.md","Hundefrisör Karlsruhe",{"type":8,"value":476,"toc":509},[477,479,482,484,504,506],[11,478,14],{"id":13},[16,480,481],{},"Für den Hundesalon von Doreen Schauer-Baumgärtner in Karlsruhe-Grünwinkel entstand eine neue Website. Der Salon arbeitet ohne Zeitdruck, ein Hund nach dem anderen. Die Seite sollte das online genauso klar machen wie im Laden: ruhig, konkret, leicht zum Termin.",[11,483,22],{"id":21},[24,485,486,489,492,495,498,501],{},[27,487,488],{},"Leistungen von Baden und Schur bis Krallen, Ohren und Entfilzen",[27,490,491],{},"Preise nach Hundegröße, vom kleinen Hund bis XXL",[27,493,494],{},"Termin per WhatsApp mit vorausgefüllter Anfrage oder per Telefon",[27,496,497],{},"Standort mit Karte in der Durmersheimer Straße, Karlsruhe-Grünwinkel",[27,499,500],{},"Über-mich-Text der Inhaberin und echte Salonfotos",[27,502,503],{},"FAQ zu Ablauf, ängstlichen Hunden und Pflegeintervallen",[11,505,51],{"id":50},[16,507,508],{},"Gebaut mit Nuxt 4, Vue 3 und Tailwind. Local SEO sitzt in Titeln, Texten und der Seitenstruktur. Die WhatsApp-Anfrage nimmt Name, Rasse, Größe, Wunschleistung und Zeitfenster mit. Kein Buchungskalender – der Salon vergibt Termine nach Vereinbarung.",{"title":56,"searchDepth":57,"depth":57,"links":510},[511,512,513],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},"website","Der Hundesalon in Karlsruhe-Grünwinkel brauchte eine Website, die lokal auffindbar ist und den Weg zum Termin kurz hält. Leistungen, Preise und die Arbeitsweise der Inhaberin mussten auf einen Blick stehen.","\u002Fimages\u002Fprojects\u002Fhundefrisor-karlsruhe.webp",[516,518,519],"\u002Fimages\u002Fprojects\u002Fhundefrisor-karlsruhe-about.webp","\u002Fimages\u002Fprojects\u002Fhundefrisor-karlsruhe-location.webp","Wer in Karlsruhe einen Hundesalon sucht, landet auf Angebot, Preis und einer direkten Termin-Anfrage. WhatsApp und Telefon reichen für die Buchung.",{},"\u002Fprojects\u002Fde\u002Fhundefrisor-karlsruhe",{"title":474,"description":56},"hundefrisor-karlsruhe","Ich habe eine Nuxt-Website mit klarem Fokus auf Local SEO gebaut: Leistungen, Preise nach Größe, Standort in der Durmersheimer Straße, Termin per WhatsApp oder Telefon, Stimmen von Kundinnen. Die Seitenstruktur zielt auf Suchanfragen wie Hundefrisör Karlsruhe.","projects\u002Fde\u002Fhundefrisor-karlsruhe","Ruhige Hundepflege, lokal auffindbar",[370,80,81,372,529],"SEO","https:\u002F\u002Fhundefrisör-karlsruhe.de","i4OXa6UWlLAyl_MUs9HMWrEkgbYWQkhamsPFMN5eans",{"id":144,"title":145,"body":533,"category":186,"challenge":187,"description":56,"extension":64,"featured":65,"image":188,"images":88,"impact":189,"meta":562,"navigation":65,"order":191,"path":192,"seo":563,"slug":194,"solution":195,"stem":196,"tagline":197,"tags":564,"testimonial":202,"testimonial_author":203,"testimonial_role":204,"url":205,"__hash__":206},{"type":8,"value":534,"toc":557},[535,537,539,541,553,555],[11,536,14],{"id":13},[16,538,152],{},[11,540,156],{"id":155},[24,542,543,545,547,549,551],{},[27,544,161],{},[27,546,164],{},[27,548,167],{},[27,550,170],{},[27,552,173],{},[11,554,177],{"id":176},[16,556,180],{},{"title":56,"searchDepth":57,"depth":57,"links":558},[559,560,561],{"id":13,"depth":57,"text":14},{"id":155,"depth":57,"text":156},{"id":176,"depth":57,"text":177},{},{"title":145,"description":56},[80,199,82,200,201],{"id":566,"title":567,"body":568,"category":62,"challenge":607,"description":56,"extension":64,"featured":356,"image":88,"images":88,"impact":608,"meta":609,"navigation":65,"order":610,"path":611,"seo":612,"slug":613,"solution":614,"stem":615,"tagline":616,"tags":617,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":88,"__hash__":619},"projects_de\u002Fprojects\u002Fde\u002Fphotobooth-platform.md","Photobooth Plattform",{"type":8,"value":569,"toc":602},[570,572,575,577,597,599],[11,571,14],{"id":13},[16,573,574],{},"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,576,22],{"id":21},[24,578,579,582,585,588,591,594],{},[27,580,581],{},"Node.js-Disk-Watcher erkennt neue Aufnahmen von einer WLAN-SD-Karte in Echtzeit",[27,583,584],{},"Laravel-Backend für Bildaufnahme, Thumbnail-Generierung und Overlay-Komposition",[27,586,587],{},"WebSocket-Benachrichtigungen übertragen neue Bilder sofort an das Vue-Frontend",[27,589,590],{},"Overlay-Auswahl mit backend-gerenderter Vorschau in optimierter Auflösung",[27,592,593],{},"Vollauflösungs-Bildgenerierung mit gewähltem Overlay nach Bestätigung",[27,595,596],{},"PHP-Druckbefehl direkt aus Laravel an den angeschlossenen Event-Drucker",[11,598,51],{"id":50},[16,600,601],{},"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":56,"searchDepth":57,"depth":57,"links":603},[604,605,606],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},"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.",{},8,"\u002Fprojects\u002Fde\u002Fphotobooth-platform",{"title":567,"description":56},"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",[80,199,618,429,82],"Node.js","GibvTdS2uYoQAouAm3ZmM7NRYZ0gGYP2LaIJ5wWL7GQ",{"id":91,"title":92,"body":621,"category":62,"challenge":129,"description":56,"extension":64,"featured":65,"image":88,"images":88,"impact":130,"meta":650,"navigation":65,"order":57,"path":132,"seo":651,"slug":134,"solution":135,"stem":136,"tagline":137,"tags":652,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":88,"__hash__":142},{"type":8,"value":622,"toc":645},[623,625,627,629,641,643],[11,624,14],{"id":13},[16,626,99],{},[11,628,22],{"id":21},[24,630,631,633,635,637,639],{},[27,632,106],{},[27,634,109],{},[27,636,112],{},[27,638,115],{},[27,640,118],{},[11,642,51],{"id":50},[16,644,123],{},{"title":56,"searchDepth":57,"depth":57,"links":646},[647,648,649],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},{},{"title":92,"description":56},[139,81,140,83,141],{"id":654,"title":655,"body":656,"category":695,"challenge":696,"description":56,"extension":64,"featured":356,"image":697,"images":698,"impact":701,"meta":702,"navigation":65,"order":73,"path":703,"seo":704,"slug":705,"solution":706,"stem":707,"tagline":708,"tags":709,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":711,"__hash__":712},"projects_de\u002Fprojects\u002Fde\u002Fsay-no.md","No!",{"type":8,"value":657,"toc":690},[658,660,663,665,685,687],[11,659,14],{"id":13},[16,661,662],{},"No! ist ein persönliches Produkt – ein stiller Übungsraum für die Momente, in denen eine Grenze nötig war. Die App ersetzt keine Therapie. Sie hält fest, was passiert ist, wie es sich anfühlte und was man getan hat. Nach einer Woche werden Muster sichtbar.",[11,664,22],{"id":21},[24,666,667,670,673,676,679,682],{},[27,668,669],{},"Kurze Reflexionen in drei Schritten: Situation, Gefühl, Reaktion",[27,671,672],{},"Wöchentlicher Recap mit Zählung klarer Nos, teilweiser Nos und offener Momente",[27,674,675],{},"Optionale Erinnerung täglich und am Sonntag, lokal auf dem Gerät",[27,677,678],{},"Einträge nur auf dem Telefon, ohne Account und ohne Sync",[27,680,681],{},"Kurze Lesetexte zu Schuldgefühlen, Ich-Botschaften und innerem Druck",[27,683,684],{},"Marketing-Site mit Waitlist (Double-Opt-in) in Deutsch und Englisch",[11,686,51],{"id":50},[16,688,689],{},"Die Website läuft auf Nuxt 4 und Vue 3. Die iOS-App speichert Reflexionen lokal; es gibt keinen Journal-Server. Erinnerungen laufen auf dem Gerät, nicht über einen Push-Dienst, den ich betreibe. iOS zuerst, Android folgt, sobald die Übungsschleife auf einer Plattform sitzt.",{"title":56,"searchDepth":57,"depth":57,"links":691},[692,693,694],{"id":13,"depth":57,"text":14},{"id":21,"depth":57,"text":22},{"id":50,"depth":57,"text":51},"mobile-app","Grenzen setzen fällt im Alltag schwer: bei Aufgaben im Job, bei Plänen mit Familie und Freunden, bei Regeln, die man sich selbst gibt. Die meisten Apps in dem Feld wollen therapieren, coachen oder das Journal in die Cloud schieben. Es fehlte ein ruhiger Platz, der nur festhält, was passiert ist, und einmal die Woche daran erinnert, hinzusehen.","\u002Fimages\u002Fprojects\u002Fsay-no.webp",[697,699,700],"\u002Fimages\u002Fprojects\u002Fsay-no-coming-next.webp","\u002Fimages\u002Fprojects\u002Fsay-no-features.webp","Die App macht sichtbar, welche Grenz-Momente sich wiederholen. iOS-Beta über Waitlist mit Double-Opt-in, Android folgt. Reflexionen verlassen das Telefon nicht.",{},"\u002Fprojects\u002Fde\u002Fsay-no",{"title":655,"description":56},"say-no","Ich habe No! als Übungsraum auf dem Telefon gebaut. Nach einem schwierigen Moment schreibt man drei kurze Notizen: was passiert ist, wie es sich anfühlte, ob ein klares Nein, ein teilweises Nein oder noch keins kam. Jede Woche zählt die App aus den eigenen Einträgen klare Nos, teilweise Nos und offene Momente. Erinnerungen laufen lokal. Einträge bleiben auf dem Gerät – kein Account, kein Journal-Server. Die Website say-no.app erklärt die Schleife und sammelt die Waitlist für die iOS-Beta.","projects\u002Fde\u002Fsay-no","Übung für gesunde Grenzen",[370,80,81,372,710],"iOS","https:\u002F\u002Fsay-no.app","prCNhe_AriJuFULRg3C-u9LGJv6yE2QVorTlLDJnnLY",{"id":714,"title":715,"body":716,"category":62,"challenge":758,"description":56,"extension":64,"featured":356,"image":759,"images":760,"impact":763,"meta":764,"navigation":65,"order":765,"path":766,"seo":767,"slug":768,"solution":769,"stem":770,"tagline":771,"tags":772,"testimonial":88,"testimonial_author":88,"testimonial_role":88,"url":774,"__hash__":775},"projects_de\u002Fprojects\u002Fde\u002Fwichtel-wunsch.md","Wichtel-Wunsch",{"type":8,"value":717,"toc":753},[718,720,723,725,748,750],[11,719,14],{"id":13},[16,721,722],{},"Wichtel-Wunsch ist ein persönliches Nebenprojekt — eine mobile-first Progressive Web App zum Organisieren von Wichtel-Events und Verwalten von Wunschlisten. Es löst das Koordinationsproblem beim Schenken, ohne auf Gruppenchats oder Tabellen angewiesen zu sein.",[11,724,156],{"id":155},[24,726,727,730,733,736,739,742,745],{},[27,728,729],{},"Wichtel-Events erstellen und per Einladelink teilen",[27,731,732],{},"Persönliche Wunschlisten mit optionalen Shop-Links für jeden Teilnehmer",[27,734,735],{},"Alle Wunschlisten für alle Event-Mitglieder sichtbar – kein Rätselraten mehr",[27,737,738],{},"Google OAuth Authentifizierung via Supabase Auth",[27,740,741],{},"Installierbare PWA mit Web-Push-Benachrichtigungen",[27,743,744],{},"DSGVO-konformer Datenexport (Art. 15)",[27,746,747],{},"Vollständig responsives, mobile-first Design",[11,749,177],{"id":176},[16,751,752],{},"Entwickelt mit Nuxt 4 und Vue 3 im Frontend, backed by Supabase (PostgreSQL) für Datenbank und Authentifizierung. Jede Tabelle ist durch Row Level Security abgesichert. Das Projekt umfasst eine umfangreiche Testsuite: 163 Datenbanktests mit pgTAP für Schema-Constraints, RLS-Regeln und Anwendungsverhalten, sowie E2E-Tests mit Cypress.",{"title":56,"searchDepth":57,"depth":57,"links":754},[755,756,757],{"id":13,"depth":57,"text":14},{"id":155,"depth":57,"text":156},{"id":176,"depth":57,"text":177},"Wichteln zu organisieren ist aufwendig – wer kauft für wen, was wünscht sich jeder eigentlich, und wie koordiniert man das alles, ohne die Überraschung zu verderben? Bestehende Tools sind entweder überladen oder erfordern Accounts auf Drittplattformen, denen viele Nutzer nicht vertrauen.","\u002Fimages\u002Fprojects\u002Fwichtel-wunsch.webp",[759,761,762],"\u002Fimages\u002Fprojects\u002Fwichtel-wunsch-event.webp","\u002Fimages\u002Fprojects\u002Fwichtel-wunsch-admin.webp","Eine saubere, installierbare PWA, die Wichtel-Events unkompliziert macht. Die App ist DSGVO-konform mit Datenexport-Funktion, durch Row Level Security auf jeder Datenbanktabelle abgesichert und durch 163 automatisierte Datenbanktests für Schema, RLS-Policies und Geschäftslogik abgedeckt.",{},9,"\u002Fprojects\u002Fde\u002Fwichtel-wunsch",{"title":715,"description":56},"wichtel-wunsch","Ich habe Wichtel-Wunsch als mobile-first Progressive Web App mit Nuxt 4, Vue 3 und Supabase entwickelt. Nutzer können Events erstellen, Freunde per Einladelink hinzufügen und persönliche Wunschlisten mit optionalen Shop-Links pflegen. Alle Wunschlisten der Teilnehmer sind innerhalb des Events sichtbar, sodass niemand mehr raten muss. Die Authentifizierung erfolgt via Google OAuth, und die App ist auf jedem Gerät installierbar.","projects\u002Fde\u002Fwichtel-wunsch","Wichteln & Wunschlisten als PWA",[370,80,81,371,773,372,432],"PostgreSQL","https:\u002F\u002Fwichtel-wunsch.app","ikUXldQqgoCUkuI1tLtj56mKjiQiTBa4X3FYEOFXDXw",1791354998852]