Entwickler baut vollständiges SaaS-Produkt mit Claude Cowork: MLB-Scoreboard-App mit Authentifizierung, Zahlungen und Einbettungs-Widget
Projektübersicht
Ein Entwickler hat ein komplettes SaaS-Produkt namens ScorePorch mithilfe von Claude Cowork-Sitzungen erstellt. ScorePorch ist eine personalisierte MLB-Scoreboard-Anwendung, die Frontend, Backend, Authentifizierung, Zahlungen und ein einbettbares Widget umfasst.
Technischer Stack
- Frontend: Vite + React
- Backend: Express/Vercel serverless API
- Authentifizierung: Supabase (E-Mail + Google OAuth)
- Zahlungen: Stripe mit Webhook-Synchronisierung
- Datenquelle: MLB Stats API für Live-Daten
- Schlagzeilen: MLB.com RSS-Feeds
Anwendungsfunktionen
Benutzer wählen ihr Lieblingsteam und erhalten ein Dashboard, das auf die Farben dieses Teams abgestimmt ist. Das Dashboard enthält:
- Live-Ergebnisse
- Divisionsplatzierungen
- Countdown zum nächsten Spiel
- Teamspezifische Schlagzeilen aus MLB.com RSS-Feeds
- Vollständige Boxscores
Die kostenlose Stufe bietet Zugriff auf ein Team, während kostenpflichtige Stufen Mehrteam-Funktionalität und ein einbettbares Widget freischalten.
Details zum Einbett-Widget
Das Einbett-Widget wurde als Shadow DOM-isolierte, Container-Query-responsive Komponente entwickelt, die mit einem einzigen Script-Tag zu jeder Website hinzugefügt werden kann. Das Widget ist insgesamt 23KB groß und hat keine Abhängigkeiten. Claude Cowork half bei der Entwicklung der Isolationsstrategie, um zu verhindern, dass Widget-CSS in Host-Seiten eindringt.
Entwicklungserfahrung mit Claude Cowork
Der Entwickler stellte fest, dass Cowork den gesamten Produktlebenszyklus effektiv bewältigte, nicht nur die Codegenerierung. Zu den spezifischen kollaborativen Aufgaben gehörten:
- Iteration an Authentifizierungsabläufen
- Debugging von Stripe-Webhook-Sonderfällen
- Bearbeitung von CORS-Problemen für Cross-Origin-Widget-Anfragen
- Erstellung einer Framer-Landingpage
Die Kontextkontinuität zwischen den Sitzungen ließ die Erfahrung wie die Zusammenarbeit mit einem Mitgründer erscheinen, der sich an frühere Arbeiten erinnert.
Herausforderungen
- Authentifizierung: PKCE-Flow unterbrach ständig den Callback, was einen Wechsel zum Implicit Flow erforderte
- API-Beschränkungen: Die ESPN-API war praktisch tot, was einen Wechsel zu MLB.com RSS für Schlagzeilen erforderte
- Git-Integration: Cowork kann nicht direkt auf Git pushen (EPERM auf index.lock), was eine Umgehung erforderte, bei der der Entwickler nach /tmp klont und von dort pusht
Zusätzliche Entwicklung
Der Entwickler hat ein Cowork-Plugin für ScorePorch erstellt, das anderen Entwicklern, die Dashboards erstellen, ermöglicht, ein Live-MLB-Scoreboard zu ihren Projekten hinzuzufügen, indem sie /add-scoreboard [team-name] verwenden. Das Plugin enthält Integrationsanleitungen für React, Next, Vue, Svelte, WordPress, Squarespace und Webflow.
Die Anwendung ist live unter app.scoreporch.com verfügbar.
📖 Read the full source: r/ClaudeAI
👀 Siehe auch
Entwickler nutzt Claude Code, um USB-Dongle zu bauen, der Chrome-Dino-Spiel automatisch startet
Ein Entwickler baute einen USB-Dongle mit einem ATtiny85-Board, der automatisch das Chrome-Dino-Spiel spielt, indem er Hindernisse mit Lichtsensoren erkennt und Tastaturbefehle sendet. Claude Code unterstützte die Firmware-Entwicklung, einschließlich V-USB-Integration, Sensorlogik und adaptiver Timing-Algorithmen.
Claude Opus 4.6 schreibt erfolgreich Malbolge-Code durch iteratives Feedback
Ein Entwickler nutzte Claude Opus 4.6, um "Hello World" in Malbolge, einer esoterischen Programmiersprache, zu schreiben, indem er eine Feedback-Schleife implementierte, bei der Compiler-Fehler an die KI zurückgegeben wurden, bis der Code die Validierung bestand.
Senior Developer's Claude Max Lernkurve: Von vagen Anweisungen zu strukturierten Code-Reviews
Ein Entwickler mit 8 Jahren Erfahrung in Node.js, Go, Angular und AWS teilt mit, wie er Claude Max zunächst falsch einsetzte, indem er ihn wie einen Senior-Engineer mit Projektkontext behandelte, und dann die Ergebnisse verbesserte, indem er strukturierte Review-Prozesse einführte, ähnlich wie bei der Betreuung von Junior-Entwicklern.
OpenClaw KI-Agent verwaltet LinkedIn Ads Workflow mit 2,65 % CTR
Ein Entwickler hat einen KI-Agenten namens Patrick mit OpenClaw erstellt, um den gesamten LinkedIn Ads-Workflow zu bewältigen, einschließlich der Erstellung von Datenpipelines, der Generierung von Anzeigentexten und der Freigabe über ein benutzerdefiniertes Prüftool. Eine KI-generierte Anzeige erreichte eine Klickrate von 2,65 % und übertraf alle manuell erstellten Anzeigen.