A modern React + TypeScript + Vite starter with pre-configured ESLint, Prettier, Git hooks, Commitlint, React Testing Library, Vitest and GitHub Actions out of the box 📦
- ⚡️ Vite - Next Generation Frontend Tooling
- ⚛️ React 18 - A JavaScript library for building user interfaces
- 💎 TypeScript - Why not?!
- 🔨 ESLint - JavaScript linter
- 🌀 Prettier - Code Formatter
- 🐺 Husky - Native Git hooks
- 🐺 Lint Staged - Run Linters On Staged Files
- 📑 Commitlint - Linting your commits based on commit convention
- ⚙️ Vitest - Unit Testing Framework
- ⚙️ Testing Library - Test UI components in a user-centric way
- 🔬 GitHub Actions - CI with GitHub Actions
- ⌨️ Alias Imports
We encourage you to use Visual Studio Code
Please install the following plugins:
- Code Spell Checker
- ESLint
- EditorConfig
- Prettier
Optional plugins:
- GitLens
- TODO Highlight
components # Reusable components used in multiple pages.
└── Button # One example of component
├── __tests__ # All test files related to Button
│ └── Button.test.tsx # Component Unit Test
├── Button.module.scss # Button styles
├── Button.tsx # Component file
└── index.tsx # Exports component outside
pages
└── Counter # One example of page
├── __tests__ # All test files related to Counter page
│ └── Counter.test.tsx # Component Unit Test
├── hooks # Hooks related only to Counter page
│ ├── __tests__
│ │ └── useCounter.test.ts
│ └── useCounter.ts
├── components # You could have components related only to Counter page.
├── utils # You could have utils related only to Counter page.
├── Counter.module.scss
├── Counter.tsx
└── index.tsx # Exports page component
routes # All the routes
hooks # You may have hooks folder used in multiple pages or components in top level directory
├── __tests__
│ ├── useSomeHook.test.ts
│ └── useOtherHook.test.ts
├── useSomeHook
└── useOtherHook
Idea is to have related files in one place.
By this every component or page has its own folder with its own tests and styles. Every page has its own components, hooks, utils.
We use NVM to manage the Node version. You can install it NVM
Version is specified in .nvmrc file.
After installing NVM, run the following command to install the Node version used in this project:
nvm install
nvm useWe use yarn to manage the dependencies. You can install it by running the following command and then install dependencies:
npm install -g yarn
yarn # or yarn installIn this project, you can run the following scripts:
| Script | Description |
|---|---|
| yarn dev | Runs the app in the development mode. |
| yarn build | Builds the app for production to the dist folder. |
| yarn preview | Serves the production app locally after build. |
| yarn lint | Lints the project |
| yarn test | Runs and watches unit tests. |
| yarn test:coverage | Gets unit test coverage. |
| yarn test:ci | Runs unit tests once. |
| yarn test:ui | Runs unit test in UI. |
We use Commitlint to lint our commit messages. This ensures that we have consistent commit messages.
Example of a good commit message:
git commit -m "feat: add new button component"Commit Types:
| Type | Description |
|---|---|
| feat | A new feature for user, not a new feature for build script |
| fix | A bug fix for user, not a fix to a build script |
| chore | Other changes that don't modify src or test files |
| style | Changes that do not affect the meaning of the code (white-space, formatting) |
| docs | Documentation only changes |
| refactor | A code change that neither fixes a bug nor adds a feature |
| perf | A code change that improves performance |
| test | Adding missing tests or correcting existing tests |
| build | Changes that affect the build system or external dependencies |
| ci | Changes to our CI configuration files and scripts |
| revert | Reverts a previous commit |