ReactTS 17 Start-up Starter (SPA)

My personal starter project! It was forked from vite-reactts17-chakra-jest-husky and improved upon. It is intended to quickly bootstrap React SPA apps for any React project.

This is a React + TypeScript + Chakra UI boilerplate to be built with Vite.

What's inside?

• ReactJS
• Vite
• TypeScript
• Chakra UI
• Framer Motion
• Vitest
• Testing Library
• Cypress
• Eslint
• Prettier
• Husky

+ other smaller dependencies

Todo

• Add a full Chakra UI Theme Example
• Configure Cypress to mount React components (SVG and Macros issues)
• Add typesafe-i18n as translation Library
• Add inlang as translation host
• Add axios with examples
• Add react-query with examples
• Add a branch with authenticated / unauthenticated routes examples

Technical choices

• Imports are sorted automatically (rules can be changed via .eslintrc.js config file)
• ESLint and Prettier are integrated with VSCode out of the box (you just need VSCode's ESLint plugin).
• Prettier is integrated with ESLint, so you do not need the Prettier plugin. More information here
• Improved lint-staged configuration: linting will only happen on staged files, not all files.
• Because of Husky settings, Typescript types and linting are checked before each commit. If for some reason you want to ignore and commit anyway you can use the --no-verify flag. (ex.: git commit --no-verify -m "Updated README.md")

For automatic ES-Lint corrections on VSCode, this setting was added to this project:

// .vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

For the same in Webstorm follow these instructions: https://www.jetbrains.com/help/webstorm/eslint.html#ws_eslint_configure_run_eslint_on_save

Getting started

1. Create the project.

   npx degit PedroSimao/react-spa-startup-starter my-app

2. Access the project directory.

   cd my-app

3. Initialize a git repository.

   git init

4. Install dependencies.

   yarn

5. Serve with hot reload at http://localhost:3000.

   yarn dev

Recommended VS Code extensions

• ESLint
• Prettier
• vscode-styled-components

Other commands

Lint commands

• Run eslint

  yarn lint

• Run eslint with fixing

  yarn lint:fix

Build commands

yarn build

Test commands

• Run tests with coverage (will open the coverage if all tests succeed)

  yarn test

• Watch tests

  yarn test:watch

License

This project is licensed under the MIT License.