A show randomizer

Yep. That’s all this project is.

No, but really, this project is really 3 separate projects that have kinda evolved over the years.

A C# app
A Django / React webapp
A Next.JS webapp

All of the show data for all 3 projects came from an api provided by themoviedb.org

Ok, but why?

Back when my wife and I started dating, some of our dates would just be us throwing on Netflix, and picking a random episode of The Office to watch. I thought to myself, wouldn’t it be kinda cool if there was an app that did that for you? Thus, the idea of an app that would pick a random episode of a show of your choosing was born. I know, not the most original idea - after all, this type of project is usually one of the first for newer programmers to pick up. However, this one is kinda special to me as it was my first foray into real app development, and not just hacking around with python scripts.

Attempt the first

The first iteration of this app was a Xamarin-based, cross platform project that would cross-compile to Android, iOS (theoretically, never tested), and desktop. All of the UI was written using WPF with C# for business logic, and I primarily tested on the Desktop and Android targets. I never published the app, but I left the dev build on my phone, and whenever we wanted to play Netflix-roulette, we’d use the app! For what it was (my first “real” side project), it worked pretty well.

Aaaaaand, here is where I’d insert a screenshot if I’d had one. Who knows, maybe one day, I’ll resurrect it (even though I’m almost positive I’m several major versions behind on dependencies by now).

Attempt the second

Around the time I finished my first attempt, I wanted to start dipping my toes into web development. I had used python pretty extensively at work, so I knew I wanted to write my backend with it. Around the time, React had been gaining a lot of popularity, so I decided that this would be a good venue to practice with it for my frontend. I booted up create-react-app (ew, gross) with yarn as my package manager (lol), spun up a django project and got hacking!

Once I had a functional prototype, now came the time to deploy. I ultimately decided to package my app together into a heroku “container” and deploy there. At the time, this was definitely the best option. Setting everything up was really quick, and the best part was there was no monthly fee! And then…

Part 2 of Attempt the second

Heroku killed off their free plan. Oof.

Welp, now to find another way to deploy the app. Eventually I settled on a cheap, $5 a month DigitalOcean Droplet running Dokku. However, this also meant transitioning my app from using Heroku’s build process, to packaging with Docker - which also means that I need to learn Docker now… Well, no better time than the present! After much struggling, I learned how to build with docker and put together a github action to automate my deployment to Dokku - with much success! That deployment stayed in place for a bit until I moved on to my third attempt.

Attempt the third

For this time, I only had 2 requirements:

I wanted to learn something completely new.
I wanted whatever I was working with to be hosted for free (no sense in paying for something that’s just a hobby project, ya know?)

At the time, I was an avid viewer of Theo Browne (and still am!), and I won’t lie, I was a bit influenced by the topics he was talking about. For attempt the third, I decided my new tech stack would be built with the T3 stack and Next.JS with Material UI components. Immediately, my dev experience was excellent.

No more running separate processes for backend and frontend
No more having to package into docker!
tRPC is like the best thing ever

If you’d like to see it, the link to it is here! - be warned, the mobile experience isn’t great.

Afterword

While creating the tRPC tag for this article, I was looking for logo images for tRPC. Something nifty that I found was that if you right click the logo in the top-left on tRPC’s website, you get taken to the media assets page. Neat!