about the project

Together with robole and Knick Design I had the opportunity to build the online platform politischbilden.de.

The project plays a pioneering role in the field of political Open Educational Resources (OER) in Germany. Actors from educational practice are networked, strengthened and supported. The platform is particularly aimed at actors in the field of political education. This includes educational institutions and independent educators as well as respect coaches, teachers and students, and people who work on political issues in general.

The aim of the platform is to provide a diverse range of background information and methodological approaches to topics of civic education in order to inspire people in practice and to support them with materials as well as to present experts in the field.

development process

To manage the content the website uses a custom headless CMS. My task was to build the front-end for it. Since all pages are supposed to be static, I decided to use the static site generator Gatsby, which is based on React. At this point, I had already gained some experience with Gatsby when I created my own portfolio website, and I was pretty confident that this would be a good fit for this project as well, as it offered remarkable tools for images and other page speed optimizations that would be beneficial for the project.

What I severely underestimated was the effort to load data from a custom CMS for which there is no community source plugin. I therefore had to develop my own one and get to grips with Gatsby's complicated build process, which wasn't exactly a pleasure given the fixed budget I had negotiated in advance. After struggling with GraphQL schemas and all sorts of issues, I finally managed to come up with a working solution.

Since the front-end of the website is the only consumer of the CMS data, I was also given the opportunity to use Swagger to design the REST API that provides the content to my own requirements.

In addition to simple static pages, the front-end also provides a search page where users can search for specific educational materials with a range of filtering options and place them in collection to download.

Educators also have the option to upload their educational materials they want to share via a extensive upload form. I used Formik, a React library to manage complex forms, to deal with the comprehensive validation rules involved. It proved be very useful and helped a lot managing dependencies clearly.

Another interesting aspect is accessibility. Great efforts have been made to ensure that the website is as accessible as possible by providing full keyboard navigation, high contrasts and screen reader optimizations.

In the end, it was a really fun and meaningful project and I'm proud to have helped build such a platform. I learned a lot about Gatsby and had a great time together with the lovely guys from robole.