Desarrollador Crea Producto SaaS Completo con Claude Cowork: Aplicación de Marcador de MLB con Autenticación, Pagos y Widget Integrable

Descripción General del Proyecto

Un desarrollador creó un producto SaaS completo llamado ScorePorch utilizando sesiones de Claude Cowork. ScorePorch es una aplicación personalizada de marcador de MLB que incluye frontend, backend, autenticación, pagos y un widget embebible.

Stack Técnico

• Frontend: Vite + React
• Backend: API serverless Express/Vercel
• Autenticación: Supabase (correo electrónico + Google OAuth)
• Pagos: Stripe con sincronización de webhooks
• Fuente de datos: API de Estadísticas de MLB para datos en vivo
• Titulares: Fuentes RSS de MLB.com

Características de la Aplicación

Los usuarios seleccionan su equipo favorito y reciben un panel de control con la temática de los colores de ese equipo. El panel de control incluye:

• Puntuaciones en vivo
• Clasificación de la división
• Cuenta regresiva para el próximo partido
• Titulares específicos del equipo de las fuentes RSS de MLB.com
• Marcadores completos

El nivel gratuito proporciona acceso a un equipo, mientras que los niveles de pago desbloquean la funcionalidad multiequipo y un widget embebible.

Detalles del Widget Embebible

El widget embebible se construyó como un componente aislado en Shadow DOM y responsivo a consultas de contenedor, que puede agregarse a cualquier sitio web con una sola etiqueta de script. El widget tiene un total de 23KB sin dependencias. Claude Cowork ayudó a desarrollar la estrategia de aislamiento para evitar que el CSS del widget se filtrara en las páginas anfitrionas.

Experiencia de Desarrollo con Claude Cowork

El desarrollador señaló que Cowork manejó eficazmente todo el ciclo de vida del producto, no solo la generación de código. Las tareas colaborativas específicas incluyeron:

• Iterar en flujos de autenticación
• Depurar casos límite de webhooks de Stripe
• Resolver problemas de CORS para solicitudes de widgets de origen cruzado
• Construir una página de destino en Framer

La continuidad del contexto entre sesiones hizo que la experiencia se sintiera como trabajar con un cofundador que recuerda el trabajo anterior.

Desafíos Encontrados

• Autenticación: El flujo PKCE seguía rompiendo la devolución de llamada, requiriendo un cambio al flujo implícito
• Limitaciones de la API: La API de ESPN estaba efectivamente muerta, requiriendo un cambio a RSS de MLB.com para los titulares
• Integración con Git: Cowork no puede enviar a git directamente (EPERM en index.lock), requiriendo una solución alternativa donde el desarrollador clona a /tmp y envía desde allí

Desarrollo Adicional

El desarrollador creó un plugin de Cowork para ScorePorch, permitiendo a otros desarrolladores que construyen paneles de control agregar un marcador de MLB en vivo a sus proyectos usando /add-scoreboard [nombre-del-equipo]. El plugin incluye guías de integración para React, Next, Vue, Svelte, WordPress, Squarespace y Webflow.

La aplicación está disponible en app.scoreporch.com.