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.