Vollständiger URL-Kürzungsdienst - Build

## 🚀 URL-Verkürzungsdienst - Full-Stack-Anwendung ### 📋 Projektübersicht Entwickeln Sie einen produktionsreifen, Full-Stack-URL-Verkürzungsdienst mit einem modernen, barrierefreien Frontend und einer robusten RESTful-Backend-API. Die Anwendung muss den gesamten Lebenszyklus verkürzter Links abdecken: Erstellung, Weiterleitung, Tracking, Verwaltung und Ablauf. Priorisieren Sie Leistung, Sicherheit und ein außergewöhnliches Benutzererlebnis auf allen Geräten. --- ### 🛠️ Technologie-Stack **Frontend:** - Semantisches HTML5 mit ARIA-Attributen für Barrierefreiheit (WCAG 2.1 AA-Konformität) - CSS3 mit CSS Custom Properties (Variablen), Flexbox und CSS Grid - Vanilla JavaScript (ES2022+) mit modularer Architektur (ES-Module) - Keine schweren Frameworks - halten Sie das Bundle leichtgewichtig und schnell **Backend-API:** - RESTful-API-Design gemäß OpenAPI-3.0-Spezifikation - JSON-Anfrage-/Antwortformat mit korrekten HTTP-Statuscodes - CORS-Konfiguration für Cross-Origin-Anfragen - Ratenbegrenzung pro IP und pro API-Schlüssel **Bibliotheken (CDN oder gebündelt):** - QR-Code-Generierung (z. B. `qrcode.js` oder `qr-creator`) - Diagrammbibliothek für Analysen (z. B. Chart.js oder eine leichtgewichtige Alternative) - Datumsauswahl für den Ablauf (z. B. `flatpickr`) - Toast-Benachrichtigungssystem (selbst erstellt, ohne Abhängigkeit) --- ### 🎨 Frontend - UI/UX-Anforderungen **Layout & Design:** - Sauberes, minimalistisches Design mit einem Hero-Bereich mit einem **großen, prominenten URL-Eingabefeld** in der Seitenmitte - Implementieren Sie einen **Dunkel-/Hellmodus-Umschalter** mit Erkennung der Systemeinstellung (`prefers-color-scheme`) und `localStorage`-Persistenz - Verwenden Sie ein konsistentes Designsystem: Typografie-Skala, Abstands-Tokens, Farbpalette - Sanfte Mikroanimationen und Übergänge (Einblendungen, Slide-ups, Button-Ripple) für alle interaktiven Elemente - Skeleton-Ladezustände für asynchrone Inhalte (Analysen, Verlaufstabelle) **Responsives Design:** - Mobile-First-Ansatz mit Breakpoints bei 480px, 768px, 1024px und 1440px - Touch-freundliche Tippziele (mindestens 44×44px) - Einklappbares Navigationsmenü auf Mobilgeräten (Hamburger-Menü mit Animation) - Flüssige Typografie mit `clamp()` **Barrierefreiheit:** - Vollständige Tastaturnavigation (Tab-Reihenfolge, Fokus-Falle in Modalen) - Screenreader-Ansagen für dynamische Inhalte (`aria-live`-Bereiche) - Sichtbare Fokusindikatoren auf allen interaktiven Elementen - Ausreichende Farbkontrastverhältnisse (mindestens 4,5:1 für Text) - Unterstützung für reduzierte Bewegung (`prefers-reduced-motion`) --- ### ⚙️ Kernfunktionen #### 1. URL-Verkürzungs-Engine - Hervorgehobenes Eingabefeld mit Platzhaltertext und Echtzeit-Validierungsfeedback - **URL-Validierung**: Prüfen Sie auf gültiges Protokoll (`http://`, `https://`), korrekte Domain-Struktur und lehnen Sie fehlerhafte URLs sowohl mit Regex als auch mit der `URL`-Konstruktor-API ab - **URL-Bereinigung**: Entfernen Sie Tracking-Parameter (UTM, fbclid, gclid), entfernen Sie redundante Schrägstriche, normalisieren Sie Protokoll und Groß-/Kleinschreibung - Automatisches Voranstellen von `https://`, wenn kein Protokoll angegeben ist - Zeigen Sie die verkürzte URL sofort nach der Erstellung mit einer Erfolgsanimation an - **Massen-URL-Verkürzung**: Ermöglichen Sie Benutzern, mehrere URLs (eine pro Zeile) einzufügen und alle auf einmal zu verkürzen #### 2. Unterstützung für benutzerdefinierte Aliase - Optionales Feld für benutzerdefinierten Alias (z. B. `short.ly/my-brand`) - Echtzeit-Verfügbarkeitsprüfung während der Eingabe (entprellter API-Aufruf, 300ms) - Alias-Validierungsregeln: alphanumerisch, Bindestriche, Unterstriche nur; 3-30 Zeichen; Blacklist für reservierte Wörter (z. B. `admin`, `api`, `login`, `static`) - Klare Fehlermeldungen, wenn der Alias vergeben oder ungültig ist #### 3. QR-Code-Generierung - Automatische Generierung eines QR-Codes für jede verkürzte URL bei der Erstellung - QR-Code-Modal/Panel mit Optionen zum: - Herunterladen als PNG (hohe Auflösung, 1024×1024) - Herunterladen als SVG (Vektor, skalierbar) - Anpassen von Vorder-/Hintergrundfarben - Hinzufügen eines kleinen Logo-Overlays in der Mitte (optional) - Stellen Sie sicher, dass QR-Codes die vollständige verkürzte URL kodieren und in kleinen Größen scannbar sind #### 4. Klick-Tracking & Analyse-Dashboard - Verfolgen Sie jede Weiterleitung mit den folgenden Datenpunkten: - Zeitstempel (UTC) - Land und Stadt (über IP-Geolokalisierungs-API) - Gerätetyp (mobil, Tablet, Desktop) - Betriebssystem und Browser (über User-Agent-Parsing) - Referrer-URL - Einzigartiger vs. wiederkehrender Besucher (über Cookie/Fingerabdruck) - **Analyse-Dashboard** pro Link einschließlich: - Gesamtklicks- und Einzelklick-Zähler - Liniendiagramm der Klicks im Zeitverlauf (filterbar: letzte 24h, 7d, 30d, 90d, gesamter Zeitraum) - Geografische Verteilungskarte oder Balkendiagramm (Top-10-Länder) - Geräte-/OS-/Browser-Aufschlüsselung (Donut- oder Kreisdiagramme) - Tabelle der Top-Referrer - Klick-Heatmap nach Wochentag und Stunde - Aggregierte Analyseübersicht auf dem Haupt-Dashboard (Gesamtlinks, Gesamtklicks, beliebtester Link) #### 5. Link-Ablauf - Optionale Ablaufdatum-/Uhrzeitauswahl bei der Linkerstellung - Unterstützung von Voreinstellungen: 1 Stunde, 24 Stunden, 7 Tage, 30 Tage, benutzerdefiniertes Datum - Anzeige eines Countdowns oder "läuft ab in X"-Abzeichens auf aktiven Links - Automatische Deaktivierung abgelaufener Links und Anzeige einer freundlichen "Dieser Link ist abgelaufen"-Seite bei Weiterleitungsversuchen - Ermöglichen Sie Benutzern, den Ablauf bestehender Links zu verlängern oder zu entfernen #### 6. Passwortschutz - Optionaler Passwort-Umschalter bei der Linkerstellung - Wenn aktiviert, zeigen Sie eine Passworteingabe-Gate-Seite vor der Weiterleitung zur Ziel-URL an - Hashen Sie Passwörter serverseitig mit bcrypt oder Argon2 (niemals Klartext speichern) - Ratenbegrenzung für Passwortversuche (max. 5 pro Minute pro IP) mit Sperr-Nachrichten - Visueller Indikator (Schloss-Symbol 🔒) auf passwortgeschützten Links in der Verlaufsansicht #### 7. In die Zwischenablage kopieren - Ein-Klick-Kopierbutton neben jeder verkürzten URL - Verwenden Sie die Clipboard-API (`navigator.clipboard.writeText()`) mit Fallback auf `document.execCommand('copy')` - Visuelle Bestätigung: Button-Icon wechselt zu einem Häkchen ✅ mit einem "Kopiert!"-Tooltip/Toast, der nach 2 Sekunden automatisch verschwindet - Tastaturkürzel-Unterstützung (z. B. `Ctrl+Shift+C` zum Kopieren des zuletzt erstellten Links) #### 8. URL-Verlauf & Verwaltung - Persistente Verlaufstabelle/-raster aller verkürzten URLs (in `localStorage` für Gäste, in der Datenbank für authentifizierte Benutzer) - Jeder Eintrag zeigt: Original-URL (gekürzt mit Tooltip), Kurz-URL, Erstellungsdatum, Klickanzahl, Status (aktiv/abgelaufen/passwortgeschützt) und Aktionsbuttons - **Suche**: Volltextsuche über Original-URLs, Aliase und Tags - **Filterung**: Nach Status (aktiv, abgelaufen, geschützt), Datumsbereich, Klickanzahlbereich und Tags - **Sortierung**: Nach Erstellungsdatum, Klickanzahl, alphabetisch (aufsteigend/absteigend) - **Paginierung oder unendliches Scrollen** für große Verläufe (25 Elemente pro Seite) - **Massenaktionen**: Mehrere Links auswählen, um sie zu löschen, zu deaktivieren oder als CSV/JSON zu exportieren - **Tags/Labels**: Ermöglichen Sie Benutzern, benutzerdefinierte Tags zur Organisation von Links hinzuzufügen (z. B. "marketing", "social", "campaign-q4") --- ### 🔒 Sicherheitsanforderungen - Eingabebereinigung sowohl auf Client- als auch auf Serverseite zur Verhinderung von XSS-Angriffen - CSRF-Schutz auf allen zustandsändernden API-Endpunkten - Validieren und bereinigen Sie Weiterleitungsziele, um offene Weiterleitungs-Schwachstellen zu verhindern (Whitelist erlaubter Protokolle, blockieren Sie `javascript:`, `data:`, `file:`-Schemen) - Implementieren Sie Content-Security-Policy-Header (CSP) - Ratenbegrenzung: max. 20 Linkerstellungen pro Minute pro IP; max. 100 API-Anfragen pro Minute - Sichere HTTP-Header: `X-Content-Type-Options`, `X-Frame-Options`, `Strict-Transport-Security` - Interne IDs niemals offenlegen; verwenden Sie nanoid oder UUID für öffentliche Link-Identifikatoren --- ### ⚡ Leistungsanforderungen - Ziel-Lighthouse-Werte: Leistung >90, Barrierefreiheit >95, Best Practices >95, SEO >90 - Lazy-Loading für Analyse-Diagramme und nicht-kritische Assets - Entprellen Sie alle Such- und Validierungseingaben - Verwenden Sie `IntersectionObserver` für scrollbasierte Animationen und Lazy-Loading - Minimieren Sie Reflows und Repaints; verwenden Sie CSS `transform` und `opacity` für Animationen - Cachen Sie API-Antworten wo angemessen (z. B. Analysedaten mit 60s TTL) - Weiterleitungen sollten serverseitig in unter 100ms aufgelöst werden --- ### 🧪 Fehlerbehandlung & Randfälle - Verständliche Fehlermeldungen für: Netzwerkfehler, API-Timeouts, ungültige URLs, doppelte Aliase, Serverfehler (500), Ratenbegrenzung überschritten (429) - Offline-Erkennung: Zeigen Sie ein Banner an, wenn der Benutzer die Verbindung verliert, und stellen Sie Aktionen für einen erneuten Versuch in die Warteschlange - Behandeln Sie extrem lange URLs (bis zu 2048 Zeichen), ohne das Layout zu brechen - Behandeln Sie Unicode/internationalisierte Domainnamen (IDN) korrekt - Leere-Zustand-Illustrationen für den Fall, dass der Benutzer keine Links oder keine Analysedaten hat --- ### 📦 Liefergegenstände 1. Vollständiger, gut kommentierter Quellcode mit einer klaren Ordnerstruktur 2. `README.md` mit Einrichtungsanweisungen, API-Dokumentation und Feature-Liste 3. API-Endpunkt-Referenztabelle (Methode, Pfad, Parameter, Antwortformat) 4. Ein `demo`-Modus mit vorab geladenen Beispieldaten für eine sofortige Vorschau 5. Responsiv in Chrome, Firefox, Safari und Edge (die letzten 2 Versionen) --- > **Hinweis:** Bauen Sie dies inkrementell auf - beginnen Sie mit dem Kern-Verkürzungsfluss (Eingabe → Validierung → Verkürzen → Anzeige → Kopieren), dann fügen Sie QR-Codes, Analysen, benutzerdefinierte Aliase, Ablauf, Passwortschutz und das vollständige Verlaufs-Dashboard hinzu. Stellen Sie sicher, dass jede Funktion vollständig funktional und getestet ist, bevor Sie zur nächsten übergehen.