Web Page Generator

Dieses Projekt ist eine vollwertige SaaS-Webanwendung zur Erstellung und Verwaltung dynamischer Web-Seiten, die mit QR-Codes oder benutzerdefinierten URLs verknüpft werden können. Die Plattform bietet Nutzern eine strukturierte Umgebung, um Inhalte zu erstellen, zu veröffentlichen und über ein persönliches Dashboard zu verwalten. Jede Web-Seite kann jederzeit aktualisiert werden, ohne den QR-Code oder die URL zu ändern, die darauf verweist. Dadurch kann sich der Content flexibel weiterentwickeln, während der physische oder verteilte QR-Code unverändert bleibt. Die Anwendung bildet typische SaaS-Prozesse ab, darunter Registrierung und Authentifizierung, Abo- und Tarifverwaltung, funktionsbasierte Limits, Projektorganisation sowie das Rendering öffentlicher Seiten.

Funktionaler Umfang

Content- und Seiten-Builder

Die Inhalte der Seiten werden über einen modularen Builder erstellt. Unterstützt werden Textblöcke, Links, strukturierte Abschnitte, Kontaktdaten sowie weitere Content-Module. Die fertigen Seiten werden unter einer öffentlichen URL-Struktur (/w/[qrId]) veröffentlicht und sind ohne Anmeldung abrufbar. Änderungen am Content erfolgen dynamisch über das Dashboard, während der QR-Code unverändert bestehen bleibt.

QR-Code-Integration und individuelles Design

Die Plattform ermöglicht die Generierung und Integration von QR-Codes für unterschiedliche Anwendungsfälle, z. B. persönliche Profile, Promotions oder Kampagnen. Umfangreiche Design-Optionen wie Farben, Formen und visuelle Varianten stehen zur Verfügung. Gebrandete QR-Codes können an bestehende Corporate-Design-Vorgaben angepasst werden, ohne die technische Funktionalität zu beeinträchtigen.

1 / 23

Benutzer-Dashboard

Im persönlichen Bereich verwalten Nutzer ihre Projekte und Web-Seiten, inklusive Listenansicht, Filterung, Bearbeitung und Inhaltsaktualisierung. Zusätzlich können Profildaten angepasst sowie Abonnements, verfügbare Funktionen und Nutzungslimits eingesehen werden.

Abonnements und Funktionslimits

Der Zugriff auf Funktionen und die Anzahl dynamischer Web-Seiten ist tarifabhängig geregelt. Die Logik für Upgrade- und Downgrade-Szenarien, die Anzeige des aktuellen Abo-Status sowie die Durchsetzung von Zugriffsbeschränkungen sind konsistent in der Anwendung umgesetzt.

Technische Architektur und Stack

Die Anwendung basiert auf einem modernen Frontend-Stack: Next.js 16 (App Router), React 19, TypeScript, React Query, Axios, React Hook Form mit Zod sowie SCSS Modules.

Architektur-Struktur

Die Architektur folgt einer klaren Schichtung: • app/ — Routing und Seitenkomposition • features/ — fachliche Geschäftslogik (Authentifizierung, Abonnements, Projekte, QR-Verwaltung) • shared/ — wiederverwendbare UI-Komponenten, Konfigurationen und Infrastruktur Strikte Import-Regeln stellen sicher, dass Abhängigkeiten zwischen den Schichten kontrolliert bleiben.

API-Kommunikation

Die API-Kommunikation erfolgt über eine zentrale Axios-Instanz mit Interceptors für einheitliches Error-Handling, Refresh-Token-Logik und Schutz vor Race-Conditions.

Authentifizierung

Die Authentifizierung basiert auf JWT. Access-Tokens werden im Speicher gehalten, Refresh-Tokens in konfigurierbarem Storage abgelegt. Automatische Session-Erneuerung sowie kontrollierte Weiterleitungen bei Ablauf sind implementiert.

State- und Datenmanagement

Für State- und Datenmanagement kommt React Query zum Einsatz, inklusive Caching, gezielter Invalidation, zentraler Query-Keys und globaler Behandlung von Netzwerkfehlern.

UI-System

Das UI-System basiert auf SCSS Modules und Design-Tokens und stellt konsistente Zustände, klare Text- und Fehlerlogik sowie eine skalierbare Komponentenstruktur sicher.

Einordnung des Produkts

Bei dieser Plattform handelt es sich nicht um einen statischen Web-Seiten-Generator. Jede Web-Seite repräsentiert ein verwaltbares digitales Objekt, das mit QR-Codes oder benutzerdefinierten URLs verknüpft werden kann. Inhalte können veröffentlicht, angepasst und weiterentwickelt werden, während die Referenzen stabil bleiben. Die Anwendung ist als wartbares SaaS-System konzipiert, mit Fokus auf klare Architektur, Erweiterbarkeit und langfristige Nutzung.

Was wir geliefert haben

• Vollwertige SaaS-Webanwendungsarchitektur
• Dynamisches Web-Seiten-Generierungs- und Verwaltungssystem
• Modularer Seiten-Builder für anpassbare Web-Seiten
• QR-Code-Integration und Anpassungsfunktionen
• Benutzerauthentifizierung und Abonnementverwaltung
• Funktionsbasierte Zugriffskontrolle und Tariflimits
• Responsives Dashboard für Projekt- und Web-Seiten-Verwaltung
• Öffentliches Seiten-Rendering-System mit dynamischen Content-Updates

Ergebnis

Die Plattform bietet eine vollständige SaaS-Lösung für die Verwaltung dynamischer Web-Seiten, mit der Nutzer Web-Seiten erstellen, anpassen und verwalten können, die mit QR-Codes oder benutzerdefinierten URLs verknüpft sind. Die strukturierte Architektur gewährleistet Skalierbarkeit, Wartbarkeit und Erweiterbarkeit für zukünftige Funktionsentwicklung.