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
Utilisateur d'OpenClaw construit une pile de 10 opérations d'automatisation avec des pronostics sportifs, de la génération de leads et de l'exécution numérique.
Un développeur a passé deux mois à construire une pile d'opérations IA sur OpenClaw qui comprend un pipeline quotidien de pronostics sportifs avec des données ESPN et une livraison Twilio, un évaluateur nocturne de pronostics, un scrapping de prospects commerciaux depuis Google Maps, des sondeurs Stripe pour les produits numériques, des e-mails de briefing de session et des rapports d'opérations quotidiens.
Vidéos de tutoriel produit entièrement automatisées : Claude + Playwright + Magic Hour + Remotion
Un développeur a créé un pipeline zéro humain qui transforme une URL de fonctionnalité en une vidéo tutorielle complète en utilisant Claude pour le script et l'orchestration, Playwright pour l'enregistrement d'écran, Magic Hour API pour l'échange de visage et le synchronisme labial, et Remotion pour le montage.
Pipeline de production vidéo multi-agent avec Claude : Architecture de contrat de script et ventilation de la recherche
Un pipeline multi-agent utilisant Claude pour produire des vidéos YouTube éducatives de 15 à 20 minutes à partir d'un sujet et d'une personnalité. Il comprend une architecture de contrat narratif pour la cohérence entre les chapitres et un déploiement parallèle de la recherche avec élimination compétitive des plans.
Construction d'un système d'agent IA autonome avec Claude Code : une étude de cas
Un développeur a créé Acrid, un agent IA autonome qui dirige une entreprise appelée Acrid Automation en utilisant Claude Code comme système d'exploitation. Le système comprend 14 compétences sous forme de commandes slash, 4 sous-agents pour la délégation, une mémoire basée sur des fichiers sans bases de données vectorielles, et un pipeline de contenu automatisé reliant Claude à n8n via GitHub.