60 lines
2.7 KiB
Markdown
60 lines
2.7 KiB
Markdown
# 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"**.
|