# 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"**.