Why I chose to rewrite TKDKid1000's Website with Firebase and Next.js

We've all redone things. From work assignments, to recipes, to actual to-do lists. I'm pretty sure that you haven't lived until you've had to repeat something that took 6 hours of your sadly finite life.

This was a case of just redoing something because I know that I can make it better.

Unsurprisingly, this isn't my first version of this website. You may have seen the old one, or you read the title of this article. Either way, I did have a few websites before this. If you can tolerate awful ui, you can see the old version on Wayback Machine. This was actually v2. I had another for a year before that (isn't it strange that these sites last for a year each?), before I even owned tkdkid1000.net. I would provide a Wayback Machine link, but it was never archived. If you want to see the 176 commits it took to make the original thing (2 are shutdown messages), you can at https://github.com/TKDKid1000/tkdkid1000.github.io. This was the first web project I ever worked on.

It took all of this for me to finally start learning proper web stuff. I've known about Firebase for a year now, but still didn't make the switch because I didn't really understand it.

Now, after 2 years frontend "experience", and a year of React knowledge, (I started learning React a year ago for Wyvern), I decided to integrate it into my own personal website.

Well, that's actually a lie, I wanted to rewrite to React almost 3 months ago. I remade some of the fronted, then scrapped the idea because I would have to change the backend a lot too (and I hate writing backend code). Obviously, after that I decided to start remaking the backend. I started, and just literally stopped because it was awful and I didn't understand SSR at the time.

It was around this time that I took a break from making this website, and did other projects. And, now I'm here. on August 16th, 2022. I realized that Firebase didn't suck and is actually like the best thing ever for a frontend dev like me.

If I didn't state it enough earlier, writing backend code is mentally degrading, and writing safe authentication systems is like impossible. I've now realized that Firebase covers all those, and database rules do everything my complex server side code is doing but like much better.

So, I wanted to rewrite this site with Firebase, just had to decide what framework. I was gonna just use a Webpack+TypeScript+React like in Wyvern, but then remembered Next.js.

So, a little advice, learn the framework before trying to implement it in your own websites. I ignored this rule and did about 4 extra hours of docs scrolling.

After all this, my app is basically done. I made a whole home page, blog system with MDX, and authentication (I'll need it eventually) with Firebase Authentication.

This did take some effort to implement realtime database, because I made a major mistake with the way I was updating values in my database hook. I eventually turned to react-firebase-hooks, but I plan to reinvent the wheel soon as I hate using libraries for small things like this.

Aaaaand, present day. In the span of 13 days (really 8 cuz I didn't work for 5 days), I redesigned this entire site! Woohoo.

// TODO: implement the "read next feature" (yes that's intentional, I know how to write a MDX comment)