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