<
    Origin Roots Fashion UG 
    
    Frontend Shop system - MedusaJS

    Jan-Ole Rieper 
>


<Frontend_File_Structure>
/shop/
    /assets
    ├── /data
    ├──── products.json
    ├── /fonts
    ├── /icons
    ├── /images
    ├──── /logos
    ├──── /company
    ├──── /content
    ├──── /designs
    ├──── /products
    ├────── /product-id
    ├──────── 1-A.avif (Image ID "-" Quality A bis D "." format [lazy loading => .webp final .avif])
    ├──────── 1-A.webp
    ├──────── 1-B.avif 
    ├──────── 1-B.webp
    ├──────── ...
    ├──── /stocks
    ├── /videos
    ├──── /company
    ├──── /content
    ├──── /designs
    ├──── /products
    ├────── /product-id
    ├──────── 1-A.mp4 (Image ID "-" Quality A bis D "." format = mp4)
    ├──── /stocks

    /auth
    ├── account.html
    ├── sign-in.html
    ├── sign-up.html
    ├── forgot-password.html
    ├── reset-password.html

    /components
    ├── header.html
    ├── footer.html
    ├── popups.html

    /css
    ├── auth.css
    ├── checkout.css
    ├── (usw.)...


    /js
    ├──  /core
    ├──── api.js (API / Communication with backend server)
    ├──── app.js (shop system)
    ├──── auth.js (authentication)
    ├──── components.js (header, footer, popups & co.)
    ├── /modules
    ├──── cart.js (Shopping Cart Local & Function call -> Medusa SDK)
    ├──── search.js (Local Search & Online via backend server)
    ├──── products.js 
    ├── /pages
    ├──── account.js (Order History, Change Addresses, Passwords, Wishlist)
    ├──── sign-in.js
    ├──── sign-up.js
    ├──── forgot-password.js
    ├──── reset-password.js
    ├──── checkout.js
    ├──── templates.js (Template Section)
    ├──── collections.js


    /pages
    ├── contact.html
    ├── faq.html
    ├── imprint.html
    ├── policies.html
    ├── terms.html
    ├── privacy.html
    ├── return.html
    ├── shipping.html
    ├── quality.html
    ├── termsofservice.html

    about.html
    checkout.html
    index.html
    products.html
    robots.txt
    sitemap.xml

    /products
    ├── product-title-or-id.html
    ├── ...html

    /collections
    ├── collection-title-or-id.html


<Frontend_Tasks_Shop>
Frontend - Tasks:
  Phase 1 – SDK & API-Grundlage
  ├── Medusa-Browser-ESM besorgen
  ├── Version festpinnen
  ├── SDK lokal ins Frontend übernehmen
  ├── api.js erstellen/implementieren
  ├── Backend-URL zentral definieren
  ├── Publishable API Key zentral definieren
  ├── Session-Authentifizierung vorbereiten
  ├── Locale vorbereiten
  ├── Region vorbereiten
  ├── zentralen Request-/Error-Mechanismus aufbauen
  ├── ersten echten Backend-Test durchführen

  Phase 2 – Daten-/Cache-System
  ├── products.json als lokalen Initialbestand verwenden
  ├── Produktdaten im Memory halten
  ├── Produktdaten in Browser Storage halten
  ├── Versionierung des Produktbestands
  ├── Backend-Version gegen lokalen Stand vergleichen
  ├── nur bei Bedarf aktualisieren
  ├── Cache invalidieren
  ├── mehrere Tabs berücksichtigen
  ├── Offline-/Backend-Ausfall sinnvoll behandeln
  ├── Stock niemals cachen

  Phase 3 – Shopdaten
  ├── Produkte
  ├── Kategorien/Collections
  ├── Regionen
  ├── Lokalisierung
  ├── Varianten
  ├── Preise
  ├── Verfügbarkeit

  Phase 4 – Cart
  ├── Medusa Cart
  ├── lokale Cart-ID
  ├── Cart-Rehydration
  ├── Mengenänderung
  ├── Variantenauswahl
  ├── Cart UI
  ├── Guest → Customer Cart

  Phase 5 – Auth
  ├── Registrierung
  ├── Login
  ├── Session
  ├── Logout
  ├── Customer
  ├── Adressen
  ├── Passwortänderung
  ├── Passwort-Reset

  Phase 6 – Checkout
  ├── Adresse
  ├── Shipping Options
  ├── Shipping Price
  ├── Billing
  ├── Payment
  ├── Stripe
  ├── Complete Cart
  ├── Order Confirmation

  Phase 7 – finale Optimierung
  ├── Request-Deduplizierung
  ├── Lazy Loading
  ├── Prefetching
  ├── Cache-Hit-Optimierung
  ├── DOM-Performance
  ├── Bundle-/Dateigrößen
  ├── CSP
  ├── Security Headers
  ├── finale Produktbild-Architektur