Front-end lead, architecture consulting and further development of the ticket booking process
March 2024 | Transportation
As part of this project, a detailed analysis of the existing technology and architecture of a micro frontend was carried out in order to develop targeted improvement proposals. These proposals were realized by supporting and implementing code refactorings in the team, which led to a demonstrable increase in quality and performance.
Another focus was the implementation of a proof of concept for a mono-repository solution for the national ticket booking route of the SBB, in order to optimize the efficiency and scalability of the system. In addition, the team was supported in the internationalization of the frontend by using modern tools such as CrowdIn and Next Intl. Particular attention was paid to a flexible and future-proof solution.
A linting framework was developed that takes into account both the specific dynamics within the team and current best practices. This framework was successfully integrated into the development process, both as a CI task and within the developer workspaces. Finally, numerous exchange meetings were organized and close involvement in the organization was ensured in order to promote a uniform technology in the frontend area while at the same time maintaining the autonomy of the teams.
Multi-brand customer and support portals for electricity and gas suppliers
June 2022 | Energy
My role involved architectural consulting within the ReactJS framework for a range of web applications developed for the third-party market. This included both portals for end customers and for internal service providers, such as support staff. A particular challenge was to design the applications as white-label products that were flexible enough to support a wide range of brand customizations – from color schemes and logos to specific functionalities.
The scalability and adaptability of these platforms were crucial to making them attractive to different brands and companies. The technological basis that I developed for the customer advisor portal served as a template and inspiration for other teams for their own projects. In addition, I was responsible for developing reusable components that were used across individual projects, thus promoting consistency and efficiency in development.
A particular focus was on creating responsive portals that could be optimally displayed on a wide range of desktop systems. Although the focus was not primarily on mobile devices, the flexibility between different desktop environments was a central element.
A key part of my work was also setting up and maintaining the development infrastructure, where I decided on innovative solutions such as a mono repository and extensive test coverage using Storybook. These initiatives contributed significantly to an efficient, collaborative working environment and set new standards for project development and quality.
IOT platform for monitoring machines and systems
March 2022 | Industrials
While developing a comprehensive front-end application for monitoring machines based on ReactJS, I mastered technical challenges such as the mono-repository setup with NX, internationalization, and theming for white label solutions. Overcoming these challenges and dealing with large amounts of data demonstrated my ability to efficiently implement complex requirements.
Customer portal for maintaining master data and managing PV systems
February 2021 | Energy
I took on the architectural responsibility for the front-end architecture, developed suggestions for improving existing structures and sketched out architectures for new developments. By applying API-first development and implementing end-to-end tests with Cypress, I achieved a code coverage of 70% for the existing customer center, which provided a solid basis for quality assurance in future releases.
Multi-brand online shop platform in the Otto Group
November 2020 | Retail
My area of responsibility was the expansion and optimization of our GraphQL service, a process that included the integration of new resolvers and a connection to a MySQL database. The challenge was not only to expand the system functionality, but also to increase the quality and maintainability of the overall system through targeted improvements. By introducing improved typing, consistently using Async/Await, optimizing testability and refining our tooling, I was able to make a significant contribution to increasing system efficiency.
In addition, I had a significant influence on the architectural development of our internal component library. This work enabled us to improve the modularity and reusability of our software components, which in turn facilitated development efficiency and system maintenance. My work led to a noticeable improvement in system quality and helped to lay the foundation for future innovations.
New development of state-of-the-art web applications for a building materials group
June 2019 | Construction & Engineering
As part of the further development and expansion of a web application for tracking trucks with construction materials, I was in charge of developing a heuristic for visualizing truck routes in a Google Maps view. A key aspect of my work was the introduction of a mono-repository to unify frontend development and optimize the implementation of automated tools for hosting in Azure and Azure CDN. This not only improved performance compared to the previous Docker-based solution, but also promoted a more efficient and collaborative way of working in the team.
By standardizing on TypeScript and ESLint, I created a consistent development foundation that, together with the introduction of Cypress-based E2E tests, resulted in a higher-quality codebase. The gradual migration of the codebase to TypeScript and the implementation of an improved Axios-based API client were further milestones that contributed to the robustness and scalability of our application.
As a sparring partner for UX designers and in my role as lead developer, I supported the design of a user-centered UI framework. My role included developing a shared understanding of effective component structures and their implementation, which enabled us to realize innovative and user-friendly solutions. My contributions were seen as groundbreaking for the way we develop and publish web applications and have made a significant contribution to improving our technology stack and inspiring the team to overcome existing boundaries and continuously learn.
Training for new React team on best practices and component selection
February 2019 | Healthcare
In an intensive, multi-day workshop on best practices in front-end development with a focus on React, I shared my knowledge of best practices, from folder structure to implementation strategies. The workshop covered a wide range of topics, including effective asset management, an introduction to TypeScript for improved typing, and strategies for interacting with server-side data. A particular focus was on discussing the benefits and challenges of functional versus class declarations in React, as well as the importance of continuous learning through resources such as newsletters, video courses, and conferences.
We also explored ways to reduce boilerplate code when using Redux through the duck pattern and initiated discussions about the possibilities of using GraphQL in projects. The primary goal of this workshop was to give participants a deep understanding of the nuances of modern front-end development and to provide them with tangible solutions to everyday development challenges.
The challenge of developing a new online store that offers both multi-brand capabilities and international support led me to implement a GraphQL orchestration layer using Apollo on both the client and server side. This task not only involved technical innovations, but also mentoring my team to ensure a deep understanding and effective application of the technologies. By introducing server-side rendering (SSR) and an advanced code splitting solution with loadable components, the performance and user experience of the shop could be significantly improved.
Another important milestone was the implementation of a JWT-based, SSR-compatible user mapping that enabled a seamless user experience across different sessions and devices. By optimizing the tooling, including threading and caching in Webpack, and switching the TypeScript tooling to Babel, I was able to significantly improve development times and hot module replacement (HMR) efficiency. In addition, optimizing client-side routing and implementing preloading for various code split paths contributed to smooth and fast navigation.
New ARD media center for HBBTV-capable TVs and web browsers
July 2018 | Media and Entertainment
When developing a new media center for all ARD channels as a common platform, my focus was on supporting modern HBBTV-capable TVs and providing responsive layouts for web browsers on mobile phones, tablets and desktops. I was instrumental in developing and optimizing the GraphQL interface to ensure efficient communication with existing REST APIs. This project aimed to create a seamless and user-friendly media library that allows access to content via a variety of devices, using cutting-edge technologies.
Real-time traffic information for public transport
April 2018 | Information Technology
I was responsible for the architecture and development of a new web-based dashboard for real-time departure information in the public transport sector, in close consultation with product managers. I selected the latest technologies and provided training for employees in the areas of React and web development. A key part of my work was developing a GraphQL server with Apollo that utilized a variety of different REST APIs, both in-house and external. I relied on MapBox and OpenStreetMap for geolocation and route and distance calculations. I also designed the page layout and implemented the initial design concepts into reusable components and views to create an intuitive and efficient user interface.
Support in the development of a telematics offering for logistics companies
January 2018 | Automobiles and Components
I worked in a distributed team at RaySono AG, with offices in Leipzig and Munich, to support the further development of a platform already in use by customers. My role included contributing architectural improvement suggestions and mentoring colleagues to increase the quality and efficiency of the platform. Through this collaboration, I contributed to the optimization of existing processes and structures, promoted knowledge sharing within the team and supported the continuous development of the platform to better meet the needs and requirements of users.
Platform for exchange between the pharmaceutical industry and doctors
June 2017 | Healthcare
As part of a greenfield project for a React application in the pharmaceutical industry, I took over the restructuring of the existing component library and introduced my own NPM repositories to increase the reusability of components and implement consistent linting rules. I placed particular emphasis on responsive design through the use of CSS grid layout and responsive typography to ensure optimal display on different devices. I also implemented server-side rendering with React, including intelligent code splitting for JavaScript and CSS to optimize performance.
My tasks also included evaluating and selecting UI components for animations, charts and other features to ensure a user-friendly and visually appealing application. In addition, I acted as a point of contact and trainer for the ReactJS-based architecture and supported the team in building knowledge and implementing best practices.
New development of online banking for business customers with significant turnover
March 2017 | Financials
I played a key role in the development of a future-oriented front-end architecture by working closely with system architects and product managers. An important aspect of my work was the management and mentoring of two offshore teams in India, for which I established Git flow and pull requests as the central working methodology. My responsibilities included not only training these teams, but also evaluating and approving their code to ensure compliance with the highest quality standards.
Another focus of my work was the careful evaluation of new technologies to define an innovative technology stack, which was selected in close cooperation with various stakeholders of the group. In addition, I led the analysis and design of a new Development 2.0 environment that aimed to significantly increase the productivity of software development. This initiative was aimed at creating an efficient, modern development environment that is optimally tailored to the requirements of software development.
New development of a portal for planning and conducting language courses
October 2016 | Education
As part of the redesign and optimization of the front end of a large application that Syzygy was developing for the client, I focused on the implementation and architecture in the React environment. A key element of my work was the introduction of the Apollo client and server to use GraphQL for efficient frontend-backend communication. This measure revolutionized the data retrieval and manipulation processes through a more flexible interface and contributed significantly to performance improvements and an enhanced user experience.
My approach, which was based on a thorough analysis and a critical look at the existing architecture, led to a leaner system design, improved tooling and the selection of adequate libraries. These strategic changes enabled us to lead the project out of a technological dead end and back onto the path to success. The adjustments I made not only increased the efficiency and effectiveness of the team, but also enabled sustainable knowledge transfer and structural improvement within the project.
The positive response from my team underlines the transformative effect of my work. As an architect and mentor, I made a significant contribution to the development of robust and maintainable code bases, promoted the professional development of the team and ensured a constructive, solution-oriented atmosphere.
Support for the development of a new online store for Hornbach
May 2016 | Retail
When the styling platform was migrated to PostCSS, I developed a tooling solution that supports Hot Module Replacement (HMR) for React with Server-Side Rendering (SSR). The implementation of React Intl enabled the internationalization of the application, while techniques such as tree-shaking and automatic chunks improved efficiency and performance. The goal was to ensure a consistent and responsive user experience across a wide range of platforms, including desktop browsers, tablet browsers, and smartphone browsers. This strategic overhaul resulted in optimized loading times and a significant improvement in overall usability.
Architecture for innovative new robo-advisor web application from Deutsche Bank Group
November 2015 | Financials
During my consultancy work for the front-end architecture of an innovative international investment platform, the focus was on developing a single page application (SPA) that features live updated charts and internationally formatted values such as currencies. The technology I chose and the careful project structuring played a decisive role in efficiently meeting the complex requirements of the project and designing a platform that is both robust and user-friendly.
My work style, characterized by precision and conscientiousness, enabled me to maintain a comprehensive overview of front-end technologies and to accurately evaluate both the advantages and challenges of common approaches, tools and frameworks. By analyzing the interactions between the frontend and the users in detail, I was able to identify and fix weaknesses in the UI concepts at an early stage. The resulting frontend architecture that I developed not only contributed to increasing the project value, but also laid the foundation for a solid base that proved to be extremely robust as the project progressed.
Development of a sophisticated animated front end for Deutsche Telekom's Entertain platform
June 2014 | Information Technology
In my role as a consultant for the software architecture of a new, internationally oriented platform, I was instrumental in the development and optimization of a single page application (SPA). My focus was on the introduction of an MVP concept to improve the modularity and structure of the code, which significantly contributed to increasing the efficiency and user-friendliness of the platform. I led the implementation of a sophisticated interactive interface that enabled advanced UI transitions and coordinated development strategies between offshore and onsite teams. This coordination involved working closely with international teams, particularly with Chinese employees of Huawei and Deutsche Telekom, successfully overcoming not only technical but also cultural and language challenges.
Another focus of my work was to ensure software quality by developing comprehensive tests, including unit and UI tests. I also took responsibility for documenting the code and managing the tooling processes for development and deployment, which created a consistent and efficient working environment.
Working in an international context presented particular challenges, especially with regard to language barriers and different expectations of quality and working methods. However, my experience of working with diverse teams enabled me to successfully navigate these challenges and promote effective communication and collaboration between all parties. This was instrumental in achieving project goals and laying a solid foundation for future developments.
Responsive homepage for software manufacturer MAGIX
November 2013 | Software & Services
In this project, we integrated a leading CSS framework to develop a responsive and visually appealing website that adapts seamlessly to different screen resolutions. Working closely with the design and concept teams, we created a low-maintenance and flexible website that combines a magazine-like design with high-quality typography. Key elements included a sticky feature for important website areas and an interactive, tabular product comparison that allows users to make detailed comparisons.
Extension of the website of the cable provider Tele Columbus
April 2013 | Telecommunication Services
When implementing the Photoshop designs into functional web applications for iPhones and Android devices, I used HTML5 technology to develop a high-performance rich internet application (RIA). This app was characterized by interactive changes without the classic page reload effect. The implementation of an MVP-based architecture with template rendering was based on a core framework, which ensured a structured and maintainable code base. For HTML5 form validation, I relied on interactive error feedback to improve the user experience. The connection to an existing, PHP-based backend was realized via RPC, which enabled seamless data integration. In addition, I integrated advertising and tracking networks through intelligent, downstream integration to effectively support marketing goals without compromising the user experience.
Lead of the front-end architecture of the new telephony center
November 2012 | Telecommunication Services
In the role of lead developer, I took on the challenge of developing a rich internet application (RIA) for configuring VOIP features for landline connections. Our goal was to fully utilize the advanced capabilities of modern desktop browsers from Internet Explorer 9 onwards to provide users with a seamless and intuitive configuration experience. Efficiently connecting to an existing backend system via a REST proxy enabled direct communication between the frontend and backend, laying the foundation for a dynamic and responsive application.
By implementing live feedback and HTML5 form validation, combined with intelligent background synchronization, I was able to significantly improve user interaction. This not only increased end-user satisfaction, but also helped to minimize sources of error and ensure data integrity. The application was based on a solid MVP architecture, which was supplemented by template rendering to ensure a clear separation of presentation and logic.
A groundbreaking framework for the HTML5-based implementation of internet games
April 2011 | Media and Entertainment
During my time at Zynga, I took on the challenging task of leading the architecture and development of a hardware-accelerated scroller for large game fields. This innovative project aimed to provide a seamless scrolling experience similar to that of iOS – including bouncing and deceleration. In parallel, I made significant improvements to our tooling system by implementing new features such as an API browser, scaffolding, a local web server with proxy functionality, integration with Zynga's asset management infrastructure, and a sprite sheet generator.
Another important part of my work was the continuous development of the JavaScript framework used. This included the introduction of polyfills for ES5 methods to ensure compatibility with older browsers, support for multi-value properties in class declarations, and the development of efficient loading systems for scripts, style sheets and images. These improvements were crucial to improving the performance and user experience of our applications.
Innovative cross-platform development for smartphone offers based on HTML5
March 2009 | Telecommunication Services
My work focused on analyzing future developments in the mobile communications market and establishing web technologies to support Deutsche Telekom's multi-platform approach. In the course of this, I developed the Fußball.de fan app with Unify and PhoneGap, the functionality of which was presented in a demo video on YouTube. I also initiated the open source framework Unify, developed a general navigation logic for mobile applications and initiated the preparation of patent applications for the solutions created.
The basic work for integrating Unify into native applications included the use of PhoneGap, QtWebkit and Adobe AIR. I presented the framework at internal and external events and cooperated with T-Labs, T-Mobile and other mobile network providers and manufacturers to integrate Unify into the BONDI initiative and WAC.
In addition, I was responsible for developing the PagePlace application for desktop browsers and an RIA application based on the qooxdoo framework that enabled users to read books and manage subscriptions. This work included parsing and formatting ePub-based books, including decoding and rendering within the application, as well as implementing a complex animation mechanism for qooxdoo-based applications and developing a custom theme based on the internal style guide.
Architectural improvement, performance optimization and implementation of components for social network
October 2008 | Media and Entertainment
I led a team of four front-end specialists in the development of new interfaces for one of Europe's largest social networks (Facebook competitor), which is aimed at schoolchildren, students and adults. Our focus was on the development of new and the improvement of existing interface components. One key project was the development of a photo viewer that allows users to tag people in photos. This work contributed significantly to increasing the interactivity and user-friendliness of the platform and promoting user interaction.
Initiation, architecture and development of the qooxdoo JavaScript framework
November 2004 | Information Technology
Two decades ago, I and my team embarked on the development of a visionary widget system inspired by the sophisticated features of native UI toolkits such as Qt. Our goal was to fundamentally expand the possibilities of web-based applications. Layout queues, child/shadow widgets and advanced styling including shadows, dynamic ornaments and color gradients are just a few of the cornerstones of the development. These technologies were intended to redefine the way interactions are designed on the web.
The challenge was to implement these complex concepts at a time when web browsers were not yet equipped for such innovations. Our work resulted in a Python-based, cross-platform tooling solution (NodeJS didn't exist yet) that not only enabled composition, optimization and internationalization, but also redefined the boundaries of what was possible on the web. Despite the project's subsequent discontinuation, the realization that we could significantly expand the potential of the web was a true breakthrough.
My experiences and the feedback from the community show that visions, coupled with determination and technical know-how, can drive the development of the digital world.
Online shop of the DSL brand 1&1 with XSLT-based backend rendering
May 2002 | Information Technology
I took over the design of the online presence, the ordering process and the creation of newsletter campaigns, with my focus on the implementation of HTML markup and CSS based on pre-designed templates. Working with backend developers, I played a key role in dynamizing the content to create a vibrant and interactive user experience. A significant part of my work was developing XSLT templates to display product comparisons, product pages and other elements using the Pustefix framework, which is known for its recursive XSLT engine. I also implemented JavaScript components for the control center, including toolbars, menus and toggles that can be controlled using simple HTML attributes. These components were instrumental in improving the usability and functionality of the website and ensuring a seamless shopping experience for users.
