(all0w me t0 nerd a bit)
I made this blog public in April 2024. I haven't updated and published posts as often as I feel I should, but I'll take this time to go over the main building blocks of the site.
There are two things that spurred the initial undertaking of this project: the emptiness of my resume and the desire to publicly share some thoughts. I wanted to share something anyone could visit and analyze, ponder on. I felt that a blog, especially one made from scratch (no website builders over here), would be a fitting synthesis.
Much of the development process was centered around products I had never used before. These included the web development framework, the programming languages, the database, and the web deployment and hosting.
Next.js
I had used React many times before, but using Next provided a different perspective. I thought it'd be useful to learn about other web development frameworks, so I tried this one after reading about what was popular at the time. I struggled a bit in the beginning, but the tutorial was extremely helpful. I ended up using the relatively new App Router for the blog. Learning this framework greatly deepened my understanding of React, as did using this in tandem with TypeScript.
TypeScript
This was my first time programming in TypeScript; however, TypeScript is considered an extension of JavaScript, so it wasn't difficult to learn. It isn't generally used in smaller projects like my blog, but I thought it'd be helpful to add it to my toolkit. Looking back, I wish I had a deeper understanding of the differences between TypeScript and JavaScript before I started coding. That would've made the initial implementation much smoother, as I spent a lot of time trying to fix lower-level errors. If I understood the purpose and essentiality of "types", many of those errors would have been fixed much earlier. High-level shifts in thinking for smooth implementation.
Tailwind CSS
Tailwind CSS is a CSS framework that many choose over other frameworks (or raw CSS) because of the simplicity attributed to its "utility classes". I found it easy to use as well. There's a learning curve, but once you remember the utility class abbreviations in your written code, it's pretty smooth sailing. In addition to the predefined colors and styles, I added a few custom colors in my Tailwind config file. Then I used them in custom classes in my globals file using the "@layer" and "@apply" directives. From there, it's as simple as calling the classes using the custom class names you use in the globals file. I also liked the ease of customization for different screen sizes. I haven't experimented with many different CSS frameworks, but Tailwind is pretty cool to work with.
GitHub
The flagship software version control platform GitHub is what I usually use for my projects. Utilization is simple, especially once you figure out the commands using their CLI in a terminal. I used GitHub while developing the blog before initial deployment, and I continue to use it for any cosmetic or infrastructure-related changes to my code. GitHub pairs well with Vercel, the platform I used to host my project.
Vercel
Vercel, a company with a cloud platform that hosts and deploys web applications, created Next.js. As one could expect, web applications developed using Next.js are easily deployed with Vercel. Vercel also uses Git repositories (among a few other sources) for deployments. Builds of any branch in my GitHub repository that isn't the main branch are deployed in a preview environment to see how things would work and appear when I push to production. When a build of the main branch in my repository is created, it is then deployed in production mode. In addition to this, my Supabase database easily integrated with my Vercel project.
Supabase
For those who have used Google Firebase, you may be familiar with Supabase, as it is touted as the newer alternative to Firebase. The Supabase UI is magnificent, in my opinion. There's a bit of a learning curve when it comes to figuring out the Edge functions, which I used a few times for updating certain tables upon the creation of a blog post, but if you're familiar with PostgreSQL, you'll be fine. As stated before, integrating with Vercel was a breeze. Also, Supabase's docs are excellent. Everything I needed to integrate with TypeScript in my local environment was easy to find, and step-by-step instructions were available on demand. They even provided instructions for specific development use cases. Imagine more software products with docs like Supabase's. What a world that would be.
I'm happy to have taken on this project; I continue to grow with it as my local galaxy of ideas expands. You can also expect some changes from time to time that aren't directly related to the content. Feel free to check out the GithHub repo here.
Let me know if you have any questions. I'd be happy to engage.
Tags: curation, TypeScript, Next.js, React, Vercel