Zustand Test

Template using Zustand with Next.js, React, Tailwind CSS, ESLint, Prettier, and VSCode

Installation

Clone the repository then run:

npm install

Usage

Start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Create a production build:

npm run build

Start the production server:

npm run start

Check for formatting errors:

npm run lint

Development

VSCode Extensions

Install the following extensions for VSCode:

• Tailwind CSS IntelliSense
• ESLint
• Prettier - Code Formatter

Packages

npm install installs the following packages:

Next.js

npx create-next-app@latest

Configuration files:

• next.config.js

Tailwind CSS

Configuration files:

• tailwind.config.js
• postcss.config.js

ESLint

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Configuration files:

• .eslintrc.json

Prettier

npm install --save-dev --save-exact prettier

Import Sorter plugin for Prettier:

npm install --save-dev prettier-plugin-import-sorter

Integration with ESLint

ESLint plugin for Prettier:

npm install --save-dev eslint-plugin-prettier

eslint-config-prettier package turns off all eslint rules that are unnecessary or might conflict with Prettier

npm install --save-dev eslint-config-prettier

Integration with Tailwind CSS

Tailwind CSS plugin for Prettier:

npm install --save-dev prettier-plugin-tailwindcss

Configuration files:

• .prettierrc
• .prettierignore
• .vscode/settings.json
• .eslintrc.json