InteractiveKICA / Korea In-house Counsel Association / 2023
Membership Platform
Mitgliederwebsite · Verwaltung · API
Ich habe den Webdienst der Korea In-house Counsel Association vom Frontend bis zum Backend eigenständig entworfen und entwickelt. Dazu gehörten koreanische und englische Websites, Registrierung, Beitragszahlungen, Foren, Veranstaltungen und eine Administrationsoberfläche. Öffentliche Seiten sowie Mitglieder- und Content-Verwaltung wurden in einem gemeinsamen Dienst verbunden.
Koreanische und englische Seiten mit SSR
Ich habe die koreanische und englische Website mit Next.js aufgebaut. Bei jeder Anfrage der Startseite lud der Server Beiträge und Banner und übergab sie an die Seite. Die verfügbaren Benutzerfunktionen richteten sich nach dem Mitgliedsstatus.
Zahlungen und Mitgliedsstatus
Die Erfolgsmeldung des Zahlungsfensters wurde nicht direkt in den Mitgliedsstatus übernommen. Der Server fragte die Zahlung beim Zahlungsanbieter erneut ab, prüfte Betrag und Status und aktualisierte erst danach Zahlungsdaten und Mitgliedsstufe.
Inhalte durch Betreiber verwalten
Die Administrationsoberfläche verwaltete Mitglieder, Beiträge, Foren und Veranstaltungen sowie Desktop-/Mobilbanner und deren Reihenfolge. Für Formatierung, Links und Bilduploads habe ich Tiptap integriert; die Statistikansichten wurden an die Google Analytics Data API angebunden.
Next.js · React · NestJS · TypeORM · PostgreSQL · Tiptap
ENC / Kanzleiwebsite & CMS
Website & CMS
Website · Content-Bearbeitung · Veröffentlichung
Ich habe die öffentliche Website und das CMS der Kanzlei ENC entwickelt. Neben Seiten zu Tätigkeitsbereichen und Fachbeiträgen gehörten dazu Oberflächen zum Austauschen von Bannern und Bearbeiten von Artikeln. Die CMS-Felder entsprachen der Struktur der öffentlichen Seiten; die API-Anbindung übertrug Änderungen auf die Website.
Gemeinsame Struktur über mehrere Seiten
Die Seiten verwendeten gemeinsame Layouts im Next.js App Router und Vorlagen für Tätigkeitsbereiche. Query-Parameter führten zu Abschnitten innerhalb dieser Bereiche. Fachbeiträge verbanden per API geladene Inhalte mit dem vorherigen und nächsten Artikel.
Bilder und Reihenfolge bearbeiten
Jeder Banner hatte eigene Desktop- und Mobilbilder, einen Link und eine Anzeigereihenfolge. Änderungen per Drag-and-drop wurden gespeichert. Anschließend wurden die Abfragedaten aktualisiert, damit die Verwaltungsoberfläche den gespeicherten Stand zeigte.
Bilder im Artikel direkt bearbeiten
Ich habe die Bilderweiterung von Tiptap angepasst, um Größe und Ausrichtung zu speichern, und Größenänderungen per Ziehen in einer React NodeView implementiert. Erstellungs- und Bearbeitungsansichten übergaben das HTML und die Anhangsdaten an die API.
Next.js · React · TanStack Query · Tiptap · Tailwind CSS
