Hello tech enthusiast! Thanks for your curiosity on how I built all this. The content below was written for the third season (2021-2022). The fourth season (2022-2023) is primarily a content update. There's not much in the way of architectural or implementation changes. I think the content below is stil valuable.
The tech for the card is different than it was in previous seasons.
A brief highlight of those differences:
I rebuilt the site for the second season. Next offered a more vanilla React experience. There is no strange GraphQL middleware layer. There is mix and matching of CommonJS import/exports and modern ES imports. The site speed and optimization was ideal. At the time, it was a good learning experience too, as Next had its mindshare taking off.
The first season of this site was built with Gatsby. Gatsby had a lot of mindshare at the time, and other tooling was still immature.
From the second season and on, the card was hosted through Vercel. Vercel offers a generous free tier. If that was ever not enough for this card site, well, mission accomplished. Vercel offers hosting simplicity by letting me skip the more manual rsync process, abstracting the infrasturcture and even providing a global cdn for better experiences.
Historically my sites have been hosted on my Linode VPS. The VPS approach offers consistent pricing, high enough availability for my systems, and enough capacity to run everything I operate. The downsides of the VPS is that it takes a lot of maintenance time. Updates, migrations, you name it. During the first season, the site was hosted on the vps.
For the first season, I used the card to practice with styled components and making an entire suite of components for my main site and the card site. That was a practical idea and implementation. Whenever I go back and look at the styled components I made though, I think, "wow, there sure are a lot of flexes in here." It feels like reuse since those components exist now, but it is also poor quality reuse. Things have names that do not need them. Things have duplicated portions since there was no element agnostic carrier.
TailwindCSS, on the other hand, solves many of those gripes. But it also brings others with it. Instead of having a useful of components to package up and deliver to any new project, TailwindCSS still has no good answer. But the productivity and the lightness balance this out with the problems. I have said it before and will repeat it here: TailwindCSS is not the final form.
During the third season, the TailwindCSS installation was upgraded. Next with modern PostCSS and Tailwind JIT made my customizations to the build steps obsolete! Tailwind JIT is incredibly fast too, keeping up with the speeds that the latest Next offers during development.