SystemSoft, overhauled

Why?

If you haven't skimmed through the original SystemSoft project, I recommend you do so. It will provide a lot of context for this post.

I came to realize that Vercel allows you to host websites for free, and the Sanity content management system is also free for small projects.

Combining these two, there is no need for a self-hosted database, nor a virtual machine to host the website or the content management system. This means that the yearly cost of hosting the website is $0, apart from the domain costs.

Choosing the technology stack

I decided to keep Next.js as the web framework, as it is a great tool for building full-stack websites.

I moved from Tailwind CSS to Stitches and Radix UI, as I wanted to try out these new tools. In genereal, I'm very happy with the developer experience using Stitches and Radix, but as the project grew, the TypeScript auto-complete started lagging a bit. In particular, I learnt a lot from Radix's documentation, specifically their "Composing a palette" and "Understanding the palette" section.

I moved from Strapi to Sanity, due to the cost reduction.

I also moved from DigitalOcean to Vercel, also due to the cost reduction.

The overhaul process

As a I was not happy with the finished frontend design of the original SystemSoft project, I decided to start from scratch. I found it just as easy to create a brand color palette using Stitches + Radix, as it was to use Tailwind CSS.

Additionally, I created a simplistic logo using Figma, and exported it as an SVG file.

There was no big changes in the actual content in the content management system. Hence, converting the schemas and models was a breeze. Deploying to Sanity is also extremely easy, as it is a hosted service. To ensure auto-generated type safety of their models in my Next.js client, I used the Sanity GraphQL API with Apollo client and GraphQL Code Generator.

Deploying to Vercel is almost too easy. I just had to connect my GitHub repository to Vercel, and it automatically deploys the website on every push to the main branch.

Moving the domain name servers from DigitalOcean to Vercel was also a breeze. I just had to change the nameservers in the domain registrar, and click a button in the Vercel dashboard. Nice.

The result (and the cost reduction 💸)

The finished result can be seen at systemsoft.no. The yearly cost of hosting the website is now $0, apart from the domain costs. That is $300 USD less than the original SystemSoft project.

SystemSoft landing page