Eine Umfrage-Anwendung, die als Nuxt-Starter begann und zu einer typisierten Full-Stack-App mit Authentication, Survey-Workflows, Results-Reporting und einer reproduzierbaren CI/CD-Pipeline herangewachsen ist.
Das Frontend nutzt Nuxt UI für die interaktive Shell. Nitro betreibt die API-Routes unter server/api/, während Prisma das Schema, die Migrations, die Seed-Daten und den generierten Client verantwortet. Geteilte Helpers und Table-Logik liegen in fokussierten Ordnern, damit UI- und Server-Belange getrennt bleiben.
Frontend
Nuxt-UI-Pages, Components, Composables und die geteilte Table-Logik, die über Home, Admin und Search hinweg wiederverwendet wird.
Server
Nitro-API-Routes, Middleware, Plugins und Request-Helpers unter server/utils/ — Input wird server-seitig validiert.
Data
Prisma-Schema, versionierte Migrations, Seed-Scripts und ein generierter Client, den die Server-Routes nutzen.
Docs & DX
Öffentliche Docs unter pages/Documentation/, Scalar-gerendertes OpenAPI, i18n-Keys und eine Preview-Pipeline für E-Mails.
Feature-Highlights
Worauf sich die letzte Arbeit konzentriert hat
Ein paar Bereiche, in denen sich die Codebase in größeren Schritten statt in kleinen Fixes bewegt hat — die Cards unten fassen das Warum und die Form jedes Teils zusammen.
Architecture
Wiederverwendbare, stateful Survey-Table
home.vue wurde in fokussierte Components aufgeteilt, sodass eine einzige Survey-Table über Home, Admin und die Header-Search-Box hinweg rendert — eine Source of Truth, drei Surfaces. Column-, Sort- und Pagination-State werden persistiert und lokalisiert, sodass die View Reloads und Locale-Wechsel übersteht.
CI/CD
Modulare GitLab-CI + Twemoji-Tree-Shaking
Die Pipeline wurde in Include-Files für Build-, Test-, Package- und Deploy-Stages aufgeteilt, mit einem Benchmarking-Helper, um Regressions zu tracken. Ein Postinstall-Step sammelt jetzt nur die Twemoji-SVGs ein, die die App tatsächlich referenziert — generierte Assets bleiben aus Git heraus, und Docker-/CI-Builds bekommen bei einem frischen Clone die Inputs, die sie brauchen.
Security
Sign-up-Hardening + Brute-Force-Schutz
Wiederholte Sign-ups werden hinter einem generischen 409 dedupliziert, damit Angreifer nicht herausfinden können, welche Adressen existieren, und IP-Rate-Limiting via nuxt-api-shield schützt /api/auth/login, /api/auth/register und /api/survey/accessCode. Ein leichtgewichtiger In-Memory-Helper schreibt Suspicious-Activity-Rows fürs Audit, ohne den Request-Hot-Path zu verlangsamen.
Email
Templated E-Mail + Offline-Preview
Die Confirmation-Mail wird aus vue-email-Components hinter einem geteilten EmailLayout zusammengesetzt, das <Html>, <Tailwind>, den Logo-Header und die Footer-Links besitzt. Theming ist implizit — das Layout importiert app.config.ts, sodass die Brand-primaryColor ohne Prop-Drilling einfließt. yarn preview-emails rendert jedes Template mit einem previewProps-Export via Vite-SSR nach email/preview/*.html, sodass Design-Iteration nicht von SMTP abhängt. DKIM/SPF/DMARC-Alignment kam parallel dazu und erreicht compauth=pass in Outlook.
PWA
Installierbare PWA
Die App registriert sich als service-worker-gestützte PWA mit generiertem Manifest und Icon-Set, sodass sie sich auf Desktop oder Home-Screen installiert und standalone startet — ein poliertes Extra über der regulären Web-App.
Tooling
Admin-Impersonation + robuste Header-Search
Admins können als anderer User agieren, um exakt zu reproduzieren, was diese Person sieht — hinter gehärteten Guards. Die Header-Search wurde als inline ausklappendes Field mit einem viewport-zentrierten Popover neu gebaut, das bei wiederholtem Ctrl+F zuverlässig öffnet und schließt — kleines UX-Engineering, das echte Sorgfalt brauchte.
Performance
Schlankere Builds + schlankere Images
Der Migrator schrumpfte auf ein eigenständiges Prisma-CLI-Image (~350 MB), ungenutzte MDI-Icon-Sets wurden entfernt und die zwei Brand-Icons lokalisiert, und der tote @js-joda-+-CLDR-Stack wurde herausgenommen — zusammen Hunderte MB weniger bei Cold-Installs und Image-Builds. Traefik wurde aufs Proxy-Network gepinnt, um sporadische 504er zu beenden.
Finalization
Milestones
Vom Scaffold bis heute
Aus der Git-History ausgewählt. Noch keine Semantic Versions, daher ist jeder Eintrag datiert und unter der Phase gruppiert, zu der er gehört.
