開発者がClaude Coworkで完全なSaaS製品を構築：認証、決済、埋め込みウィジェット付きMLBスコアボードアプリ

プロジェクト概要

ある開発者が、Claude Coworkセッションを使用して「ScorePorch」という完全なSaaS製品を構築しました。ScorePorchは、フロントエンド、バックエンド、認証、決済、および埋め込み可能なウィジェットを含むパーソナライズされたMLBスコアボードアプリケーションです。

技術スタック

• フロントエンド: Vite + React
• バックエンド: Express/VercelサーバーレスAPI
• 認証: Supabase（メール + Google OAuth）
• 決済: ウェブフック同期付きStripe
• データソース: ライブデータ用MLB Stats API
• 見出し: MLB.com RSSフィード

アプリケーション機能

ユーザーはお気に入りのチームを選択し、そのチームのカラーをテーマにしたダッシュボードを受け取ります。ダッシュボードには以下が含まれます：

• ライブスコア
• 地区順位表
• 次試合カウントダウン
• MLB.com RSSフィードからのチーム固有の見出し
• 完全なボックススコア

無料プランでは1チームへのアクセスが提供され、有料プランでは複数チーム機能と埋め込み可能なウィジェットが解放されます。

埋め込みウィジェットの詳細

埋め込みウィジェットは、Shadow DOMで分離された、コンテナクエリ対応のコンポーネントとして構築され、単一のスクリプトタグで任意のウェブサイトに追加できます。このウィジェットは依存関係がなく、合計23KBです。Claude Coworkは、ウィジェットのCSSがホストページに漏れないようにする分離戦略の開発を支援しました。

Claude Coworkでの開発経験

開発者は、Coworkが単なるコード生成だけでなく、製品の完全なライフサイクルを効果的に扱ったと述べています。具体的な共同作業タスクには以下が含まれます：

• 認証フローの反復
• Stripeウェブフックのエッジケースのデバッグ
• クロスオリジンウィジェットリクエストのCORS問題への対応
• Framerランディングページの構築

セッション間のコンテキスト連続性により、以前の作業を覚えている共同創業者と働いているような経験を感じました。

遭遇した課題

• 認証: PKCEフローがコールバックを壊し続けたため、暗黙的フローへの切り替えが必要
• API制限: ESPNのAPIは実質的に機能しておらず、見出し用にMLB.com RSSへの切り替えが必要
• Git統合: CoworkはGitに直接プッシュできず（index.lockでEPERM）、開発者が/tmpにクローンしてそこからプッシュする回避策が必要

追加開発

開発者はScorePorch用のCoworkプラグインを作成し、ダッシュボードを構築している他の開発者が/add-scoreboard [チーム名]を使用してプロジェクトにライブMLBスコアボードを追加できるようにしました。このプラグインには、React、Next、Vue、Svelte、WordPress、Squarespace、Webflow用の統合ガイドが含まれています。

アプリケーションはapp.scoreporch.comで公開中です。