Mein.Berlin

Die offizielle Online-Beteiligungsplattform der Stadt Berlin; eine Web-App basierend auf Django und React. Die Webseite wurde entwickelt mit Adhocracy 4, einer Software von Liquid Democracy.

Startseite vom mein.Berlin mit dem offiziellen Berlin Header
Seite eines Beteiligungsprojekts
Das entwickelte Dashboard, ein interaktiver Bereich für die Verwaltung von Projekten
Der Einstieg ins Dashboard der Web-App, eine Übersicht aller Projekte einer Organisation

Herausforderungen

Die komplette Software basiert auf der von Liquid Democracy geschrieben Bibliothek "Adhocracy". Wichtig war es also, sicherzustellen, dass Änderungen aus einem Projekt andere Projekte nicht kaputt machen. Wie immer hat man in so einer Situation den Vorteil, dass man Aufwände auf mehrere Projekte splitten kann und Features aus anderen Projekten in den eigenen benutzen kann. Aber dann wiederrum ist man auch eingeschränkt in dem was man in seinem eigenem Projekt machen kann. Ab und zu gab es gute Design-Ideen, die nicht 100% so umgesetzt werden konnten, weil das Feature aus der Bibliothek stammt und nicht etwas eigenständiges ist.

Da mein.berlin.de eine Seite der Stadt ist, war vor allem auch Barrierefreiheit eine wichtige Sache. Sowohl der Bereich für Nutzer als auch der Bereich für Redakteure musste barrierefrei entwickelt werden - das heißt, hier lag ein großes Augenmerk auf Sachen wie zum Beispiel Farbkontrast, der korrekten Semantik von Elementen im HTML (inkl. die Nutzung semantischer HTML5 Elemente) und eine sinnvolle Reihenfolge für die Bedienung mit der Tastatur. Im Rahmen dessen habe ich ebenfalls mehrere BITV-Tests durchgeführt und mit meinen Kollegen an den Schwachstellen gearbeitet.

Technologie-Stack

Im Frontend haben wir viel im Vanilla HTML Style gemacht, ab und zu wurde jQuery genutzt - wobei es gegen Ende versucht wurde, von der Seite zu eliminieren - und sonst wurde für dynamische Elemente React.js benutzt. Heute, zusammen mit Angular etc., eine der bekanntesten Frontend-Bibliotheken haben wir React.js immer dann benutzt, wenn wir dem Nutzer entweder sofortiges Feedback geben wollten oder ein Teil zu komplex wurde um es mit HTML5 oder Bootstrap abzubilden.
So zum Beispiel die Seite, wo Redakteure mehrere Abschnitte an Text eingeben können, damit Nutzer für jeden einzelnen Abschnitt Kommentare hinterlassen können. Da Abschnitte frei anordbar und der Text mit Formatierungen (kursiv, Bilder, Links, etc.) sein musste, hat hier zum Beispiel React.js angeboten.

Wie oben erwähnt wurde für simplere Komponenten gerne Bootstrap benutzt, um die Zeit, die für Akkordeons oder Tabs aufgewendet wird, niedrig zu halten. Ansonsten wurde im Styling viel selbst geschrieben, was über Webpack von SCSS zu CSS umgewandelt wurde.

Das Backend wurde in Python geschrieben, vor allem im Django Framework. Einige der Features kamen dann aus der eigenen Library "Adhocracy", welche im Endeffekt eine Sammlung von Django Apps war. Zudem wurde für statische Seiten das Python CMS Wagtail genutzt, um zum Beispiel die Pflege der Homepage einfach zu gestalten.