Back to project overview

Juleica

Gemeinsam mit dem deutschen
Bundesjugendring haben wir die neue
Juleica Onlineplattform entwickelt.
Die Jugendleiter-Card (Juleica)
ist ein bundesweit einheitlicher
Ausweis für Jugendleiter*innen.

  • Webanwendung
  • 300.000 aktive Vorgänge
  • PHP, Laravel, Vue.js, Nuxt.js, Websockets
Juleica antragssystem screenshot4

Eine einfache, angenehme, schnelle und intuitive Bedienung sind war in diesem Projekt für die vielen 10.000 aktiven Nutzer zentral.

Ferner lag der Fokus auf eine sehr schnelle Reaktionsgeschwindigkeit des Systems. Gerade Sachbearbeiter*innen die täglich viele Juleica-Anträge prüfen und genehmigen profitieren und der rasend schnellen Geschwindigkeit der Software. Hier wurden die Erwartungen weit übertroffen. Einen Juleica-Antrag zu öffnen, bewegt sich im rekordverdächtigen Bereich von 50-70ms, ein komplettes Listing mit umfangreichen Statistiken, werden in weniger wie 200ms geladen.

Wir wissen, wie wichtig eine schnelle und angenehme Bedienung, sowie eine moderne und ansprechende Oberfläche für die Akzeptanz einer Software und den Happiness-Faktor der Nutzer*innen ist.

Daher legen wir bei allen unseren Projekten sehr viel Wert auf das Look&feel sowie die Geschwindigkeit der Softwareprojekte. Das hat uns auch veranlasst, alle Softwarepojekte seit vielen Jahren nur noch als Single-Page-Applications umzusetzen, die diese Rekordgeschwindigkeiten erst möglich macht.

…bis jetzt bin ich mega begeistert vom neuen System. Habe auch schon viele sehr positive Rückmeldungen von meinen Verbänden bekommen…

Mitarbeiterin aus einem Landesjugendring

Projektbeschreibung

Ein neuer Juleica-Ausweis startet mit der digitalen Beantragung durch die ehrenamtlichen Mitarbeiterinnen und Mitarbeiter. Im Antragsprozess können neben den persönlichen Daten und den Daten der Ausbildung auch Qualifikationsdokumente hochgeladen und im Antrag hinterlegt werden.

Im Anschluss geht der Juleica Antrag durch eine zweistufiges Prüfungsschleife. In dieser Schleife werden die Antragsdaten durch die zuständigen Träger der Jugendarbeit, sowie die zuständigen Jugendringe und Jugendämter genehmigt.

Nachdem ein Antrag fertig geprüft ist, werden die Daten zu einer Druckerei übermittelt, die den Druck und Versand der fertigen Juleicas übernimmt.

Sobald die fertigen Juleicas gedruckt und an die Jugendleiter*innen verschickt sind, können die Antragsteller*innen in ihrem persönlichen Benutzerkonto ein Zertifikat das ihre Qualifikation bestätigt abrufen.

Ferner stellt das System eine digitale Version der Juleica bereit, die in die gängigen Wallet-Apps hinterlegt werden kann.

Der Deutsche Bundesjugendering übernimmt, neben der Koordination, auch die Abrechnung der Karten. Das neue Juleicas-System erstellt und versendet automatisiert alle Rechnungen und übermittelt diese an die angeschlossene Buchhaltung.

Eine besondere Herausforderung bei diesem Projekt war es, die komplexen und vielfältigen Strukturen der Jugendarbeit in Deutschland softwaremäßig abzubilden.

Je nach Bundesland und Träger gibt es sehr unterschiedliche und feingranulare Beziehungen und Zuständigkeiten. So managt das System den strukturellen Zusammenhang der Jugendarbeit in Deutschland mit über 47.000 Trägern und weit über 100.000 Nutzern.

Mediamodifier image 3

Herausforderungen und Lösungen

Eine besondere Herausforderung bei diesem Projekt war es, die komplexen und vielfältigen Strukturen der Jugendarbeit in Deutschland softwaremäßig abzubilden.

Die über 47.000 Träger sind in riesigen, baumartigen Verbandsstruktur und zusätzlich geografisch, durch ihre örtlichen Sitze, verortet.
Je nach Bundesland gibt es noch Sonderregeln.

Die Zugriffssteuerung auf einzelne Juleica-Anträge hängt dabei von der Position des Trägers in der Verbandsstruktur und des örtlichen Sitzes des Trägers ab. Zusätzlich spielen auch die Eigenschaften der aktiven Nutzer*innen eine Rolle.

Trotz dieser außerordentlich komplexen, softwareseitigen Logiken und Prüfungen im Hintergrund, werden die Zugriffszeiten von 20ms (Einzelne Seite) bis 200ms (Listen) erreicht.

Im Abschnitt technischer Aufbau wird beschrieben, wie diese Themen gelöst wurden.

Juleica Berechtigungen

Technischer Aufbau

