Zum Inhalt springen

Referenzen

  • Frontend-Entwicklung
  • Next.js
  • Headless CMS
  • API-Integration
  • Datenvisualisierung
  • Responsive Design
  • Performance-Optimierung

Website-Entwicklung für die „Initiative Neue Soziale Marktwirtschaft (INSM)“

Zahlen veralten schnell. Diese hier nicht. Für die INSM haben wir ein Portal gebaut, das seine Wirtschaftsdaten selbst aktuell hält: Next.js vorne, WordPress hinten, Destatis direkt angeschlossen.

Kunde
Initiative Neue Soziale Marktwirtschaft (INSM), Berlin
Jahr
2024
Website
insm.de

Das Projekt

Die INSM diskutiert Wirtschaftspolitik mit Zahlen. Ihr Portal bündelt Kampagnen, Studien, den Ökonomenblog und Veranstaltungen in einer klaren, schnellen Oberfläche.

Herzstück ist die Faktenfabrik: Diagramme zu Inflation, Arbeitsmarkt, Energie und Steuern, die ihre Daten per API direkt beim Statistischen Bundesamt abholen. Die Redaktion pflegt Texte. Die Zahlen pflegen sich selbst.

Konzept und Design kamen von DKdL und LIGALUX. Gebaut haben wir.

Die Aufgabe

Ein fertiges Design ist ein Versprechen. Einlösen muss es der Code.

DKdL und LIGALUX hatten das Portal entworfen: kräftige Farben, große Typografie, ein Raster aus Karten. Unsere Aufgabe: das Ganze präzise bauen, auf jedem Gerät, und die Zahlen so anbinden, dass niemand mehr Diagramme von Hand nachzeichnet.

Startseite von insm.de: Kampagnenmotiv in voller Höhe, darunter der Beginn der Faktenfabrik

Die Faktenfabrik

Sieben Karten, acht Themenfelder, ein Klick zur Quelle.

Auf der Startseite zeigt die Faktenfabrik die wichtigsten Kennzahlen: Inflation, Konjunktur, Insolvenzen, Arbeitsmarkt, Energie, Steuern. Jede Karte lässt sich vergrößern, nennt ihre Quelle und kann geteilt werden. Jedes Themenfeld hat dazu eine eigene Seite mit weiteren Diagrammen.

Die INSM Faktenfabrik: Karten mit Inflationsrate, DIW-Konjunkturbarometer und Unternehmensinsolvenzen

Die Daten

Ein Updater, keine Handarbeit.

Die meisten Zahlen kommen direkt aus GENESIS-Online, der Datenbank des Statistischen Bundesamts. Ein Updater in WordPress holt sie reihum per API, bringt sie in ein gemeinsames Format und speichert sie am Diagramm. Das Frontend zeigt nur noch an. Kommt eine neue Kennzahl dazu, ist das eine Frage der Daten, nicht des Codes.

Weitere Karten der Faktenfabrik: Arbeitslosigkeit und offene Stellen, erneuerbare Energiequellen, Steuer- und Abgabenlast im OECD-Vergleich
Themenseite Konjunktur auf insm.de mit eigenen Diagrammen zu BIP und Aussenhandel

Die Technik

Nicht jedes Projekt braucht Next.js. Dieses schon.

Das Frontend ist mit Next.js und React gebaut, gestaltet mit Tailwind CSS. WordPress bleibt das Redaktionssystem, liefert aber nur noch Inhalte. Die Diagramme sind SVG, direkt aus den Daten gezeichnet: scharf auf jedem Bildschirm, zu dritt in der Reihe auf dem Desktop, als Karussell auf dem Telefon.

Dazu kommen Suche, Newsletter, ein Veranstaltungskalender, ein Instagram-Feed und ein Consent-Manager, der Tracking erst nach Zustimmung lädt.

Was wir gebaut haben

  • Next.js-Frontend

    App Router, Server Components, Tailwind CSS. Nach dem Design von DKdL und LIGALUX.

  • Headless WordPress

    Redaktion wie gewohnt, Ausgabe über Next.js.

  • API-Anbindung

    Destatis-Tabellen per API, je Kennzahl ein Adapter, Abruf im Hintergrund.

  • Diagramme

    Linien, Balken, Kennzahlen als SVG. Mit Vollbild, Quelle und Teilen.

  • Themenseiten und Filter

    Acht Themenfelder, Übersichten mit Filtern nach Typ, Thema, Jahr und Monat.

  • Kalender, Suche, Newsletter, Instagram

    Alles drin, alles aus WordPress.

insm auf dem Telefon: Startseite
insm auf dem Telefon: Faktenfabrik
insm auf dem Telefon: Themenseite Konjunktur
Publikationsübersicht auf insm.de mit Filtern nach Typ, Thema, Jahr und Monat
Veranstaltungsseite auf insm.de mit Terminkarte und Monatskalender
Aktuelle Beiträge auf insm.de: Pressemitteilungen, Ökonomenblog und Publikationen als Karten

Ergebnis

Ein Portal, das seine Zahlen selbst aktuell hält. Schnell im Browser, ruhig im Redaktionsalltag.

Themenfelder mit eigenen Datenseiten
8Themenfelder mit eigenen Datenseiten
Destatis-Tabellen per API angebunden
7Destatis-Tabellen per API angebunden
Next.js vorne, WordPress hinten
HeadlessNext.js vorne, WordPress hinten

Ähnliches Projekt geplant?

Erzählt uns davon. Wir melden uns mit einer ehrlichen Einschätzung.

Anfrage stellen