Ein Demo-Onlineshop im Testmodus: Produktliste, Produktdetails, Warenkorb mit IndexedDB, und Stripe Checkout für den Bezahlfluss.
Die App nutzt moderne Angular 20-Features (Standalone Components, Signals, @for/@if) und eine klare Trennung von Konfiguration per DI-Tokens.

Hinweis: Dieses Frontend ist für Lern- und Testzwecke und nicht als Produktionssystem gedacht.

• Zeigt Produkte aus dem Backend an (GET /products, GET /products/:id).
• Nutzer können Produkte in einen persistenten Warenkorb legen (Speicherung im Browser via IndexedDB/Dexie).
• Stripe Checkout (Testmodus) startet beim Klick auf „Zur Kasse“.
• Nach erfolgreicher Zahlung leeren wir den Warenkorb nur, wenn Stripe uns zur success_url mit ?session_id=... zurückschickt.

• Framework: Angular 20
• Komponenten: Standalone Components, ChangeDetectionStrategy.OnPush
• Reaktivität: Signals (signal, computed, effect), toSignal für Router-Parameter
• Templates: @for, @if (keine *ngFor/*ngIf mehr)
• State/Persistenz: Dexie (IndexedDB) für den Warenkorb – Primärschlüssel product.id
• HTTP: HttpClient mit API-Basis-URL über DI-Token (API_URL)
• Konfiguration: DI-Tokens API_URL, STRIPE_PUBLIC_KEY via app.config.ts
• Stripe: @stripe/stripe-js wird lazy geladen (on-demand), nur der Publishable Key (pk_...) wird im Frontend verwendet
• Fehler/Loading: Signale im ProductsService/CartService für UI-Feedback

• Node.js 20+
• npm (oder pnpm/yarn)
• Optional: Angular CLI (npm i -g @angular/cli)

1. Abhängigkeiten installieren:

npm install

npm start           # oder: npx ng serve
# App unter http://localhost:4200

• cart.service baut ein Payload nur mit { productId, quantity }.
• POST /create-checkout-session an das Backend.
• @stripe/stripe-js wird lazy geladen und ruft redirectToCheckout({ sessionId }).
• Erfolgreiche Rückkehr zu .../success?session_id=cs_test_... → Komponente leert den Warenkorb.
• Testkarte: 4242 4242 4242 4242 (beliebiges Datum/CVC/PLZ).

Payam Koushkbaghi