React Router Template
Boilerplate of React Router (v7) project with Lint, TypeScript, Sass (SCSS), Tailwind (v4), Framer Motion, React Hook Form, Zod, TanStack Query, Vitest, Storybook, CI/CD, Lefthook (Git Hooks) and more.
react-router-template
React Router framework starter repository 🐢
Tech Stack
| Environments | Languages | Linters | Frameworks | Libraries | Testing | CI/CD |
|---|---|---|---|---|---|---|
| ![node-logo] ![pnpm-logo] |
![ts-logo] ![sass-logo] |
![eslint-logo] ![stylelint-logo] ![prettier-logo] ![lefthook-logo] |
![vite-logo] ![reactrouter-logo] |
![react-logo] ![tailwind-logo] ![zod-logo] ![rhf-logo] |
![vitest-logo] ![storybook-logo] |
![githubactions-logo] |
Other
Development
Required
node = ">=22"
pnpm = ">=10"
[!TIP]
See
.prototoolsfor more details.
Environment Variables
[!TIP]
See
.env.examplefor more details.
Commands
Installing Packages
pnpm i
[!IMPORTANT]
After the initial installation (if the format-on-save feature is not working), restart VS Code (IDE).
[!NOTE]
In the future, I want to migrate the Linter and Formatter from ESLint and Prettier configurations to Biome. However, I need to check compatibility by comparing the configuration options.
Start Development Server
pnpm dev
Linting
pnpm lint
Formatting Code
pnpm format
Runs linter and formatter
pnpm check
[!NOTE]
Commands related to
lint,format, andcheckperform similar operations to Biome.
Running Storybook (UI component tests)
pnpm sb
Running Tests
pnpm test
[!TIP]
See scripts in
package.jsonfor more details.
