fluege.de

Front-end development on a comparison portal for air travel

Preview of the website go.fluege.de on different devices.

The web application go.fluege.de quickly and reliably compares thousands of airlines and offers the users the most suitable flight connections at the lowest price.

In this project, my role was to support the front-end team of Invia Flights in Leipzig with the development of a new version of their existing platform.

One aspect was building and testing new web components, as well as migrating existing components from Polymer to the newer lit web component library. Coming from a React.js background, I didn't have much experience with web components when I joined the team, so there was the first learning curve of the project. But thanks to good onboarding and very helpful colleages I was able to familiarize myself quickly.

After diving deeper into the project, I was faced with the next challenge: a complex REST-based microservice architecture with a large amount of flight and booking data that needed to be connected to our front-end application. We used Redux to manage the internal state of the application, which I was familiar with from previous projects. What I wasn't used to was the complexity of all the microservices that needed to be connected in a meaningful way to work with our app. Since we had a lot do with asynchronous data flows, Redux Saga came in handy to implement all the processes in a clean and understandable way, which was another learning curve. In the end, it all paid off and we had built comprehensible front-end services to consume and coordinate the data in the way we wanted.

The project itself was quite a challenge and I learned a lot in the process and from my lovely team members.

responsibilities

  • Web component development and testing

  • Implementation of multi-page booking forms

  • Conversion of the website from a mobile-only website to a fully responsive web application

  • Connection of the front-end to a complex microservice architecture

  • Implementation and improvement of asynchronous data flows

tech stack

  • Web Components

  • Polymer, lit

  • Redux

  • Redux-Saga

  • REST microservices