288 lines
8.8 KiB
Markdown
288 lines
8.8 KiB
Markdown
# dgray.io
|
|
|
|
Eine anonyme, dezentrale Kleinanzeigen-Plattform mit Monero-Bezahlung.
|
|
|
|
## 🎯 Vision
|
|
|
|
dgray.io ermöglicht es Nutzern, Kleinanzeigen zu schalten und Waren/Dienstleistungen sicher über Monero (XMR) zu handeln. Besonderheiten:
|
|
|
|
- **Anonymität**: Nutzung ohne Account möglich
|
|
- **Käuferschutz**: Monero MultiSig Escrow
|
|
- **Dezentral**: Keine zentrale Zahlungsabwicklung
|
|
- **Privacy-First**: E2E-Verschlüsselung für Kommunikation
|
|
|
|
---
|
|
|
|
## 📊 Machbarkeitsanalyse
|
|
|
|
### Technisch realisierbar
|
|
|
|
| Feature | Komplexität | Status |
|
|
|---------|-------------|--------|
|
|
| Anzeigen CRUD | Niedrig | ✅ Fertig |
|
|
| Fiat/XMR Preisanzeige | Niedrig | ✅ Fertig |
|
|
| Anonyme Nutzung (UUID + Hash) | Mittel | ✅ Fertig |
|
|
| PWA | Mittel | ✅ Grundgerüst |
|
|
| Light/Dark Mode | Niedrig | ✅ Fertig |
|
|
| i18n (DE/EN/FR) | Niedrig | ✅ Fertig |
|
|
| Bildergalerie | Niedrig | ✅ Fertig |
|
|
| E2E-Chat (NaCl box.before + secretbox) | Hoch | ✅ Fertig |
|
|
| PoW Captcha (Server-seitig) | Mittel | ✅ Fertig |
|
|
| **Monero MultiSig** | **Sehr hoch** | 🔲 Offen |
|
|
| Rating-System | Mittel | 🔲 Offen |
|
|
| 2FA | Mittel | 🔲 Offen |
|
|
|
|
### ⚠️ Kritische Punkte
|
|
|
|
1. **Monero MultiSig Escrow**
|
|
- Komplexeste Komponente
|
|
- Erfordert eigene Wallet-Integration via `monero-wallet-rpc`
|
|
- Nutzer müssen Wallet-Keys verwalten → UX-Hürde
|
|
- Alternative für MVP: Trusted Escrow-Service
|
|
|
|
2. **Rechtliche Aspekte**
|
|
- AGB, Datenschutz, Impressum erforderlich
|
|
- Geldwäsche-Regularien (je nach Jurisdiktion)
|
|
- Haftung bei Betrug klären
|
|
|
|
3. **E2E-Verschlüsselung**
|
|
- Key-Management für anonyme Nutzer
|
|
- Optionen: Signal-Protokoll, Matrix-Protokoll
|
|
|
|
---
|
|
|
|
## 🛠️ Tech-Stack
|
|
|
|
### Frontend (aktuell)
|
|
- **Vanilla JavaScript** (ES Modules)
|
|
- **Web Components** (Custom Elements)
|
|
- **CSS Custom Properties** (Theming)
|
|
- **PWA** (Service Worker, Manifest)
|
|
|
|
### Backend (geplant)
|
|
- **Directus** (Headless CMS)
|
|
- REST/GraphQL API
|
|
- Auth, Rollen, Berechtigungen
|
|
- Custom Extensions für XMR-Integration
|
|
|
|
### Services
|
|
- **Directus** Backend: `api.dgray.io` (Docker)
|
|
- **PoW Captcha + Payment Proxy**: `pow.dgray.io` (PHP, HMAC-signierte Challenges, BTCPay Proxy + Webhook, OG Meta Proxy)
|
|
- **BTCPay Server**: `pay.xmr.rocks` (Monero-Zahlungen, Trocador-Plugin)
|
|
- **TweetNaCl**: Self-hosted in `js/vendor/` (E2E-Verschlüsselung)
|
|
|
|
### Infrastruktur (geplant)
|
|
- monero-wallet-rpc
|
|
- Push-Benachrichtigungen
|
|
|
|
---
|
|
|
|
## 🚀 Setup
|
|
|
|
### Voraussetzungen
|
|
- Moderner Browser mit ES Module Support
|
|
- Python 3 (für lokalen Server) oder beliebiger HTTP-Server
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Repository klonen
|
|
git clone https://gitea.pro/schmidt1024/dgray.git
|
|
cd dgray
|
|
|
|
# Lokalen Server starten
|
|
python3 -m http.server 8080
|
|
|
|
# Oder mit Live-Reload (Node.js erforderlich)
|
|
npx live-server
|
|
```
|
|
|
|
Öffne http://localhost:8080
|
|
|
|
### Deployment
|
|
|
|
Für Produktion werden nur diese Dateien benötigt:
|
|
|
|
```
|
|
├── index.html
|
|
├── manifest.json
|
|
├── service-worker.js
|
|
├── favicon.png
|
|
├── js/
|
|
├── css/
|
|
├── locales/
|
|
└── assets/
|
|
```
|
|
|
|
**Nicht deployen:** `tests/`, `docs/`, `AGENTS.md`, `README.md`, `.git/`
|
|
|
|
### Tests ausführen
|
|
|
|
```bash
|
|
# Server starten
|
|
python3 -m http.server 8080
|
|
|
|
# Im Browser öffnen
|
|
# http://localhost:8080/tests/
|
|
```
|
|
|
|
Die Tests laufen im Browser und nutzen einen minimalen Test-Runner ohne externe Dependencies.
|
|
|
|
### Projektstruktur
|
|
|
|
```
|
|
dgray/
|
|
├── index.html # Entry Point
|
|
├── manifest.json # PWA Manifest
|
|
├── service-worker.js # Offline-Support
|
|
├── css/
|
|
│ ├── fonts.css # Web Fonts (Inter, Space Grotesk)
|
|
│ ├── variables.css # Theming (Light/Dark)
|
|
│ ├── base.css # Reset, Grundstyles
|
|
│ └── components.css # UI-Komponenten
|
|
├── js/
|
|
│ ├── app.js # App-Initialisierung
|
|
│ ├── router.js # Hash-basiertes Routing
|
|
│ ├── i18n.js # Übersetzungssystem
|
|
│ ├── services/
|
|
│ │ ├── directus.js # Directus API Client
|
|
│ │ ├── auth.js # UUID-Auth (SHA-256 Hash)
|
|
│ │ ├── listings.js # Listings-Service
|
|
│ │ ├── categories.js # Kategorien-Service
|
|
│ │ ├── locations.js # Standorte-Service
|
|
│ │ ├── conversations.js# Zero-Knowledge Chat
|
|
│ │ ├── crypto.js # NaCl Encryption (box.before + secretbox)
|
|
│ │ ├── currency.js # XMR/Fiat Umrechnung
|
|
│ │ ├── pow-captcha.js # PoW Captcha (Server-first, lokaler Fallback)
|
|
│ │ ├── btcpay.js # BTCPay Server Integration (Invoice, Checkout)
|
|
│ │ ├── favorites.js # Favoriten (localStorage + Directus Sync)
|
|
│ │ └── notifications.js# Benachrichtigungen (Polling, Badge)
|
|
│ ├── vendor/
|
|
│ │ ├── nacl-fast.min.js # TweetNaCl (self-hosted)
|
|
│ │ ├── nacl-util.min.js # TweetNaCl Utils
|
|
│ │ └── cropper.min.js # Image Cropper
|
|
│ └── components/
|
|
│ ├── app-shell.js # Layout-Container
|
|
│ ├── app-header.js # Header mit Navigation
|
|
│ ├── app-footer.js # Footer
|
|
│ ├── auth-modal.js # Login/Register Modal
|
|
│ ├── chat-widget.js # E2E Chat Widget
|
|
│ └── pages/ # Seiten-Komponenten
|
|
├── locales/
|
|
│ ├── de.json # Deutsch
|
|
│ ├── en.json # English
|
|
│ └── fr.json # Français
|
|
├── tests/
|
|
│ ├── index.html # Test-Runner UI
|
|
│ ├── test-runner.js # Test-Framework
|
|
│ └── *.test.js # Unit Tests
|
|
└── assets/
|
|
└── fonts/ # Self-hosted Fonts
|
|
```
|
|
|
|
---
|
|
|
|
## 📋 Offene Punkte / Roadmap
|
|
|
|
### Phase 1: MVP Frontend
|
|
- [x] Projektstruktur
|
|
- [x] Routing
|
|
- [x] i18n (DE/EN/FR)
|
|
- [x] Light/Dark Mode
|
|
- [x] PWA Grundgerüst
|
|
- [x] Startseite mit Suche, Kategorien, Listings-Grid
|
|
- [x] Typografie (Inter + Space Grotesk)
|
|
- [x] Such-Komponente mit Accordion-Kategorien
|
|
- [x] Anzeige-Detailseite mit Bildergalerie
|
|
- [x] Anzeige-Erstellen-Formular
|
|
- [x] Suchseite mit Filtern (merged in Home)
|
|
- [x] Skeleton Loading, Error Boundary, Offline Indicator
|
|
- [x] Lazy Loading für Bilder
|
|
- [ ] Responsive Optimierungen
|
|
|
|
### Phase 2: Backend-Integration ⬅️ **Aktuell**
|
|
- [x] Directus aufsetzen (`api.dgray.io`)
|
|
- [x] Listings-Collection (CRUD)
|
|
- [x] Categories mit Übersetzungen
|
|
- [x] User-Auth (UUID + SHA-256 Hash, anonym)
|
|
- [x] Bilder-Upload (Junction-Table)
|
|
- [x] API-Services (`directus.js`, `listings.js`, `categories.js`, `locations.js`)
|
|
- [x] Directus Public-Berechtigungen (siehe `docs/DIRECTUS-SCHEMA.md`)
|
|
- [x] Neue Seiten: Favoriten, Meine Anzeigen, Nachrichten, Einstellungen
|
|
- [x] Listings bearbeiten (Edit-Modus für eigene Anzeigen)
|
|
|
|
### Phase 3: Kommunikation & Sicherheit
|
|
- [x] Chat-System (E2E-verschlüsselt mit NaCl box.before + secretbox)
|
|
- [x] Conversations/Messages Services
|
|
- [x] Merkliste (Favoriten-Seite)
|
|
- [x] Favoriten Directus-Sync (Union-Merge bei Login, localStorage-Fallback)
|
|
- [x] PoW Captcha (server-seitig via pow.dgray.io, HMAC-signiert)
|
|
- [x] TweetNaCl self-hosted (kein CDN)
|
|
- [x] In-App Benachrichtigungen (Notifications-Service, Glocke mit Badge)
|
|
- [x] Open Graph & X Card Meta-Tags (dynamisch pro Listing)
|
|
- [ ] Push-Benachrichtigungen (Web Push API)
|
|
|
|
### Phase 4: Payments
|
|
- [x] XMR-Kursabfrage API (CoinGecko)
|
|
- [x] Fiat ↔ XMR Umrechnung (Dual-Preis-Anzeige)
|
|
- [x] BTCPay Server Integration (`pay.xmr.rocks`, Proxy auf `pow.dgray.io`)
|
|
- [x] Listing-Gebühr: 1 EUR/USD/CHF/GBP (200 JPY) via Monero
|
|
- [x] Webhook für Auto-Publish nach Blockchain-Confirmation
|
|
- [x] Expired Listings (Directus Flow, Status-Badges auf Cards)
|
|
- [x] Token-Refresh bei Tab-Visibility-Change
|
|
- [ ] Wallet-Anbindung (monero-wallet-rpc)
|
|
- [ ] MultiSig Escrow
|
|
|
|
### Phase 5: Trust & Safety
|
|
- [ ] Rating-System
|
|
- [ ] 2FA
|
|
- [ ] Reporting/Moderation
|
|
- [ ] AGB, Datenschutz
|
|
|
|
---
|
|
|
|
## 🎨 Design-Entscheidungen
|
|
|
|
### Typografie
|
|
- **Headlines**: Space Grotesk (Medium, Bold)
|
|
- **Body**: Inter (Regular, Medium, SemiBold, Bold)
|
|
- Self-hosted Fonts (SIL Open Font License)
|
|
|
|
### Farbpalette
|
|
- **Monochrome Theme** - reine Graustufen
|
|
- **Light Mode**: BG #FAFAFA, Text #1A1A1A, Primary #555555
|
|
- **Dark Mode**: BG #141414, Text #F0F0F0, Primary #AAAAAA
|
|
|
|
### Mobile-First
|
|
- Responsive Grid (2 Spalten Mobile, 5 Spalten Desktop)
|
|
- Touch-optimierte Buttons
|
|
- Icon-only Buttons auf kleinen Screens
|
|
|
|
---
|
|
|
|
## 🤝 Contributing
|
|
|
|
1. Feature-Branch erstellen
|
|
2. Änderungen committen
|
|
3. Pull Request öffnen
|
|
|
|
### Code-Konventionen
|
|
- ES Modules verwenden
|
|
- Web Components für UI-Komponenten
|
|
- CSS Custom Properties für Theming
|
|
- Übersetzungsschlüssel für alle Texte
|
|
- Keine Semikolons in JavaScript (außer for-loops, CSS)
|
|
- Englische Kommentare im Code
|
|
|
|
---
|
|
|
|
## 📄 Lizenz
|
|
|
|
TBD
|
|
|
|
---
|
|
|
|
## 📞 Kontakt
|
|
|
|
TBD
|