einsamerwolfdh/CLAUDE.md

EinsamerWolfDH - SDSO Fan-Wiki

Projekt: Detailliertes Fan-Wiki für Seven Deadly Sins: Origin mit interaktiver Map und Ressourcen-Tracker

Status: 🚀 Phase 1 - Foundation

🎯 Vision

Ein umfassendes Fan-Wiki für SDSO mit:

• 📘 Obsidian-Vault für Forschung & Notizen
• 💾 PostgreSQL Datenbank mit allen Inhalten
• 🌐 React/Next.js Website mit:
  • Detailliertes Fan-Wiki
  • Interaktive Map der SDSO-Welt
  • Ressourcen-Tracker (Was braucht man für Charakter/Waffe/Rüstung?)
  • Character-Profile & Item-Details
  • Beziehungsnetzwerk-Visualisierung
  • Search & Filter

📁 Projektstruktur

EinsamerWolfDH/
├── docs/obsidian-vault/      # Obsidian-Vault für Forschung
├── frontend/                  # Next.js React App (später)
├── backend/                   # Node.js API (später)
├── database/                  # PostgreSQL Schema & Seeds
└── docker-compose.yml         # PostgreSQL Container

🔧 Tech Stack

• Frontend: Next.js 14 + React 18 + TypeScript + Tailwind CSS
• Map: Leaflet + React-Leaflet
• Database: PostgreSQL (Docker)
• API: Next.js API Routes oder Express.js
• Hosting: Vercel (Frontend) + Eigener Server (Backend/DB)
• Notes: Obsidian

📋 Implementierungs-Roadmap

✅ Phase 1: Foundation (AKTUELL)

• Project Setup (Git, Verzeichnisse)
• Obsidian-Vault Struktur
• PostgreSQL Schema
• .gitignore & README
• Obsidian in Betrieb nehmen
• PostgreSQL starten (docker-compose up)
• Next.js Projekt initialisieren

⬜ Phase 2: Core Wiki

• Basic Layout & Navigation
• Character-Seiten Template
• Item-Details Template
• Episode-Seiten Template
• Lore-Seiten
• First 10-15 Characters in DB

⬜ Phase 3: Search & Filter

• Global Search (Volltextsuche)
• Character Filter
• Item Filter
• Episode Filter

⬜ Phase 4: Map

• Leaflet Map initialisieren
• Locations als Markers
• Popup mit Location-Details
• Map Styling (SDSO-Theme)

⬜ Phase 5: Ressourcen-Tracker

• Character-Build System
• Item-Requirements visualisieren
• Resource-Tree
• Tracker UI (localStorage für Progress)

⬜ Phase 6: Beziehungsnetzwerk

• Relationship Graph Datenstruktur
• Graph Visualisierung (D3.js oder react-force-graph)
• Interaktive Knoten

⬜ Phase 7: Polish & Deployment

• Dark Mode
• Mobile Responsiveness
• Performance Optimization
• Deployment auf Vercel + Server

🚀 Nächste Schritte

1. Obsidian öffnen: vault → /Users/baka/EinsamerWolfDH/docs/obsidian-vault
2. PostgreSQL starten: docker-compose up -d postgres
3. Next.js Frontend erstellen: npx create-next-app@latest frontend --typescript --tailwind
4. Erste Daten sammeln: SDSO-Characters, Episodes, Items recherchieren
5. Database seeds: Daten in PostgreSQL importieren

🔐 Secrets & Environment

# .env.local (Git-ignored)
DATABASE_URL=postgresql://sdso_user:sdso_password@localhost:5432/sdso_wiki
NEXT_PUBLIC_API_URL=http://localhost:3000/api

📚 Obsidian-Workflow

1. Neue Note im passenden Ordner erstellen (Character, Item, Episode, etc.)
2. Template als Basis nutzen
3. Mit [[Name]] zu anderen Notes verlinken
4. Tags hinzufügen (#charakter, #waffe, etc.)
5. Exportieren → In Datenbank importieren

💡 Important Notes

• Fan-Wiki Disclaimer: Alle Inhalte zu SDSO sind Fan-Geschafftes Material
• Datensquellen: Anime, Manga, Fan-Wikis, offizielle Datenbanken
• Update-Workflow: Obsidian → Markdown-Export → DB-Import
• Hosting: Eigener Server für Backend/DB, Vercel für Frontend

🛠️ Hilfreiche Befehle

# PostgreSQL starten
docker-compose up -d postgres

# PostgreSQL Logs
docker-compose logs -f postgres

# In PostgreSQL connecten
psql postgresql://sdso_user:sdso_password@localhost:5432/sdso_wiki

# Next.js Dev Server
cd frontend && npm run dev

# Git Workflow
git add .
git commit -m "Feature description"
git push origin main

📖 Ressourcen

• SDSO Anime: [Quelle]
• SDSO Manga: [Quelle]
• SDSO Wiki: [Fan-Wiki Links]
• Leaflet Docs: https://leafletjs.com/
• Next.js Docs: https://nextjs.org/docs
• PostgreSQL Docs: https://www.postgresql.org/docs/

---

Gestartet: 2026-08-16 Entwickler: EinsamerWolfDH