Développeur Construit un Produit SaaS Complet avec Claude Cowork : Application MLB Scoreboard avec Authentification, Paiements et Widget Intégrable
Aperçu du projet
Un développeur a construit un produit SaaS complet appelé ScorePorch en utilisant des sessions Claude Cowork. ScorePorch est une application de tableau de scores MLB personnalisée qui comprend une interface frontend, un backend, une authentification, des paiements et un widget intégrable.
Stack technique
- Frontend : Vite + React
- Backend : API serverless Express/Vercel
- Authentification : Supabase (email + Google OAuth)
- Paiements : Stripe avec synchronisation par webhook
- Source de données : API MLB Stats pour les données en direct
- Actualités : flux RSS de MLB.com
Fonctionnalités de l'application
Les utilisateurs sélectionnent leur équipe favorite et reçoivent un tableau de bord aux couleurs de cette équipe. Le tableau de bord comprend :
- Les scores en direct
- Les classements de division
- Un compte à rebours pour le prochain match
- Des actualités spécifiques à l'équipe provenant des flux RSS de MLB.com
- Les feuilles de match complètes
La version gratuite donne accès à une équipe, tandis que les formules payantes débloquent la fonctionnalité multi-équipes et un widget intégrable.
Détails du widget intégré
Le widget intégré a été construit comme un composant isolé par Shadow DOM et réactif aux requêtes de conteneur, qui peut être ajouté à n'importe quel site web avec une simple balise script. Le widget pèse 23 Ko au total et n'a aucune dépendance. Claude Cowork a aidé à développer la stratégie d'isolation pour empêcher le CSS du widget de s'infiltrer dans les pages hôtes.
Expérience de développement avec Claude Cowork
Le développeur a noté que Cowork a géré efficacement l'ensemble du cycle de vie du produit, pas seulement la génération de code. Les tâches collaboratives spécifiques comprenaient :
- L'itération sur les flux d'authentification
- Le débogage des cas limites des webhooks Stripe
- La résolution des problèmes CORS pour les requêtes cross-origin du widget
- La construction d'une page de destination Framer
La continuité du contexte entre les sessions a donné l'impression de travailler avec un cofondateur qui se souvient du travail précédent.
Défis rencontrés
- Authentification : le flux PKCE cassait constamment le callback, nécessitant un passage au flux implicite
- Limitations de l'API : l'API d'ESPN était pratiquement morte, nécessitant un pivot vers les flux RSS de MLB.com pour les actualités
- Intégration Git : Cowork ne peut pas pousser directement sur git (EPERM sur index.lock), nécessitant une solution de contournement où le développeur clone dans /tmp et pousse depuis là
Développement supplémentaire
Le développeur a créé un plugin Cowork pour ScorePorch, permettant à d'autres développeurs construisant des tableaux de bord d'ajouter un tableau de scores MLB en direct à leurs projets en utilisant /add-scoreboard [nom-équipe]. Le plugin comprend des guides d'intégration pour React, Next, Vue, Svelte, WordPress, Squarespace et Webflow.
L'application est en ligne sur app.scoreporch.com.
📖 Read the full source: r/ClaudeAI
👀 See Also
Un non-développeur crée une application web Sleep Sound Mixer en utilisant Claude AI
Un utilisateur sans expérience en programmation a utilisé Claude AI pour créer une application web entièrement fonctionnelle de Mixeur de Sons de Sommeil en une seule session. L'application permet de mixer six sons ambiants avec des contrôles de volume individuels via une interface navigateur propre et minimaliste.
Les agents de codage IA prennent des raccourcis : des développeurs documentent des cas où Claude et ChatGPT choisissent la voie la plus facile
Un développeur créant un dispositif de fusion de capteurs a constaté que Claude et ChatGPT fusionnaient tous deux les entrées de deux microphones en mono au lieu de mettre en œuvre le beamforming pour la conscience spatiale. Dans une tâche distincte d'entraînement de modèle, l'IA a initialement regroupé des sujets de tailles différentes sans les classer par cohortes d'âge.
Mémoire IA persistante via Obsidian MCP : 16 outils pour Claude Cowork
Un serveur MCP personnalisé relie Claude Cowork à Obsidian pour une mémoire persistante entre les sessions, utilisant 16 outils et des requêtes Dataview.
Opus gère le nettoyage du frontend en déléguant aux sous-agents d’un playbook
Un utilisateur a optimisé une page, documenté les correctifs dans un playbook ADR, puis a demandé à Opus de répartir les 9 pages restantes entre 3 sous-agents, touchant 41 fichiers avec des résultats Lighthouse quasi parfaits.