Desenvolvedor Cria Produto SaaS Completo com Claude Cowork: Aplicativo de Placar da MLB com Autenticação, Pagamentos e Widget de Incorporação

Visão Geral do Projeto

Um desenvolvedor criou um produto SaaS completo chamado ScorePorch usando sessões do Claude Cowork. ScorePorch é um aplicativo personalizado de placar da MLB que inclui frontend, backend, autenticação, pagamentos e um widget incorporável.

Stack Técnica

• Frontend: Vite + React
• Backend: API serverless Express/Vercel
• Autenticação: Supabase (email + Google OAuth)
• Pagamentos: Stripe com sincronização via webhook
• Fonte de dados: API MLB Stats para dados ao vivo
• Manchetes: Feeds RSS do MLB.com

Funcionalidades do Aplicativo

Os usuários selecionam seu time favorito e recebem um painel personalizado com as cores desse time. O painel inclui:

• Placares ao vivo
• Classificação da divisão
• Contagem regressiva para o próximo jogo
• Manchetes específicas do time dos feeds RSS do MLB.com
• Box scores completos

A versão gratuita fornece acesso a um time, enquanto as versões pagas desbloqueiam funcionalidade multi-time e um widget incorporável.

Detalhes do Widget Incorporável

O widget incorporável foi construído como um componente isolado em Shadow DOM, responsivo a consultas de contêiner, que pode ser adicionado a qualquer site com uma única tag de script. O widget tem 23KB no total e sem dependências. O Claude Cowork ajudou a desenvolver a estratégia de isolamento para evitar que o CSS do widget vazasse para as páginas hospedeiras.

Experiência de Desenvolvimento com Claude Cowork

O desenvolvedor observou que o Cowork lidou com todo o ciclo de vida do produto de forma eficaz, não apenas com a geração de código. Tarefas colaborativas específicas incluíram:

• Iteração nos fluxos de autenticação
• Depuração de casos extremos de webhooks do Stripe
• Resolução de problemas de CORS para requisições cross-origin do widget
• Criação de uma página de destino no Framer

A continuidade do contexto entre as sessões fez a experiência parecer trabalhar com um cofundador que lembra do trabalho anterior.

Desafios Encontrados

• Autenticação: O fluxo PKCE continuava quebrando o callback, exigindo uma mudança para o fluxo implícito
• Limitações da API: A API da ESPN estava efetivamente morta, exigindo uma mudança para RSS do MLB.com para manchetes
• Integração Git: O Cowork não pode fazer push diretamente no git (EPERM no index.lock), exigindo uma solução alternativa onde o desenvolvedor clona para /tmp e faz push de lá

Desenvolvimento Adicional

O desenvolvedor criou um plugin do Cowork para o ScorePorch, permitindo que outros desenvolvedores criando painéis adicionem um placar ao vivo da MLB aos seus projetos usando /add-scoreboard [nome-do-time]. O plugin inclui guias de integração para React, Next, Vue, Svelte, WordPress, Squarespace e Webflow.

O aplicativo está disponível em app.scoreporch.com.