Für Neugierige & Recruiter
Wie diese Seite gebaut ist
Architektur, Stack und die Entscheidungen dahinter – jede Karte verlinkt direkt in den Quellcode.
Datenfluss
Browser
Angular 21 · Signals · Hydration
Express SSR
Prerendered HTML · NDJSON-Stream
Gemini 2.5 Flash
Schlüssel bleibt serverseitig
Build-Pipeline: kuratierte Bücher → Open Library/Google Books → zod-validierter Seed → Prerender aller Routen.
Stack
- Angular 21
- SSR + Prerendering
- @ngrx/signals
- Three.js
- GSAP + Lenis
- Tailwind CSS 4
- Transloco (DE/EN)
- Gemini BFF
- zod
- Vitest
- Playwright + axe
- Lighthouse CI
Entscheidungen
BFF statt Client-seitiger KI
Drei Stufen: Gemini streamt NDJSON (zod-validiert, halluzinierte IDs verworfen) → ohne API-Key rankt ein lokales EmbeddingGemma semantisch auf der Server-CPU → notfalls ein deterministischer Keyword-Recommender.
Quellcode ansehen →Prerendering statt SSR pro Request
Der Katalog ist zur Build-Zeit bekannt: Jede Route — inklusive aller Buchseiten samt JSON-LD — wird als statisches HTML ausgeliefert.
Quellcode ansehen →3D hinter @defer
Three.js lädt erst, wenn das Regal in den Viewport scrollt — mit Grid-Fallback für SSR, fehlendes WebGL und reduzierte Bewegung.
Quellcode ansehen →Selbst gehostete Cover + LQIP
Ein Build-Skript lädt jedes Cover einmal, erzeugt WebP in drei Größen plus Blur-Platzhalter — keine Laufzeit-Abhängigkeit von Dritt-APIs.
Quellcode ansehen →Signal Stores für den Zustand
Sechs @ngrx/signals-Stores (Katalog mit Entities, Warenkorb, Favoriten, Rezensionen, UI, KI) mit computed-Pipelines und localStorage-Persistenz über Effects.
Quellcode ansehen →Barrierefreiheit als CI-Gate
Playwright fährt axe-Audits (WCAG AA) über jede Route in beiden Themes — zusätzlich zu Skip-Link, aria-live, Fokus-Stilen und Reduced-Motion-Fallbacks.
Quellcode ansehen →