Initial commit: Van's DIY & Bastelbedarf Astro shop

2026-08-02 13:22:55 +02:00
commit 2e340f7a8a
92 changed files with 11022 additions and 0 deletions
@@ -0,0 +1,59 @@
+# Van's DIY & Bastelbedarf – Website (lokale Vorschau)
+
+Hallo VanVan 🩵 Das hier ist der Code für deinen zukünftigen Onlineshop. Du musst nichts
+programmieren – diese Anleitung reicht, um die Seite auf deinem PC anzusehen.
+
+## Schnellstart (empfohlen)
+
+1. Doppelklick auf die Datei **`Vorschau-Starten.bat`** in diesem Ordner.
+2. Es öffnet sich ein schwarzes Fenster, das kurz Dinge vorbereitet.
+3. Danach öffnet sich automatisch dein Browser mit der Vorschau.
+4. Zum Beenden: im schwarzen Fenster `Strg + C` drücken, dann Fenster schließen.
+
+Falls sich nichts öffnet: prüfe, ob im schwarzen Fenster ein Hinweis auf **Node.js** steht (siehe
+unten) und lies die Fehlermeldung genau durch.
+
+## Voraussetzung: Node.js
+
+Diese Website braucht ein kostenloses Programm namens **Node.js**, damit sie auf deinem PC laufen
+kann (das ist wie ein kleiner "Motor" für moderne Webseiten).
+
+- Prüfen, ob es schon installiert ist: das Start-Skript macht das automatisch.
+- Falls nicht: Download unter **https://nodejs.org** → den Button mit **"LTS"** wählen →
+  installieren (einfach überall "Weiter" klicken) → danach `Vorschau-Starten.bat` erneut starten.
+
+## Manueller Start (für Filipe / falls das Skript mal nicht geht)
+
+Im Ordner `shop/` in einer Kommandozeile (z. B. Git Bash oder PowerShell):
+
+```
+npm install     # nur beim allerersten Mal nötig
+npm run build   # baut die Seite (prüft, ob alles fehlerfrei ist)
+npm run dev     # startet die lokale Vorschau
+```
+
+Danach im Browser öffnen: **http://localhost:4321**
+
+## Was ist das hier gerade für ein Stand?
+
+**Phase 1 – Design & Struktur.** Alle Seiten aus dem Pflichtenheft sind als echtes, klickbares
+Frontend vorhanden (Startseite, Shop, Kategorien, Produktseiten, Warenkorb, Checkout-Vorschau,
+rechtliche Seiten usw.). Der Warenkorb funktioniert bereits (im Browser gespeichert), es gibt aber
+**noch keine echte Bestellabwicklung, keine echte Zahlung und noch kein Adminbereich** – das folgt
+in Phase 2. Alle Produkte, Preise, Bilder und der "Über die Kreative"-Text sind aktuell **Platzhalter**
+und werden ersetzt, sobald du echte Fotos/Texte/Preise lieferst.
+
+## Projektstruktur (kurz)
+
+```
+shop/
+├─ src/pages/       ← jede Datei hier ist eine Seite der Website
+├─ src/data/        ← Produkte & Kategorien (hier später echte Daten eintragen)
+├─ src/components/  ← wiederverwendbare Bausteine (z. B. Produktkarte)
+├─ src/layouts/      ← gemeinsamer Rahmen (Header/Footer) aller Seiten
+├─ src/styles/       ← Farben, Schriften, Design-Grundlagen
+└─ public/           ← Logo, Icons, robots.txt
+```
+
+Mehr Hintergrund (Pflichtenheft-Zusammenfassung, Branding-Entscheidungen, Tech-Stack-Begründung)
+steht im Obsidian-Vault unter **„Van Van – Homepage"**.