GreenOn
Software
Join
HomeCoursesModern Gatsby5 ecosystem project setupCourse overview
Article thumbnail

🔰 Course overview

1m
fullstack
full course
guide
tutorial

Intro

A light introduction to course topics, goals, and description of course concepts. You'll know what we'll learn, check and build.

Technical check

Author

Linguistic check

Before we start

The goal of this course is to create a repository, not deep dive into all concepts connected with course stack. So, we'll focus only on topics connected with the project setup.

Make sure that you have installed Node 18.18.0 version. If you have different one, feel free to use NVM tool, to be able to switch versions quickly.

In addition, we'll use npm in version 8.11.0. You may have weird errors if your versions will be different, so please keep it in mind.

About links and resources

Under this lesson, we'll add all resources to the links that will be used in this course. It's just for the sake of better navigation. So, if you already checked all lessons, below you'll have all important links (source code, final examples, ...etc.).

The finished template repository

The course progress in commits

The goals

A lot of developers work with Gatsby. I've built many sites with this framework and I must say I really like it. In this course, we'll create a bulletproof Gatsby5 template with a modern ecosystem, so you'll be able to start your next projects really fast without additional effort.

So, the goal of this small course is to create a developer-friendly, high-performant, scalable, plug-and-play repository template on Github. We'll create a project, then we'll configure all the stuff around. In this course, we will:

  • create a Gatsby5 project with TypeScript,
  • setup Eslint, Prettier, Husky, and Commitlint for the project,
  • add Tailwind and dark mode support,
  • add md and mdx syntax support for creating pages dynamically via these files,
  • connect Zustand library to manage the state,
  • add Storybook setup and Chromatic configuration for the project,
  • prepare the testing environment with Jest and Cypress,
  • add type-checking, test execution, and automatic deployment.

Let's start

Go to first lesson - Using Gatsby CLI to setup project and start the journey!

Adrian Połubiński

Senior Frontend Developer

I create content regularly!

I hope you found my post interesting. If so, maybe you'll take a peek at my LinkedIn, where I publish posts daily.

Comments

Add your honest opinion about this article and help us improve the content.

created: 25-09-2023
updated: 06-12-2023