Collectorssphere ist eine moderne, datenschutzfreundliche Progressive Web App zur Verwaltung deiner Sammlungen — installierbar auf iOS, Android und Desktop, nutzbar ueberall auch offline.
Egal ob Hot Wheels, Trading Cards, Muenzen, Briefmarken, Vinyl, LEGO, Kameras oder Mineralien: alles an einem Ort, sicher katalogisiert, bewertet und im Blick.
Kernidee: Ein universeller Collection HUB als aktive Kernplattform — ergaenzt durch spezialisierte Spheres (TCG, Gaming, Geo, ...) die schrittweise freigeschaltet werden.
| Feature | Beschreibung |
|---|---|
| Sammlungen | Beliebig viele Sammlungen mit eigenen Kategorien |
| Items | Bilder, Tags, Custom-Attribute, Status, Preis-Tracking |
| Flexible Attribute | 8+ Typen: Text, Nummer, Tags, Checkbox, Datum, Link, Waehrung |
| Barcode Scanner | EAN-13, EAN-8, UPC-A, UPC-E, Code-128, QR-Code |
| AI Bilderkennung | Automatische Item-Erkennung via Claude API (Edge Function) |
| Import / Export | CSV und JSON fuer alle Sammlungen |
| Sharing | Sammlungen teilen mit Viewer / Editor / Admin Rollen |
- Uebersicht ueber alle Sammlungen, Items und Gesamtwert
- Konfigurierbare Tiles — verschieben, ein-/ausblenden, Groesse anpassen
- Finanz-Charts: Ausgaben, Wert, Gewinn pro Sammlung
- Top-Items nach Wert · Erinnerungen fuer wichtige Termine
| Tool | API | Key? |
|---|---|---|
| Waehrungsrechner | frankfurter.app (EZB-Kurse) | Nein |
| Markt & Portfolio | CoinGecko + Alpha Vantage | Nein / Optional |
| Sammler-News | Google News RSS (14+ Kategorien) | Nein |
| Buecher-Suche | Open Library | Nein |
| Vinyl-Suche | Discogs (Barcode + Marktpreise) | Optional |
- Installierbar auf iOS, Android, Desktop
- Bottom-Tab-Bar mit 5 Tabs (Home · Sammlungen · +Neu · Spheres · Profil)
- Offline-Faehigkeit mit Background Sync
- Pull-to-Refresh · Dark / Light Theme
- DSGVO-konformes Cookie-Consent-Banner
- WCAG-AA konformer Kontrast auf allen interaktiven Elementen
- Screen-Reader-Labels (
aria-label,autoComplete,inputMode) - Dynamisches OpenGraph-Image (Edge Runtime) ·
sitemap.ts·robots.ts
Alle Spheres im Ueberblick
╔═══════════════════════╗
║ Collectorssphere ║
║ HUB ║
║ Universal Collector ║
╚══════════╤════════════╝
│
┌───────────┬───────────┼───────────┬───────────┐
│ │ │ │ │
┌──┴──┐ ┌──┴──┐ ┌──┴──┐ ┌──┴──┐ ┌──┴──┐
│ TCG │ │Game │ │Offic│ │ Geo │ │Shop │
│Cards│ │Video│ │Docs │ │Geol.│ │Mrkt │
└─────┘ └─────┘ └─────┘ └─────┘ └─────┘
Aktiv ✓ Teilweise Stub Stub Stub
| Sphere | Route | Status | Umfang |
|---|---|---|---|
| HUB | /collections, /dashboard |
✅ Aktiv | Kern-Feature vollstaendig |
| TCG | /tcg |
✅ Aktiv | Pokémon · Yu-Gi-Oh! · Magic: the Gathering |
| Gaming | /gaming |
🔶 Teilweise | PlayStation · Preise · Wishlist |
| Geo | /geo |
🔜 Bald | Mineralien · Fossilien · Lab-Daten |
| Official | /official |
🔜 Bald | Dokumente · Zertifikate |
| Shop | /shop |
🔜 Bald | Marketplace-Integration |
| Kategorie | Technologie | Version |
|---|---|---|
| Framework | Next.js (App Router, RSC, Turbopack) | 16.2.5 |
| Sprache | TypeScript (strict) | 5.9.3 |
| UI | React | 19.2.1 |
| Styling | Tailwind CSS | v4 |
| Komponenten | shadcn/ui · Radix UI | — |
| Animation | Framer Motion · GSAP · Three.js | 12 / 3.12 / 0.171 |
| Backend | Supabase (PostgreSQL · Auth · RLS · Storage · Realtime) | 2.87.1 |
| Edge Functions | Deno (Supabase) | — |
| PWA | Custom Service Worker (public/sw.js) |
— |
| Hosting | Vercel (Auto-Deploy on push to main) |
— |
| Analytics | Vercel Analytics & Speed Insights | 1.6.1 |
| Testing | Vitest · Playwright + axe-core | — |
| Function | Beschreibung |
|---|---|
analyze-image |
KI-Bilderkennung via Claude API — gibt strukturierte Item-Daten zurueck |
tcg-price-lookup |
Preisabfragen fuer Pokémon TCG · Yu-Gi-Oh! · Magic (24h Cache) |
tcg-price-updater |
Automatische Preisaktualisierung im Hintergrund |
- Node.js 18+ · npm · Supabase Account
# 1. Repository klonen
git clone https://github.com/westside0106/CollectR.git
cd CollectR
# 2. Abhaengigkeiten installieren
npm install
# 3. Umgebungsvariablen holen (empfohlen)
vercel env pull .env.localManuelle .env.local Konfiguration
# Pflicht
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
ANTHROPIC_API_KEY= # fuer analyze-image Edge Function
# Optional (verbessert Features)
ALPHA_VANTAGE_API_KEY= # Aktienpreise im Portfolio (gratis: alphavantage.co)
DISCOGS_TOKEN= # Verbessert Rate Limits bei Vinyl-Suche
POKEMON_TCG_API_KEY= # Verbessert Rate Limits bei Pokémon-Preisabfragen# 4. Entwicklungsserver starten
npm run dev
# → http://localhost:3000
/ist die oeffentliche Landing Page. Eingeloggte User werden automatisch zum Dashboard weitergeleitet.
npm run dev # Entwicklungsserver
npm run build # Produktions-Build
npm run start # Produktions-Server
npm run lint # ESLint
npm run test # Unit-Tests (Vitest)
npm run test:watch # Vitest im Watch-Mode
npm run test:coverage # Coverage-Report
npm run test:a11y # Accessibility-Tests (Playwright + axe-core)- Sammlungen erstellen, bearbeiten, teilen
- Items mit Bildern, Tags, Custom-Attributen, Status-Tracking
- Dashboard mit konfigurierbaren Tiles
- Finanz-Tracking (Ausgaben, Wert, Gewinn)
- Erinnerungen-System
- 5 integrierte Tools (Waehrung · Markt/Portfolio · News · Buecher · Vinyl)
- Portfolio-Tracker (Aktien & Crypto mit P&L)
- PWA mit Offline-Support & Background Sync
- Import / Export (CSV, JSON)
- AI-gestuetzte Bilderkennung (Claude API via Edge Function)
- Onboarding-Flow fuer neue User (3-Step Welcome)
- DSGVO Cookie-Consent
- SEO — dynamisches OG-Image · sitemap · robots
- A11y-Verbesserungen (WCAG-AA · aria-labels · Touch-Targets)
- Mobile Bottom-Tab-Bar
- Light-Mode Kontrast-Sweep
- Performance-Optimierung
- Test-Coverage ausbauen
- E-Mail-Versand fuer Einladungen (Resend + Edge Function)
- TCG Sphere — Pokémon · Yu-Gi-Oh! · Magic: the Gathering · Deck-Builder
- Gaming Sphere — vollstaendig (Wishlist, Scanner, AI Cover)
- Geo Sphere — Mineralien, Fossilien, Lab-Daten
- Official Sphere — Dokumente & Zertifikate
- Shop Sphere — Marketplace-Integration
- Community Features & oeffentliche Profile
- Eigene News-Quellen per User (Custom RSS)
- Filter-State in URL speichern
- Erweiterte Analytics & Reporting
Dieses Projekt steht unter der Elastic License 2.0 (ELv2).
Der Quellcode darf eingesehen, geforkt und privat genutzt werden.
Der Betrieb als konkurrierender Managed Service oder SaaS ist nicht gestattet.
Made with Leidenschaft fuer Sammler weltweit