Projects

See an overview over all my projects, professional or hobby.

Featured

 -  107

Personal Portfolio (this thing)

After postponing the creation of a personal website for a long time, I finally decided to build a portfolio site showcasing my skills, experience, and projects. Initially, I considered several options, but ultimately, I teamed up with friends—a designer and a frontend developer—and we decided to use Next.js for the project. We chose Vercel for hosting and Supabase for the database, later integrating Payload CMS directly into the Next.js framework. Inspired by a beautiful template from Chronark, I quickly created the first version of the site, focusing on clean architecture and error handling with Effect.

#Static Side Generation
#Fullstack
#Content Management System
#UI Components
#Responsive UI
#Web App
#CLEAN
 -  9

Web App for Payment Notifications

The project involved building a platform for generating and sending payment request links via SMS or email. It featured client management, message templating using Pug and Mustache, and responsive email design with MJML. A PCI-DSS-compliant payment provider was integrated, and payment status updates were handled via callbacks and a background scheduler. The system included a transaction dashboard and SMS integration via Twilio. Admins could manage users through a customized Keycloak interface. Built with microservices, the platform used Nest.JS, MySQL, Prisma, and Redis, with a Next.JS frontend and React components.

 -  18

Online Payment Gateway

The project aimed to develop a PCI-DSS compliant API to integrate multiple payment providers via a unified interface. Using the Adapter Pattern, I standardized various data models and integration methods while avoiding code duplication. Nest.JS was used for dependency injection, facilitating easy addition of new providers. The system supported bank transfers, credit card payments via tokenization, and frontend integration with iframes or JS SDKs. Built with microservices and Redis communication, the platform processed thousands of daily transactions. For monitoring, we used Grafana, Prometheus, and Sentry, and developed extensive API documentation with Docusaurus. I led the development team.

 -  38

Sales Agency Landing Page

I developed a modern, responsive-first landing page for Exzellent Marketing & Vertrieb. After evaluating ready-made solutions, we opted for a custom-built page to meet the company’s need for flexibility and unique design. I collaborated closely with the client on content, design, and frequent iterations. Using the Astro framework, I ensured fast load times, achieving a perfect SEO score of 100. Accessibility and responsiveness were prioritized, with fluid layouts for tablets and a separate desktop version. Hosted on Netlify, the site featured integrated forms with GDPR-compliant handling for job applications.

Professional Projects

 - today 41

Saw Band Recommendation App for Industrial Machinery

For this project, I developed an iOS and Android app that provides automated saw band and machine configuration recommendations based on customers' cutting requirements. The app’s foundation was a complex Excel spreadsheet with numerous tables and calculations. I collaborated closely with the client to transform the data into database models and algorithms, ensuring accurate results. The app was designed using Figma and Material UI to match the client’s corporate identity. The backend was built on Firebase with Cloud Functions and Datastore for storage and computation. The frontend was developed using Flutter and Riverpod, ensuring a smooth user experience.

#Fullstack
#App
#UI Components
#Conceptualization
#Design
 - today 15

Inventory and Reorder System

I have led the development of an inventory management and automated reorder system for industrial machines. The system, built with Nest.JS, features a Flutter app for tracking warehouse product withdrawals and a React-based admin portal using Material UI for managing stock, users, and product data. I oversaw the project from concept to execution, including technology decisions, design, and delegation. The system uses CQRS for event logging and automated restocking when critical levels are reached. I also developed a CI pipeline and integrated a Zebra smartphone scanner via Kotlin for the Flutter app. The project is now in the final testing phase.

 - 

Client Management for Financial Advisory

This project involved developing a classic desktop application using Electron and React, with Microsoft's Fluent UI as the design system. The application allows users to manage client data, such as income, expenses, short- and long-term asset protections, and suggested adjustments. It also calculates asset coverage and automatically generates presentations using Reveal.js, which serve as visual aids for client consultations. I took over the project from a former colleague, working closely with the client to gather requirements and estimate the scope. After a brief onboarding period, I implemented the requested changes and coordinated the review phase in an iterative process.

 -  6

Event Management Landing Page

I developed a media-rich landing page for an event management company. Collaborating closely with the designer, I implemented a mobile- and desktop-friendly design using Next.JS for dynamic elements and local content management. The site supported multilingual content and emphasized accessibility (WCAG) with proper use of alt and aria tags. Performance optimization was crucial, especially with large, animated backgrounds and blur effects. Shifting to an SVG-based blur filter improved performance temporarily, but animations caused further issues. The project is currently paused due to pending content and further optimization.

 - 

