Projekte

#

Shopping-list App (2023)

Eine progressive Webanwendung (PWA), erstellt mit Next.js

Da ich motiviert war, einige Technologien zu testen, habe ich beschlossen eine PWA für eine Einkaufsliste zu bauen. Das tolle daran ist, dass zunächst keine Kosten anfallen, weder für das Hosting der App noch für die Datenbank. Konkret habe ich mich für folgende Technologien interessiert:

  • Neueste Version von Next.js mit App-Router und SSR (Server Side Rendering)
  • Internationalisierung mit next-intl
  • Hosting auf Vercel (free tier)
  • Atlas MongoDB als Datenbank (free tier)
  • Mongoose als ODM (Object Document Mapper)
  • Tailwind CSS zusammen mit radix-ui/colors für das Styling

Ergebnis (Developer Experience)

  • Mongoose ist nicht die beste Wahl, wenn TypeScript verwendet wird. Besser scheint Prisma.
  • Das Hosting bei Vercel hat sehr gut funktioniert, gute Dokumentation und einfach zu bedienen. Für den Start von Projekten eine sehr gute Wahl. Das einzige was ich kritisch sehe: Container-basierte Bereitstellungen werden nicht unterstützt. So muss die App für die Bereitstellung auf dem Produktivsystem immer gebaut werden, was Zeit kostet. Neben anderen wichtigen Eigenschaften ist die Bereitstellung in einem Container deutlich schneller.

Der Quelltext ist auf github (Link im footer der App). Hier der Link zur App: shopping-list-app
Oder scannen Sie diesen QR-Code, wenn Sie die App auf Ihrem mobilen Gerät testen wollen:

#

Entwicklung dieser Seite (2023)

Static Site Generation (SSG) mit Next.js 13 und neuem "app-router"?

Da ich die letzten Jahre Single Page Applications (SPA) entwickelt habe, war ich daran interessiert eine statische Webseite (SEO-freundlich) - eben diese hier - mit Next.js zu erstellen. Ich definierte folgende technischen Anforderungen:

  • Statische Seitengenerierung (SSG)
  • Verwendung von Next.js mit neuem App-Router
  • Internationalisierung (i18n) Unterstützung (2 Sprachen)
  • Hosting auf fly.io, da es container-basierte Bereitstellungen und Nullkosten beim Start eines Projekts unterstützt
  • Styling mit tailwindcss und radix-ui/colors

Ergebnis

  • Da die Unterstützung des App-Routers von next-intl (i18n Modul für next.js) noch in der Beta Version ist, empfehle ich für die Lokalisierung von Projekten im SSG modus noch den "pages-router" zu verwendet (bzw. zu prüfen ob SSG mittlerweile unterstützt wird)
  • Das Styling mit radix-ui/colors funktioniert gut: Keine extra "dark:" vorangestellten Regeln nötig (Spezialfälle ausgenommen)
  • Hosting auf fly.io toll, keine Probleme, sehr gute Dokumentation, einfach zu bedienen, keine Kosten für kleine Projekte (Juli 2023)
  • Sehr gute Seiten Qualität nach lighthouse, siehe blog

Das Project is öffentlich auf github (siehe Link, oben rechts in der Navi)

#

B2B platform 2022/23 (not public)

Relaunch des B2B-Shops in TypeScript und React

  • Hauptfunktionen: Produktsuche/Filter, Produktdetails, Bestellimport, mehrere Warenkörbe, Kasse, CMS-Integration, Progressive Web App
  • Nutzung: ~100 Bestellungen pro Tag, Spitze ~1000
  • Stack: TypeScript, React, vite, ReactRouter, ReduxToolkit, RTKQuery, MUI, Cypress, github mit Aktionen, docker, portainer
  • Backend: RESTFul APIs (extra Team)
  • Internationalisierung: 7 Sprachen integriert mit i18next
  • Teamgröße: 3 (1 Lead Dev, 1 Dev, 1 Owner/QA)
  • Meine Rolle: Lead Dev

Neben UI-Implementierung, Codereviews und der Verwaltung des Entwicklungsprozesses, habe ich das Projekt von Grund auf inklusive CI/CD mit Gitlab (später Github) und Docker eingerichtet. In diesem Projekt setzte ich das erste mal RTK Query ein. Die allgemeine Erfahrung damit war sehr gut. Wenn in einem Projekt Redux verwendet wird und viele API Endpunkte integriert werden müssen, würde ich RTKQuery wieder verwenden!

#

Security driven System update (2021)

Update einer großen php Webanwendung auf eine container-basierte Installation

  • Von PHP 5.4 mit TYPO3 Flow 3, klassische Server-Installation, RDMS-basierte Session
  • Zu PHP 7.4 mit Neos Flow 6 und Alpine Linux basierten Docker-Container, Redis basierte Session
  • Das Gute: Das PHP-Core-Update verlief relativ reibungslos mit einer überschaubaren Menge an erforderlichen Code-Aktualisierungen
  • Das Schlechte: Die Template Engine (NeosFlow) war der zeitaufwändigste Teil des Update-Prozesses

Ich habe das Update innerhalb des geplanten Zeitrahmens durchgeführt und das System im Rahmen einer Schulung an ein zweites Entwicklerteam übergeben. Später war das Team in der Lage, das System zu pflegen und z. B. Versions-Updates selbst durchzuführen.