weihnachtswunschliste-online.de läuft komplett im Browser. Die Wunschliste wird nicht auf einem Server gespeichert, sondern lokal im Browser-Speicher und im Share-Link, den du selbst weitergibst. Auf dieser Seite sind die wichtigsten technischen Entscheidungen und Datenquellen offengelegt.

Architektur: client-only, kein Server

Das Tool ist eine Astro-Single-Page-Application mit einer React-Komponente für die Wunschlisten-Bearbeitung. Wenn du eine Wunschliste erstellst, passieren drei Dinge:

Die Liste wird in deinem Browser-Speicher abgelegt (localStorage unter dem Key wishlist:<id>).
Wenn du "QR-Code erzeugen" klickst, wird der komplette Wunschlisten-Inhalt in einen Base64-Code umgewandelt und an die URL angehängt, nach dem #-Zeichen.
Aus dieser URL wird ein QR-Code gerendert (PNG-Data-URL via qrcode).

Wenn jemand den Share-Link oder den QR-Code öffnet, liest der Browser den Inhalt nach dem #-Zeichen und stellt die Wunschliste wieder her. Es findet keine Server-Anfrage statt. Das ist der Grund warum das Tool ohne Anmeldung funktioniert.

Reservierungs-Pattern

Wer einen Wunsch reserviert, bekommt einen neuen Share-Link, der enthält den aktualisierten Reservierungs-Status. Diesen Link schickt die Person dann zurück an die Familie. So sieht jeder wer schon was reserviert hat, ohne dass das Wunschkind die Reservierungen sehen muss (es nutzt seinen alten Link).

Pitfall: reine localStorage-Synchronisation funktioniert nicht über Geräte hinweg. Die Lösung ist die URL-Codierung, der State liegt im Share-Link selbst, nicht auf einem Server.

Unicode-sichere Codierung

Die Standard-Browser-Funktionen btoa und atob brechen bei Umlauten (ä, ö, ü, sz). Auf weihnachtswunschliste-online.de wird der JSON-String erst per encodeURIComponent in ASCII-Bytes übersetzt, dann per Base64 codiert, dann werden die URL-unfreundlichen Zeichen +, / und = ersetzt. So funktionieren auch lange Wünsche wie "Bücher über Straße" oder "Pfütze, Grösse gross" zuverlässig in jedem Browser.

QR-Code-Konfiguration

Format: PNG, Standardgrösse 256x256 Pixel
Fehlerkorrektur-Level: M (Medium, ca. 15% Fehlertoleranz), Standard für Screenshots und Druck
Brand-Farben: Dunkles Weihnachts-Rot #9b1629 auf weissem Hintergrund, hoher Kontrast für zuverlässiges Scannen
Margin: 1 Modul Rand (minimum nach QR-Code-Spezifikation ISO/IEC 18004)

Quellen und Daten

Das Tool selbst verwendet keine externen Daten, es speichert nur, was du eintippst. Die Ratgeber-Texte greifen auf folgende Quellen zurück:

QR-Code-Standard: ISO/IEC 18004:2024
Base64-Standard: RFC 4648
URL-Spezifikation: WHATWG URL Standard
localStorage und Web Storage API: W3C Recommendation
DSGVO: Verordnung (EU) 2016/679, Bundesdatenschutzgesetz (BDSG)
UWG: Gesetz gegen den unlauteren Wettbewerb
BGB: Bürgerliches Gesetzbuch, insbesondere §§ 516 ff. zur Schenkung

Bug-Reports und Korrekturen

Wenn dir ein Fehler im Tool oder in den Ratgeber-Texten auffällt, schick uns eine Mail: info@akara-solutions.de. Wir prufen und veröffentlichen Korrekturen auf der Seite Korrekturen.