Der Kern des neuen Juleica Antragssystem besteht aus einer PHP Webanwendung, die mit dem Applikationsframework Laravel umgesetzt und betrieben wird. Laravel wir vollständig headless (API-driven Architecture), als reine Backend-API, genutzt. MariaDB kommt als Datenbanksystem zum Einsatz.

Der Laravel Kern bedient über eine zentrale API Schnittstelle zwei, voneinander unabhängige Frontend Anwendungen, die verschiedene Bereiche des Juleica-Systems abbilden. Zum einen den Antragsbereich in dem die Jugendleiter*innen ihre Juleica beantragen und den Verwaltungsbereich, in dem die Mitarbeiterinnen und Mitarbeiter der Träger die Juleica-Anträge genehmigen.

Durch den API-driven Ansatz wird die Reaktionsgeschwindigkeit der Software extrem schnell, da das Rendering vollständig client-seitig vor statten geht.

Selbst das folgende Listing mit aufklappbarem Trägerbaum, etlichen Statistischen Daten aus dem kompletten System wird in unter 200ms geladen.

Die beiden Frontend Anwendungen wurde beide als Single-Page-Applications mit dem Framework Nuxt.js, welches auf Vue.js aufbaut, umgesetzt. Da im Bereich des Antragsystem keinerlei SEO Thematiken relevant sind, arbeiten beide Systems ohne Server-Side Rendering um noch mehr Performance zu erreichen.

Mit dieser Architektur können mehrere tausend, gleichzeitig im System arbeitende Nutzer problemlos bedient werden. Durch die klare Strukturierung und verteilte Architektur ließe sich das System bei noch größerem Wachstum auch leicht über mehrere Serversystem verteilen.

Beim Hosting vertrauen wir, auf das erprobte Setup mit einem flexibel skalierbaren Cloud-Server beim Hoster Hetzner.

Die E-Mails (im Schnitt über 2.000 Mails pro Tag) werden über einen spezialisierten E-Mail Anbieter verschickt um eine perfekte Zustellbarkeit zu gewährleisten.

Beim Juleica-System ist unterbrechungsfreier Update-Prozess (Deployment) unabdingbar. Daher setzen wir auch bei diesem Projekt auf ein „Zero-Downtime-Deployment“, das wir mit Laravel Envoyer umsetzen. Selbst kleinste Updates können somit völlig stressfrei und lautlos ausgerollt werden.

Juleica antragssystem screenshot3

Die beiden Frontend Anwendungen wurde beide als Single-Page-Applications mit dem Framework Nuxt.js, welches auf Vue.js aufbaut, umgesetzt. Da das Antragssystem nicht auf Suchmaschinen optimiert werden muss (SEO), arbeiten beide Systeme ohne Server-Site-Rendering, um noch mehr Performance zu erreichen.
Unter "Server-Site-Rendering" versteht man, dass der Server die Seiten bereits vollständig aufgebaut zum Nutzer sendet. Das ist für Suchmaschinen notwendig und für Seiten wie etwa Onlineshops essenziell.

Mit dieser verteilten Architektur können mehrere tausend Nutzer gleichzeitig im System arbeiten. Um auch für die Zukunft optimal gerüstet zu sein, lässt sich das System bei noch mehr Nutzern leicht über mehrere Serversystem verteilen.

Beim Hosting setzen wir auf das erprobte Setup mit einem flexibel skalierbaren Cloud-Server beim Hoster Hetzner.

Die E-Mails (im Schnitt über 2.000 Mails pro Tag) werden über einen spezialisierten E-Mail-Anbieter verschickt, um eine optimale Zustellbarkeit zu gewährleisten.

Beim Juleica-System ist ein unterbrechungsfreier Update-Prozess (Deployment) unabdingbar. Daher setzen wir auch bei diesem Projekt auf ein „Zero-Downtime-Deployment“, das wir mit Laravel Envoyer umsetzen. Selbst kleinste Updates können jederzeit und ohne Unterbrechung ausgerollt werden.

Juleica infrastruktur

Facts

  • Umsetzung als Single-Page-Application (SPA)
  • Umsetzung des Antragssystems als Progressive Web App (PWA)
  • API-driven Architecture
  • Server: PHP, Laravel, nginx
  • Frontend Antragsystem: NuxtJS / Vue.js
  • Frontend Verwaltungssystem: NuxtJS / Vue.js
  • Zero-Downtime Deployment via Laravel Envoyer
  • Versionierung: github des Deutschen Bundesjugendring
Juleica antragssystem screenshot1
Juleica 2
“…vielen Dank. Das ist ein echter Segen für uns, da ich das bisher immer "per Hand" erstellen musste und dann verschickt habe.
Alles ist alles so viel besser als vorher.
Vielen, vielen Dank!…”

Mitarbeiterin aus einem Landesjugendring

Eingesetzte Technologien

Logo min
Laravel
Logo
Vue.js
Nuxt icon
Nuxt.js
Vertical logo monochromatic
Docker
Envoyer Logo
Envoyer

Hast du noch Fragen?

Hast du noch Interesse an weiteren Details oder können wir dich in Bezug auf dein Projekt beraten? Dann melde dich bei uns! Wir freuen uns, von dir zu hören!