Evolution of the Magic Card Generator

Ben Craton — Thu, 01 Jun 2017 00:00:00 +0000

</div>

NOTE</strong>
If you’re wonder where the site is: see this post</a>.</p> </div> </div>
Introduction</h2>
I like Magic: The Gathering and I like programming, so in 2017 I built a web page that let people make their own Magic cards: upload some art, fill in the card attributes, get a card. That’s it. That was the whole idea. It then proceeded to eat nearly a decade of my hobby time, one rewrite at a time, and by January 2024, strangers on the internet had made over 250,000 cards</strong> with it.</p>
The honest framing: every version of this site was an excuse to learn whatever I’d just been exposed to at work.</p>
Version 1: PHP, Like an Honest Man</h2>
A basic PHP form and an image generator. Users typed in card text, the server composited it onto a card frame. It taught me web development fundamentals the traditional way: by breaking a live site repeatedly.</p>
Version 2: The Learning Platform Era</h2>
When I came back to it, I rebuilt it as an excuse to learn the “grown-up” stack of the mid-2010s:</p>

Python 3 & Django</strong> for the backend</li>
Neural networks & image recognition</strong> for automated analysis of uploaded card art</li>
Bitbucket, Jenkins, Docker, Rancher</strong> (a real CI/CD pipeline for a silly card site)</li> </ul>
The unglamorous lesson came from migrating 250k existing images and their data to a new format. Nothing teaches you respect for data integrity like the possibility of destroying a quarter-million pieces of other people’s art with one bad script.</p>
Version 3: Peak Complexity</h2>
Version 3 adopted whatever my DevOps colleagues were excited about that year:</p>

Vue.js</strong> frontend, Node.js & MongoDB</strong> backend, Redis</strong> caching</li>
An AI NSFW filter</strong> (because the site had no accounts by design, and anonymous internet users plus an image uploader is exactly the moderation problem you think it is)</li>
Docker & Kubernetes</strong> for orchestration, Azure DevOps Pipelines</strong> for deployment</li> </ul>
Yes, this is an absurd amount of infrastructure for a card generator. That was partly the point: I got to make my architecture mistakes on my own time instead of my employer’s.</p>
Where It Stands</h2>
The site is down (see the self-hosting update</a> for why), and I doubt it’s coming back. But a quarter-million cards is a quarter-million small moments of someone making a thing and grinning at it, and every skill this project taught me got used professionally within a year or two of learning it. Not bad for a hobby project that started as one PHP file.</p>

FalseBlue - devops

Evolution of the Magic Card Generator

Version 2: The Learning Platform Era</h2> When I came back to it, I rebuilt it as an excuse to learn the “grown-up” stack of the mid-2010s:</p>

Version 3: Peak Complexity</h2> Version 3 adopted whatever my DevOps colleagues were excited about that year:</p>