Blog
Website Starter Kit
Illustration by Laura Heine
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
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.
Hi Friend!
If you enjoy my writings and learn something from them, you can consider to support me! One way of doing this is just as easy as buying me a Coffee!
Thanks so much! This means a lot to me and is a great way to support my work.
âïž Buy me a coffee âïž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!
âïž Buy me a coffee âïžI wish you a wonderful day! Marco