개발자가 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 피드의 팀별 헤드라인
• 전체 박스 스코어

무료 티어는 한 팀에 대한 접근을 제공하며, 유료 티어는 다중 팀 기능과 임베디드 가능한 위젯을 잠금 해제합니다.

임베드 위젯 상세

임베드 위젯은 Shadow DOM으로 격리되고 컨테이너 쿼리에 반응하는 컴포넌트로 구축되어 단일 스크립트 태그로 어떤 웹사이트에도 추가할 수 있습니다. 위젯은 의존성 없이 총 23KB입니다. Claude Cowork는 위젯 CSS가 호스트 페이지로 유출되는 것을 방지하기 위한 격리 전략 개발을 도왔습니다.

Claude Cowork를 통한 개발 경험

개발자는 Cowork가 단순한 코드 생성이 아닌 전체 제품 생명주기를 효과적으로 처리했다고 언급했습니다. 구체적인 협업 작업에는 다음이 포함됩니다:

• 인증 흐름 반복 작업
• Stripe 웹훅 에지 케이스 디버깅
• 크로스 오리진 위젯 요청을 위한 CORS 문제 해결
• Framer 랜딩 페이지 구축

세션 간의 컨텍스트 연속성은 이전 작업을 기억하는 공동 창업자와 함께 일하는 느낌을 주었습니다.

발생한 도전 과제

• 인증: PKCE 흐름이 콜백을 계속 중단시켜 암시적 흐름으로 전환 필요
• API 제한: ESPN의 API가 사실상 작동하지 않아 헤드라인을 위해 MLB.com RSS로 전환 필요
• Git 통합: Cowork는 Git에 직접 푸시할 수 없어(EPERM on index.lock) 개발자가 /tmp에 클론하고 거기서 푸시하는 우회 방법 필요

추가 개발

개발자는 ScorePorch용 Cowork 플러그인을 만들어 다른 개발자들이 /add-scoreboard [team-name]을 사용해 프로젝트에 라이브 MLB 스코어보드를 추가할 수 있도록 했습니다. 이 플러그인에는 React, Next, Vue, Svelte, WordPress, Squarespace, Webflow용 통합 가이드가 포함되어 있습니다.

애플리케이션은 app.scoreporch.com에서 라이브로 운영 중입니다.