The Tech Stack

• Typescript
• Next
• React
• Node
• React Three Fiber
• Tailwind CSS
• MongoDB
• Vercel

---

A Walkthrough of yegor.codes

The Brainstorming

The original goal of this site was to replace my existing static site with a more dynamic one while focusing on long-term service. I wanted it to be an extension of me and not just a digital résumé for recruiters. A sort of digital home where people from all of the world can visit to learn more about and connect with me. The core principle I had in mind was modularity. I wanted to have control over the full stack, from the client, to the backend, to the database and everything in between. The secondary objective was to make it as platform agnostic as possible. Not only in the sense of the client's machine, but also in the sense that I would be able to swap out the libraries, front-end components, backends, databases and more without changing the rest of the application. Kind of like one of those eco-friendly modular phone kits that keep trying to make it onto the market.

Throughout my entire programming career, I always started projects with a front-end focus. I like tinkering with designs and user-interfaces and building the exact experience I want my users to have. So most of the backend work I left as an afterthought (not really) that was glued together in any way possible to get the job done. My previous site was built with Google Firebase, a sort of Swiss army knife backend that handles much of the complexity for you, from providing database solutions to analytics, hosting, and more. So in order to achieve the goals I set out for this project, I had to decouple myself from such abstractions and learn to build and utilize databases and backends on my own. While on this train of thought, I figured this was the optimal time to learn what the big boys were using and perhaps learn new technologies that would give me an edge in the job market. Having already known React and having worked with NoSQL databases before, I decided to settle for MERN.

Stack Decision

I decided I was going to learn the MERN (MongoDB, Express, React and Node) stack. The primary reasoning being it's popularity in large-scale production environments which meant learning the tech also made me a more competitive candidate for employment. However, I wanted to take it one step further and sprinkle in one of the hottest web frameworks out there: NextJS. I've been hearing about it more and more and despite initial hesitation to learn (seeing as I didn't require the Server-Side Rendering it was known for) I found it to be pretty inuitive to pick up. It also provided solutions to problems I didn't even know I had yet. One example is its handling of "slugs" for dynamic pages and another is its optimization for SEO. Aside from Next, this would be my first dive into Node and Express, particularly for writing APIs as well as the MongoDB database.

The Walkthough

I originally wanted the site to have four parts. I wanted one landing page that supported a mini game environment in the browser full of models, animations, interactions and more. This was meant to allow visitors to learn more about me by interacting with a 3D representation of my room. The second part was meant to be a static "About Me" page that gave that same information but in a form that allowed visitors with slower internet and hardware, or those who relied on accessibility features, to use. The last two sections were meant to be the "Portfolio" and the "Blog" panes, which listed various projects I worked on and various writings I typed up, respectively. This project quickly grew in complexity as I started to add more functionality that would take what was originally a static site into a full blown custom CMS (content management system). A sort of investment for my future self. The main example of this was the admin dashboard I would wind up making for myself.

This dashboard was originally created to allow me to quickly type up posts on the fly without hardcoding it into the database or the build bundle. It quickly expanded to include analytics, allowing me to see the views each post got, the feedback I recieved and more. I then decided to connect the dashboard to my database and make the panes grow and shrink dynamically depending on the number and types of collections I had on my database. Thus, I expanded functionality to allow me to perform CRUD operations on everything from my About page to the messages I received through the contact form.

In order to allow me to sign into the admin section of the site, I needed some form of authentication. I previously relied on Firebase for that but decided to implement NextAuth this time around.

One of the last challenges I faced was in storing images for my site. I didn't have much content originally to share, so I depended on DropBox for custom uploads and then the original hoster like WIkiCommons for the images I borrowed from the internet. That all felt unsustainable as I don't like leeching off of other people's servers and DropBox isn't exactly an image hosting site. I was aware that MongoDB provided the GridFS API for such tasks, but dealing with the fragmentation of images and files into chunks felt like overkill. So, I decided to implement Firebase Storage to host all my blobs and image files.

Finally, this was all bundled up and deployed with Vercel. I originally planned to go for an Amazon EC2 instance and bundle everything together into a docker component. This was simply to learn more about Docker and the AWS ecosystem. But after doing the math for compute time, I figured it was a tad pricey and probably overkill for such a site in the meantime.