[{"data":1,"prerenderedAt":236},["ShallowReactive",2],{"sideproject-en-cards-game-thirtyone":3},{"id":4,"title":5,"body":6,"date":208,"description":209,"extension":210,"featured":211,"image":212,"locale":213,"meta":214,"navigation":225,"order":226,"path":227,"repo":228,"seo":229,"status":230,"stem":231,"technologies":232,"url":228,"__hash__":235},"sideprojects\u002Fen\u002Fsideprojects\u002Fcards-game-thirtyone.md","Thirty-One Card Game (2025)",{"type":7,"value":8,"toc":190},"minimark",[9,13,17,33,38,43,46,50,53,57,60,64,67,71,74,78,81,85,88,92,95,99,102,106,109,113,116,129,132,145,149,168,172],[10,11,5],"h1",{"id":12},"thirty-one-card-game-2025",[14,15,16],"p",{},"I have created a multiplayer card game without writing a single line of code.",[14,18,19,20,23,24,26,28,29,31],{},"In 10 days I ran an experiment: to develop a complete application using only AI (Claude Code, Gemini, and ChatGPT), following what is called \"vibe coding\".",[21,22],"br",{},"\nThe challenge: to program zero lines myself.",[21,25],{},[21,27],{},"\nThe result? A functional online version of Thirty-One, a card game I used to play in college.",[21,30],{},[21,32],{},[34,35,37],"h2",{"id":36},"what-ive-learned","What I've learned",[39,40,42],"h3",{"id":41},"its-possible-to-program-without-knowing-how","✅ It's possible to program without knowing how",[14,44,45],{},"The barrier to entry has been dramatically reduced. Although knowing how to program and having a prepared environment helps a lot.",[39,47,49],{"id":48},"️-hallucinations-are-real","⚠️ Hallucinations are real",[14,51,52],{},"If you don't specify very clearly what you want, the AI makes things up. In my case: poker mechanics that didn't exist in the game, visual template systems I hadn't asked for...",[39,54,56],{"id":55},"small-changes-work-better","🎯 Small changes work better",[14,58,59],{},"Small iterations = fewer errors.",[39,61,63],{"id":62},"tokens-run-out-fast","💰 Tokens run out fast",[14,65,66],{},"I had to switch between Claude Code, Gemini-cli, and ChatGPT. If you know how to program and make small adjustments, you save a lot of tokens.",[39,68,70],{"id":69},"git-is-essential","🔄 Git is essential",[14,72,73],{},"When the AI does strange things, you can go back. Friends who have tried the game have sent me some pretty curious screenshots.",[39,75,77],{"id":76},"automatic-tests-are-key","🧪 Automatic tests are key",[14,79,80],{},"Asking the AI to generate tests and run them with every change avoids many problems (although you have to check that the tests are correct).",[39,82,84],{"id":83},"responsive-is-complicated","📱 Responsive is complicated",[14,86,87],{},"Making it work well on both mobile and desktop consumed a lot of tokens. The card animations, on the other hand, came out perfect the first time.",[39,89,91],{"id":90},"errors-in-production","🐛 Errors in production",[14,93,94],{},"I integrated Sentry.io to capture errors that appeared on real users' devices and that I didn't see on my computer.",[39,96,98],{"id":97},"automatic-deployment-helps","🚀 Automatic deployment helps",[14,100,101],{},"I have a server with Dokploy linked to GitHub that deploys automatically, Vercel\u002FNetlify style.",[34,103,105],{"id":104},"the-most-important-conclusion","The most important conclusion",[14,107,108],{},"Now that the game is public and functional, I find it risky to continue developing only with AI. When you upload changes, shortly after someone sends you a screenshot with something strange and you don't know how it happened. To add new features, I think I should do it myself to maintain control.",[34,110,112],{"id":111},"the-game","The game",[14,114,115],{},"Thirty-One is simple but addictive: each player has 3 cards and adds up the ones of the same suit to reach 31. You can change one card, all of them, or pass. When someone thinks they have a good score, they can \"close\" and give the others one last round.",[14,117,118,122,123],{},[119,120,121],"strong",{},"Try it yourself:"," ",[124,125,126],"a",{"href":126,"rel":127},"https:\u002F\u002Ftrentau.albertsarle.com",[128],"nofollow",[130,131],"hr",{},[14,133,134,138,139],{},[135,136,137],"em",{},"Publication date: September 2025","\nMore details about the process and learnings at\n",[124,140,144],{"href":141,"rel":142,"title":143},"https:\u002F\u002Fwww.linkedin.com\u002Fposts\u002Falbertsarle_trenta-u-joc-de-cartes-tradicional-activity-7378337323106684928-iaK1?utm_source=share&utm_medium=member_desktop&rcm=ACoAAAB9lcYBciVgZN6qZ9kz7lNq8aDDgVsJMEQ",[128],"Linkedin","LinkedIn",[10,146,148],{"id":147},"tech-stack","Tech Stack",[150,151,152,156,159,162,165],"ul",{},[153,154,155],"li",{},"HTML5 & CSS3",[153,157,158],{},"Vanilla JavaScript",[153,160,161],{},"Responsive Design",[153,163,164],{},"Touch Controls",[153,166,167],{},"Internationalization (i18n)",[10,169,171],{"id":170},"features","Features",[150,173,174,177,180,183],{},[153,175,176],{},"Multi-language support (EN, ES, CA)",[153,178,179],{},"Mobile-optimized interface",[153,181,182],{},"Traditional Thirty-One rules",[153,184,185,186],{},"AI opponents with smart gameplay\n",[124,187,189],{"href":126,"rel":188,"title":189},[128],"trentau.albertsarle.com",{"title":191,"searchDepth":192,"depth":192,"links":193},"",2,[194,206,207],{"id":36,"depth":192,"text":37,"children":195},[196,198,199,200,201,202,203,204,205],{"id":41,"depth":197,"text":42},3,{"id":48,"depth":197,"text":49},{"id":55,"depth":197,"text":56},{"id":62,"depth":197,"text":63},{"id":69,"depth":197,"text":70},{"id":76,"depth":197,"text":77},{"id":83,"depth":197,"text":84},{"id":90,"depth":197,"text":91},{"id":97,"depth":197,"text":98},{"id":104,"depth":192,"text":105},{"id":111,"depth":192,"text":112},"2025-09-28T12:00:00Z","Traditional Catalan card game built ONLY with Vibe Coding","md",false,"https:\u002F\u002Fres.cloudinary.com\u002Fdnyvmvkqi\u002Fimage\u002Fupload\u002Fc_scale,f_auto,q_auto,w_900\u002Fv1759147745\u002Ftrentau_mobile_bdpxfp.png","en",{"slug":215,"type":216,"categories":217,"tags":218,"achievements":223,"liveUrl":126},"cards-game-thirtyone","sideproject",[216],[219,220,155,221,222,167],"Vibe Coding","Claude Code","Vanilla Javascript","Responsive design",[224],"Made entirely with AI (Claude Code)",true,1,"\u002Fen\u002Fsideprojects\u002Fcards-game-thirtyone",null,{"title":5,"description":209},"published","en\u002Fsideprojects\u002Fcards-game-thirtyone",[233,155,221,222,167,234],"Vibe Coding (Claude Code)","Dokploy","7Cc2M5Kn9r3auYt46Pjki8JTENB6Q91fsqQ4sZ_Evak",1779354921589]