Security Audit Review

I conducted a security audit of an aging application to identify vulnerabilities. Using tools like npm, Snyk, and system-specific security notes (e.g., Keycloak), I audited dependencies and systems, planned necessary updates, and implemented them. Additionally, I performed an OWASP-based security scan, addressing required adjustments in both frontend and backend. Finally, I coordinated a Greybox penetration test with an external agency, setting up a QA environment and overseeing the process. Post-test, I implemented final adjustments, conducted a recheck, and ensured the successful completion of the audit.

 - 

Industrial Product Recommendations

I led the maintenance and development of an existing product recommendation system for industrial machines. The system featured a multi-language web app with metric and imperial support, a MySQL database, PHP backend, LitElement frontend, ReactNative app, and OAuth-based authentication. After inheriting the undocumented project, I set up a local Docker environment and coordinated bug fixes and feature development with a team. We implemented a staging system and integrated Sentry for error tracking. Additionally, I led the rewrite of the outdated NativeScript app in Flutter, using GetX for state management, and ensured quality through coordinated feedback and E2E testing.

 - 

Neobroker Web App

I helped rewrite a web application for a Neo-Broker, using a KANBAN-SCRUM hybrid workflow. Tasks were derived, prioritized, and implemented based on the existing system, with regular TSD meetings and retros for process improvements. The project used Next.JS alongside an in-house Tailwind-based component library, following the CLEAN architecture for testability and reusability. I focused on core features like authentication, authorization, API clients, and data streams, ensuring they were reusable and well-documented. Additionally, I supported and expanded the component library and optimized the build process.

 - 

Headless CMS Frontend Migration

I led the migration of an existing frontend to a headless CMS (Contentful), focusing on reusable components, SEO, and accessibility optimizations. We created configurable data models in Contentful and used Twig for SSR to render HTML. I built a style library, ensuring reusability for an upcoming shift to Nuxt.js for improved rendering techniques. I also developed a Webpack-based build system to integrate Vue applications with Twig, optimizing bundle sizes and loading assets via CDN. This improved the Lighthouse performance score from 35 to over 70. I documented and presented the system firm-wide after completion.

 - 

Subscription Configurator Redesign

LILLYDOO's diaper subscription configurator was redeveloped using Vue 2.6 and Redux, focusing on mobile-first design due to high mobile usage. A reusable Vue component library was created with Rollup, GitLab Pipelines, and Lerna, documented in Storybook, and visually tested with Chromatic. Accessibility and SEO were prioritized, with Jest used for functionality tests. The project followed SCRUM with regular design-team feedback. Post-launch, user behavior tracking was integrated via Google Analytics, along with A/B testing using Google Optimize. Sentry was implemented for error tracking, GDPR compliance, and performance monitoring. The configurator now serves hundreds of users daily.

 - 

Sales Price Calculator

I developed a tablet-optimized price calculator web application for an industrial client. The app featured a login, a price calculation tool, a feedback section, and an admin area for user management. I collaborated with the client on concept, design, and project planning, using Figma and Material UI for the interface. The backend was built with Nest.JS, MySQL, and TypeORM, while the frontend used React and Material UI. I implemented a component-based approach documented in Storybook and set up a mock API server for parallel development. The app now serves 200 internal users.

 - 

Payout Management System

I led the development of a payout management system that allowed users to manage website users, process payouts, and check status updates. Initially, I coordinated the frontend development using React and Ant Design, managing freelancers and conducting code reviews. Midway through, I took over backend development, migrating from AWS Lambda and Cognito to a Dockerized system on GCP. I implemented a self-hosted Keycloak for user management and migrated functions to an Express.js API. Working with a DevOps engineer and frontend developer, we met the client’s deadline, and the system now serves 1,000 users.

 - 

Account Switching Service Redesign

I worked on the complete frontend redevelopment of fino digital GmbH's account switching service using Angular. With a focus on mobile responsiveness, the service utilized components from a UI library based on Bulma. A micro-frontend approach was used to integrate a separate login module, allowing seamless UX without redirects. Error handling was improved with Sentry integration for both automatic and user-reported issues. The service supported whitelabeling with customized styles for different clients. End-to-end testing was done with endtest.io. The project followed a SCRUM workflow with 14-day sprints and a cross-functional team.

 - 

Prefabricated Homes Customer Portal

