Choose tech stack

[LucaPipolo]

Goal

• Research the best technologies to use for this project, taking in account the needs and limitations expressed in the below details section.

Details

• The ultimate goal of the project is to create a blazing-fast, secure, and easy-to-maintain personal portfolio website. The website will likely support multiple languages and have a blog section. Therefore, the editorial experience should be fast and enjoyable with minimal friction when creating new content or adding languages.
• The chosen technologies should be widely adopted and supported, have a low cost to host and maintain, and be based on PHP (and frameworks) and/or JavaScript (and frameworks). They should also be easy to test.

[LucaPipolo]

After evaluating several options, I opted for the following tech stack:

Backend

• Sanity.io CMS

Frontend

• Next.js 13
• TypeScript
• Tailwind CSS

Dev Tools

• Conventional Commits
• Prettier + ESLint
• Husky
• GitHub Actions
• Docker

Details

• One of the goals is to be able to easily edit and publish new content. For this reason, I excluded the option of a frontend-only approach using Markdown to manage the blog. I tried this option in the past and found it frustrating to deal with multiple languages.
• I looked at many different content management system (CMS) options, like WordPress, Strapi, Craft CMS, Statamic, and even one I made myself using Laravel. I decided to use Sanity.io because it's hosted in the cloud, so I don't have to worry about managing hosting. The free plan is enough for this project, and upgrading later won't be too expensive. Another good thing is that Sanity.io uses Node.js, which makes it easier to use the same programming language (JavaScript) for both the frontend and backend. Lastly, it's open source.
• There are many reasons why I chose to use Next.js. First, I was already familiar with this framework. Second, it's commonly used in the industry. Third, it's based on JavaScript. Fourth, it works well with Sanity.io. Lastly, it's open source.
• It's important to note that Next.js 13 made some big changes that could be helpful for this project. These changes include the app directory, turbopack, and @next/font.
• Tailwind CSS is a way to avoid maintaining separate CSS files when developing components (using CSS modules). I already have experience with it, and it is widely used with Next.js.
• Conventional Commits is a specification that helps enforce standards in commit messages.
• Prettier and ESLint will be used to define code standards, and Husky will be used to enforce them locally (including the conventional commits).
• GitHub Actions will be used as a second check to enforce code standards remotely, and it will probably be used for publishing on stage and production.
• Docker is the best option for having a stable and reliable local environment on my machine and whoever wants to contribute to the project.
• There are two tools that could be useful to evaluate while working: pnpm and class-variance-authority. I used pnpm recently in some projects and it seems really fast compared to npm or yarn. class-variance-authority seems to be a great option for building type-safe UI components, according to their website.