Blog

Website Starter Kit

I’ve started working as a freelance web developer in february 2022 and so far it’s been a lot of fun. Helping people to get their content, product or services online feels very rewarding. On the other hand it often feels like having three jobs at the same time. So improving processes plays a major role in getting better at freelancing.

Table of Contents:

• Improving the process
• The main parts
• Why I’ve chosen these technologies and honorable mentions

Improving the process

After my first few client projects I noticed that a lot of the requirements are the same and I keep copy and pasting code from one project to another.

Additionally the setup process of a new project often was the same. This brought me to the point where I saw the case for a having an (almost) blank page to kick things off, a white label, a website starter kit.

Note: Of course I know that this is not a big deal and I guess every developer has their own templates to get started.

But nevertheless I wanted to write about my starter kit, the main parts of it and what worked best for me so far. To reflect on my decisions and also gain insights from others and what works best for them.

The main parts

So here it is, my website starter kit ↗ Opens in new tab.

It’s basically a setup of

• NextJS with TypeScript,
• TailwindCSS for styling
• Prismic as a headless CMS with pre-modeled and pre-built components
• Linting with eslint and prettier

With this setup I’ve already accomplished a lot of different use cases for client projects.

From basic one-pagers, to landing pages with a handful of subpages, to big corporate pages with dozens of subpages and web app features like filtering, sorting, searching, connecting to a database, multiple API routes and integrating different third-party services.

I have the feeling that this starter kit is ready for all of it and whenever I start a new client project now, I just use it as a base and get started from there real quick.

Without thinking or taking the time to setup and install dependancies. This feels really cool.

Why I’ve chosen these technologies and honorable mentions

NextJS with TypeScript

NextJS is just so easy and fun to use, the documentation is fantastic and all the sites I build with it are super fast, using the static generation approach. So this was a no-brainer.

But I have to say, after playing a bit with Remix ↗ Opens in new tab I’m hoping it will get more popular and get a Prismic integration one day.

I can totally imagine switching NextJS for Remix, because it makes things even easier and more natural.

TailwindCSS

I’ve read all the discussion around TailwindCSS and I understand some of them. At the end of the day I’m so much faster when I use Tailwind for styling in comparison to styled-components, which I’ve used for all my projects before.

Prismic

The market for headless CMS is huge and I could fill a whole page just about them. I’ve tried a few and I liked Prismic the most. This is based on their content modeling approach with custom types and slices.

But it is also mainly based on their editor interface. I have the feeling that this is more accessible than others for non developers and this is a major selling point for me.

But this starter kit does not only contain the integration part of prismic as a CMS. It also has pre-modeled and pre-built components, that almost every website uses. Like header, footer, menu or text-image.

Linting with eslint and prettier

No one wants to manually format code. I’ve worked in a project years ago where there was no automated code formatting and it was horrible. Hours spent by setting code on the same line. Ugh.

So integrating eslint together with prettier is a no-brainer. Renaming variables, forgetting one file and you get errors and don’t know why. Not anymore with basic linting done by eslint.

That’s it, thats my website starter kit, the foundation from what I start all my projects right now. I’m really curious when I’m going to change things here and how long I’m going to use this.

What is your stack? What technologies are you using all the time together? I’m really curious to know! Send me an email ↗ Opens in new tab with your thoughts on this.

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email ↗ Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

I wish you a wonderful day! Marco