[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portfolio-en":3},[4,77,137,192,251],{"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_en/en/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},"project-overview","Project Overview",[16,17,18],"p",{},"IMPAX Tours is an online platform for booking outdoor travel experiences, specialising in surf camps and backpacker lodges worldwide. On behalf of IMPAX Tours UG, we developed the complete web platform over a period of 10 months.",[11,20,22],{"id":21},"key-features","Key Features",[24,25,26,30,33,36,39],"ul",{},[27,28,29],"li",{},"Location-based search with filters for destination, accommodation type, and availability",[27,31,32],{},"Integrated booking flow with payment processing",[27,34,35],{},"Provider dashboard for managing surf camps and backpacker lodges",[27,37,38],{},"Responsive design for mobile and desktop users",[27,40,41],{},"Sustainability section with information on eco-conscious travel",[11,43,45],{"id":44},"technical-highlights","Technical Highlights",[16,47,48],{},"The platform was built with a Laravel backend and Vue.js frontend. The architecture is designed for scalability and supports multiple providers with their own content management. The search functionality is powered by a database-driven filtering solution with geographical criteria.",{"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 needed a scalable platform where travelers could find and directly book surf camps and backpacker lodges worldwide – including search, destination filtering, and payment integration.","md",true,"/img/projects/impax-tours.webp","The platform launched successfully, enabling travelers worldwide to find and book outdoor accommodations. The project was completed over 10 months and received the highest praise from the managing director.",{},1,"/en/portfolio/impax-tours",{"title":6,"description":50},"impax-tours","We built the entire platform as a full-stack development team using Laravel as the backend and Vue.js as the frontend. The solution includes location-based search, filters by destination and accommodation type, and a fully integrated booking and payment flow.","en/portfolio/impax-tours","Surf & travel booking platform",[71,72,73,74,75],"Vue.js","Laravel","PHP","MySQL","Booking","OmTV8vlTdltu4wC0c6Lsu1BBP8Tacy2fASSgxAk03NM",{"id":78,"title":79,"body":80,"category":122,"challenge":123,"description":50,"extension":58,"featured":59,"image":124,"impact":125,"meta":126,"navigation":59,"order":51,"path":127,"seo":128,"slug":129,"solution":130,"stem":131,"tagline":132,"techStack":133,"__hash__":136},"portfolio_en/en/portfolio/hotel-checkin-platform.md","Digital Hotel Check-in System",{"type":8,"value":81,"toc":117},[82,84,87,89,112,114],[11,83,14],{"id":13},[16,85,86],{},"This project involved building a fully digital guest check-in and room booking system for a hospitality group, deployed on in-lobby tablets. The application walks guests through the entire check-in process in a step-by-step flow, from room selection to booking confirmation.",[11,88,22],{"id":21},[24,90,91,94,97,100,103,106,109],{},[27,92,93],{},"Interactive floor plan for per-room selection, with real-time availability colour coding",[27,95,96],{},"Room type overview with feature comparison (Standard, Deluxe, Suite)",[27,98,99],{},"Multi-field personal data form with client-side validation (name, contact, passport, vehicle registration)",[27,101,102],{},"Booking overview screen displaying a full summary before confirmation",[27,104,105],{},"Digital signature capture with touchscreen support",[27,107,108],{},"AGB (terms & conditions) and Gästetaxe (tourist tax) integration",[27,110,111],{},"Fully German-language UI matching the client's brand identity",[11,113,45],{"id":44},[16,115,116],{},"The application was built with Vue.js and a PHP/REST API backend. The interactive floor plan renders room availability dynamically based on backend data, with colour states for available, occupied, and premium rooms. The multi-step flow uses client-side state management to preserve guest data across steps without premature server calls.",{"title":50,"searchDepth":51,"depth":51,"links":118},[119,120,121],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"web-app","A hospitality group needed to replace their paper-based guest check-in process with a modern, tablet-friendly web application that guides guests through room selection, personal data entry, and booking confirmation — all without staff involvement.",null,"The system eliminated paper-based check-in entirely, reduced average check-in time significantly, and enabled the hotel to manage room availability and guest data digitally from day one.",{},"/en/portfolio/hotel-checkin-platform",{"title":79,"description":50},"hotel-checkin-platform","We developed a multi-step web application with Vue.js featuring a dynamic room selection screen with interactive floor plan, a personal data form with validation, a booking overview with digital signature, and a full German-language UI tailored to the client's brand.","en/portfolio/hotel-checkin-platform","Digital hotel check-in system",[71,134,73,135],"TypeScript","REST API","GJYgC8kWO4_dgNAmPcs2L4joSQKszm3QOPZhPKACvIs",{"id":138,"title":139,"body":140,"category":122,"challenge":176,"description":50,"extension":58,"featured":177,"image":124,"impact":178,"meta":179,"navigation":59,"order":180,"path":181,"seo":182,"slug":183,"solution":184,"stem":185,"tagline":186,"techStack":187,"__hash__":191},"portfolio_en/en/portfolio/printer-management.md","Printer Management Platform",{"type":8,"value":141,"toc":171},[142,144,147,149,166,168],[11,143,14],{"id":13},[16,145,146],{},"This project, delivered at CAMAO Tec (later rebranded to mmmake), involved building a printer management web application for a multi-store European retailer. The goal was to give operations teams a clear overview of all physical printer devices across their European store network, including device settings, physical locations, and associated metadata.",[11,148,22],{"id":21},[24,150,151,154,157,160,163],{},[27,152,153],{},"Device overview dashboard across all store locations",[27,155,156],{},"CRUD operations for printer devices, settings, and metadata",[27,158,159],{},"OIDC/OAuth authentication with audience validation and permission-based access control",[27,161,162],{},"Integration with an internal StencilJS UI component library",[27,164,165],{},"Mock-data layer to maintain delivery pace during API development",[11,167,45],{"id":44},[16,169,170],{},"The application was built on Vue 3, marking the company's first adoption of the framework. The REST API followed OpenAPI Spec 3 and required implementing a full OIDC authentication flow against an internal identity provider. Where the product design diverged from the component library, we worked directly with the library owners to identify and resolve issues — fixes that propagated to all framework consumers of the library, including native web components.",{"title":50,"searchDepth":51,"depth":51,"links":172},[173,174,175],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"A multi-store European retailer needed a web interface to manage physical printers across all their locations — covering device overviews, settings, location assignment, and metadata. The project also served as the company's first introduction of Vue into their tech stack.",false,"The application launched successfully and became the foundation for future feature extensions. The team was fully onboarded into Vue with a solid understanding of component architecture and ecosystem best practices. Bug fixes contributed back to the shared component library benefited all downstream framework consumers.",{},3,"/en/portfolio/printer-management",{"title":139,"description":50},"printer-management","We built the web application using Vue 3 and an internal StencilJS-based UI component library, connected to a REST API following OpenAPI Spec 3 with OIDC authentication. We implemented OAuth-compliant auth including audience and permission checks, bridged gaps where the design diverged from the component library, and kept delivery on schedule by using mock data and mock services while the API was still in development. We also onboarded the development team into Vue, coaching best practices in component design and the Vue ecosystem.","en/portfolio/printer-management","Europe-wide device management for retail",[188,134,189,135,190],"Vue 3","OIDC","StencilJS","vVEwUzaMymmVApC6X3Iqp0Ku8KdWjWdl2moP3zHn98g",{"id":193,"title":194,"body":195,"category":231,"challenge":232,"description":50,"extension":58,"featured":177,"image":124,"impact":233,"meta":234,"navigation":59,"order":235,"path":236,"seo":237,"slug":238,"solution":239,"stem":240,"tagline":241,"techStack":242,"__hash__":250},"portfolio_en/en/portfolio/healthcare-chat-integration.md","Healthcare PWA Chat Integration",{"type":8,"value":196,"toc":226},[197,199,202,204,221,223],[11,198,14],{"id":13},[16,200,201],{},"This NDA-protected project involved integrating a real-time chat system into an existing React progressive web application serving clients and healthcare professionals. The app managed user data for both roles and required a communication channel between them. The project scope was narrowly focused: select the right chat technology and implement it end-to-end under a tight deadline.",[11,203,22],{"id":21},[24,205,206,209,212,215,218],{},[27,207,208],{},"RocketChat integrated via Docker into the existing infrastructure",[27,210,211],{},"Automatic RocketChat user provisioning on app registration and login",[27,213,214],{},"NestJS proxy endpoints for chat-room creation, message handling, and business logic",[27,216,217],{},"Custom WebSocket client implementation for real-time messaging in the React frontend",[27,219,220],{},"Jest unit tests on all new NestJS endpoints using dependency injection and module mocking",[11,222,45],{"id":44},[16,224,225],{},"The backend was generated with Amplication and already used MongoDB, which made it straightforward to share the same database instance with RocketChat. Rather than using RocketChat's pre-built UI, we implemented the WebSocket connection manually to match the client's existing interface design. NestJS's module system and dependency injection made it easy to write isolated unit tests for the new proxy endpoints, providing the first test coverage the project had seen.",{"title":50,"searchDepth":51,"depth":51,"links":227},[228,229,230],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"integration","A healthcare web application connecting clients and doctors was missing its core communication feature — a real-time user chat — with a hard deadline approaching. The existing codebase was a React PWA with a NestJS/Amplication backend, both lacking tests or quality gates. The client had no tooling strategy and needed both a technology recommendation and a full implementation.","The chat feature was delivered on time and fully integrated into the existing application. NestJS endpoints were covered with Jest unit tests — the first quality-assurance layer in the project. The solution kept user management centralised and real-time messaging performant through a direct WebSocket connection.",{},4,"/en/portfolio/healthcare-chat-integration",{"title":194,"description":50},"healthcare-chat-integration","We researched and evaluated chat solutions with React support (including GetStream.io and RocketChat), presented findings to the client, and led the integration of RocketChat. We extended the existing Docker Compose setup to run RocketChat against the project's existing MongoDB instance, disabled self-registration, and implemented automatic user creation in RocketChat on login and registration. Proxy endpoints were built in NestJS to intercept chat-room creation and messaging with business logic, covered by Jest unit tests. On the frontend, we implemented a custom RocketChat WebSocket connection from scratch to enable real-time messaging within the app's existing UI design.","en/portfolio/healthcare-chat-integration","Real-time chat for a client-doctor web app",[243,244,245,246,247,248,249],"React","NestJS","RocketChat","WebSockets","MongoDB","Jest","PWA","Ctsb1V-KJKH8K0zep8Unq03XQkRDR6Or5RxVYHTioRo",{"id":252,"title":253,"body":254,"category":122,"challenge":293,"description":50,"extension":58,"featured":177,"image":124,"impact":294,"meta":295,"navigation":59,"order":296,"path":297,"seo":298,"slug":299,"solution":300,"stem":301,"tagline":302,"techStack":303,"__hash__":305},"portfolio_en/en/portfolio/photobooth-platform.md","Photobooth Platform",{"type":8,"value":255,"toc":288},[256,258,261,263,283,285],[11,257,14],{"id":13},[16,259,260],{},"This project involved rebuilding a photobooth software platform from the ground up for a company that rents out photobooths — including hardware, personnel, custom overlays, and software — for corporate events and live occasions. The existing MVP covered only the bare minimum and was not fit for real-world, high-volume use.",[11,262,22],{"id":21},[24,264,265,268,271,274,277,280],{},[27,266,267],{},"Node.js disk watcher detecting newly captured images from a WiFi SD card in real time",[27,269,270],{},"Laravel backend for image ingestion, thumbnail generation, and overlay compositing",[27,272,273],{},"WebSocket notifications pushing new images to the Vue frontend instantly",[27,275,276],{},"Overlay selection with backend-rendered preview images (optimised resolution for speed)",[27,278,279],{},"Full-resolution image generation with selected overlay on confirmation",[27,281,282],{},"PHP print command dispatched from Laravel to the connected event printer",[11,284,45],{"id":44},[16,286,287],{},"The core challenge was achieving real-time responsiveness without polling. The combination of a Node.js file watcher and a Laravel WebSocket broadcaster meant the frontend was always up to date the moment a photo landed on disk. Thumbnail generation on the backend was essential to keep the frontend snappy — loading full-resolution images in a live event context would have caused noticeable delays. The Laravel/Vue stack replaced an unmaintainable plain PHP/JS codebase with a clean, framework-structured application ready for future extensions.",{"title":50,"searchDepth":51,"depth":51,"links":289},[290,291,292],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":44,"depth":51,"text":45},"A photobooth rental company had an MVP built in plain PHP and HTML/JS with no framework, no live image loading, and performance unsuitable for live events with high photo volumes. Freshly captured photos weren't displayed in real time, the codebase wasn't maintainable, and the frontend lacked the reactivity needed for a smooth booth experience.","The platform replaced a fragile MVP with a robust, maintainable application capable of handling high-volume live events. Real-time image delivery and instant print dispatch gave booth operators and event guests a smooth, responsive experience. The Laravel/Vue stack provided a clean foundation for future feature development.",{},5,"/en/portfolio/photobooth-platform",{"title":253,"description":50},"photobooth-platform","We rewrote the platform with a Laravel backend and Vue.js frontend. A Node.js script continuously scanned the target disk for new images captured via a WiFi-enabled SD card. On detection, it notified the Laravel backend, which processed each image — generating thumbnails for fast preview and overlay-composited versions for selection. Once a photo and overlay were chosen, Laravel generated the final full-resolution image and dispatched a PHP print command directly to the connected printer. The frontend received real-time updates via WebSocket, displaying new photos instantly without any manual reload.","en/portfolio/photobooth-platform","Real-time photo processing for live events",[71,72,304,246,73],"Node.js","srOYV6gWybOqamSq7qZtjNehbQ-msgSAGfeNEMGljmc"]