My tech stack of choice

Published by

I am redesigning my personal site with the main goal of having a better surface area for reading. I will bump into plenty of hurdles but I’m looking forward to figuring things out 🚀

I won’t cover which headless CMS I am planning to use to draft, edit and publish content. Finding one terrifies me so if you have any low-config recommendations please give me a shout on Twitter.

Anyways, keep reading to find out more about the three technologies that I have set on to build my new site:

  1. Next.js: My React framework of choice.
  2. Tailwindcss. A glorious utility-first CSS framework.
  3. Vercel. For hosting and seamless git-based deployments.

Next.js ✨

Next.js is the React framework that I am using to build the website. It provides a great ‘developer experience’ and comes with a set of built-in features that make the lives of newbies like me easier. Here are my top 4 features 👇

  • Zero config → I don’t need to worry about code compilation and bundling. This is done automatically with Webpack and babel.

  • Fast refresh → Also known as ‘hot reloading’ it gives me instantaneous feedback on edits made to the React components.

  • Production-ready code → This is a killer 🙂. Any Next.js application is ready for production from the start.

  • Static-generation → The HTML is generated at build time and will be reused on each request. Aka, incredibly fast.

Tailwindcss ✨

Tailwindcss is a utility-first CSS framework intended to ease up styling web applications. I have been playing with Tailwind on a project that I am building with a programmer friend of mine for the past couple of months and I’m all in.

Some people call it a “utility bundle” and I like that. Instead of providing predefined UI components, Tailwindcss comes with a set of utility classes (constraint primitives) that you then use to build your components.

This approach comes with some downsides (your HTML pages will get cluttered) but I feel that the benefits of styling your web app without the need to writing custom CSS or leaving the comfort zone of your HTML code outweighs its drawbacks. Here is a nice quote from a pro:

If I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS. — Guillermo Rauch

Vercel ✨

And finally, I will be using Vercel to take care of deployments and hosting. Deploying and hosting websites is a breeze nowadays compared to days of FTPing your files over to servers.

There are a number of services playing in this space. They integrate seamlessly to version control systems like GitHub and will kickstart their deployment process every single change the master branch. As I read somewhere yesterday, today deployments are just a git push away.

I was using Netlify on my previous site but as Next.js was created by the team behind Vercel, I have decided to give them a go 👋

That’s all. I enjoyed writing this post.

Thanks for reading,
Manolo
@recio_sjogren

Receive my weekly posts by email!

Each week I break down a thought-provoking piece on how to build successful SaaS products.