I worked on an existing customer portal for a prefabricated home company, hosted in TYPO3 with a PHP REST API, customer CRM integration, and an Angular frontend. The portal served three user types: clients tracking home construction, project managers overseeing builds, and homeowners accessing post-construction services. I focused on bug fixing and performance optimization, ensuring data was only loaded when needed. I also collaborated on the new system's design and concept, creating user stories and developing the interface in Figma. The portal, used by thousands of customers, was maintained in coordination with another agency.

 - 

Financial Manager Web App

I developed the web application for Finanzmanager, a tool that analyzed users' bank transactions to assess and improve their financial situation. The project utilized a microservice architecture, with services for account connections, contract analysis, and the financial manager API, built in Go and TypeScript with MongoDB and GraphQL (Apollo). I led the frontend development in Angular, creating custom styles and separate builds for mobile and desktop. As the project transitioned from B2C to B2B, I collaborated with a major bank to integrate contract analysis into their online banking platform. The team grew from 4 to 12, transitioning from Kanban to SCRUM.

 - 

Tenant Management System

I developed a tenant management system to handle fino's growing number of JSON configurations for whitelabel clients. To make the process accessible for non-technical users, I implemented a self-hosted CMS using Directus, set up in Kubernetes with the help of a DevOps engineer. I imported configurations via a node script and built an adapter to load them at build-time for frontend styling. Later, I created a Koa-based API for backend services to access configurations. However, due to service downtimes and infrastructure complexity, the approach was discontinued after repeated issues during production builds.

 - 

UI Component Library

I led the development of a component library following Atomic Design principles to standardize UI elements across a growing application landscape. Built with Angular and based on Bulma, the library included both atomic components (e.g., buttons, input fields) and more complex elements like an autocomplete bank search and translation module. Components were documented in Storybook and published via GitLab pipelines and Lerna for versioning and dependency management. Despite challenges in integrating the library into older projects, regular training, pair programming, and meetings helped establish it as the standard for new and existing applications.

 - 

Contract Comparison Pilot

I worked on a pilot project in collaboration with a major German bank to integrate a contract comparison tool into their online banking system. The frontend was built with AngularJS as a whitelabel solution. We operated out of a coworking space in Hamburg, fostering a dynamic, collaborative environment with frequent meetings (2-3 times per week) and close interaction with the client. This agile setup made the project feel highly responsive and adaptable. Our small team consisted of two developers and a product owner, working closely with the bank throughout the process.

 - 

Account Switching Service

I worked on the existing account switching service, which included an AngularJS frontend, PHP backend, Java service for transaction queries and email, and MongoDB. This project helped me build foundational frontend skills, such as using Gulp and Webpack, managing state, and integrating with REST backends. My primary tasks involved bug fixing and feature development, including creating a digital signature feature that synchronized between mobile and desktop via QR codes and long polling. The project followed a KANBAN model, and I benefited greatly from mentorship within the team of 10-15 developers.

 - 

Market Information System Redesign

I worked on rewriting an outdated ASP.NET-based market information system, which previously rendered all views server-side, including dashboards and graphs. This limited interactivity and responsiveness, prompting the decision to modernize the system with client-side technologies. Alongside two developers, we chose React and adopted a test-driven development approach using Mocha and Chai. Although the project was eventually discontinued due to time constraints, it provided valuable experience in client-side programming and sparked my interest in modern frontend development.

Hobby Projects

 -  49

munchlab

You are hungry but are too lazy to go to the supermarket? Then try munchlab! Tell munchlab what ingredients you have and munchlab will find the perfect recipes for you. You can also control the app with your voice (on Chrome) and in your native language.

#Frontend
#REST
#Responsive UI
#Voice Control
#UI Components
#Web App
 -  15

@aurally/fancy-search

@aurally/fancy-search enhances your app’s search functionality by integrating speech recognition, multi-search capabilities, and automatic result matching. It allows users to perform searches via speech input, triggered automatically when focused, or by typing multiple values separated by commas. Search results are ranked and categorized as exact, close, or no match based on the accuracy of the results. The library is highly customizable, allowing developers to define their search and formatting functions, set recognition language, and easily disable speech recognition if needed. Fancy Search streamlines search processes for a more intuitive and efficient user experience in web applications.

 -  5

@aurally/speech-control

@aurally/speech-control is a JavaScript class designed to handle microphone permissions and manage speech input with ease. It offers an observable-based API to monitor user speech, enabling apps to listen for specific words or phrases and react accordingly. The library provides robust permission handling, allowing developers to request microphone access directly or wait for user permission. Additionally, Speech Control features customizable notifications to inform users when the app is listening. The class includes methods to check if speech recognition is supported, stop recognition, and adjust recording language settings, making it a powerful tool for integrating voice control into web applications.