{"id":30584106,"url":"https://github.com/Kamahl19/react-starter","last_synced_at":"2025-08-29T09:03:03.359Z","repository":{"id":11169459,"uuid":"68607771","full_name":"Kamahl19/react-starter","owner":"Kamahl19","description":"Full-featured typescript starter for React application","archived":false,"fork":false,"pushed_at":"2024-03-01T10:28:25.000Z","size":14990,"stargazers_count":104,"open_issues_count":0,"forks_count":23,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-05T02:36:07.054Z","etag":null,"topics":["boilerplate","radix-ui","react","shadcn-ui","starter-kit","tailwindcss","tanstack-query","typescript","vite","vitest","zod"],"latest_commit_sha":null,"homepage":"https://react-starter-kamahl19.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kamahl19.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-09-19T13:19:34.000Z","updated_at":"2025-04-23T18:04:06.000Z","dependencies_parsed_at":"2024-03-01T11:46:29.611Z","dependency_job_id":null,"html_url":"https://github.com/Kamahl19/react-starter","commit_stats":null,"previous_names":[],"tags_count":5,"template":true,"template_full_name":null,"purl":"pkg:github/Kamahl19/react-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamahl19%2Freact-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamahl19%2Freact-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamahl19%2Freact-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamahl19%2Freact-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kamahl19","download_url":"https://codeload.github.com/Kamahl19/react-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamahl19%2Freact-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272658783,"owners_count":24971604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","radix-ui","react","shadcn-ui","starter-kit","tailwindcss","tanstack-query","typescript","vite","vitest","zod"],"created_at":"2025-08-29T09:03:02.037Z","updated_at":"2025-08-29T09:03:03.335Z","avatar_url":"https://github.com/Kamahl19.png","language":"TypeScript","funding_links":[],"categories":["Boilerplates \u0026 Starters","TypeScript Starter/Boilerplate"],"sub_categories":["英文资源"],"readme":"# React Starter\n\n[![Main CI Status](https://github.com/Kamahl19/react-starter/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/Kamahl19/react-starter/actions?query=workflow:test+branch:main)\n\n## What's Included\n\n- [React](https://react.dev/) - library to build user interfaces\n- [Tailwind CSS](https://tailwindcss.com/docs) - utility-first CSS framework\n  - [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) - Tailwind plugin for creating animations\n  - [tailwind-merge](https://github.com/dcastil/tailwind-merge) - merge Tailwind classes without conflicts\n  - [clsx](https://github.com/lukeed/clsx) - utility to construct classNames conditionally\n  - [cva](https://github.com/joe-bell/cva) - utility to create style variants\n- [Radix UI](https://www.radix-ui.com/primitives) - low-level UI component library with a focus on a11y\n  - [shadcn/ui](https://ui.shadcn.com/) - collection of designed components mostly based on Radix UI with focus on a11y\n- [lucide icons](https://lucide.dev/) - icons set\n- [Postcss](https://github.com/postcss/postcss)\n  - [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) - supports nesting CSS, following the [CSS Nesting specification](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting)\n  - [autoprefixer](https://github.com/postcss/autoprefixer) - parse CSS and add vendor prefixes to rules by (caniuse.com)[https://caniuse.com/]\n- [Theme Provider](./src/app/providers/Theme.tsx) - supports Light, Dark and System themes\n- [TanStack Query](https://tanstack.com/query/) - asynchronous state management with declarative, always-up-to-date auto-managed queries and mutations\n- [Zod](https://github.com/colinhacks/zod) - TypeScript-first schema validation with static type inference\n- [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) based API client\n  - [zod-fetch](https://github.com/mattpocock/zod-fetch) - to make API client type-safe\n- [i18next](https://www.i18next.com/) - internationalization framework\n  - [i18next-browser-languagedetector](https://github.com/i18next/i18next-browser-languageDetector) - language detection plugin\n  - [i18next-parser](https://github.com/i18next/i18next-parser) - parses the code, extracts translation keys and produces i18n resource file\n- [Jotai](https://jotai.org/) - state management library\n- [React Router](https://reactrouter.com/) - declarative routing\n- [react-error-boundary](https://github.com/bvaughn/react-error-boundary) - simple reusable React error boundary component\n- [JWT](https://jwt.io/) Authentication - including all the common features such as Sign-up, Sign-in, Sign-out, Reset password, Email confirmation\n- [TypeScript](https://www.typescriptlang.org/) - typed superset of JavaScript\n  - [@tsconfig/bases](https://github.com/tsconfig/bases) - strictest \u0026 Vite-React\n  - [ts-reset](https://github.com/total-typescript/ts-reset) - a 'CSS reset' for TypeScript, improving types for common JavaScript API's\n- [Vite](https://vitejs.dev/) - next generation frontend tooling\n  - [React SWC plugin](https://github.com/vitejs/vite-plugin-react-swc) - speed up Vite dev server with SWC\n  - [SVG plugin](https://github.com/pd4d10/vite-plugin-svgr) - transform SVGs into React components\n  - [TypeScript \u0026 ESLint check plugin](https://vite-plugin-checker.netlify.app)\n  - [TSConfig paths plugin](https://github.com/aleclarson/vite-tsconfig-paths) - support for TypeScript's path mapping in Vite\n  - [Validate ENV vars plugin](https://github.com/Julien-R44/vite-plugin-validate-env)\n- [Vitest](https://vitest.dev/) - blazing fast Vite-native unit test framework\n  - [Testing Library](https://testing-library.com/) - simple and complete testing utilities that encourage good testing practices\n    - [user-event](https://testing-library.com/docs/user-event/intro/) - simulates user interactions\n    - [jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/) - provides [custom DOM element matchers](https://github.com/testing-library/jest-dom#custom-matchers)\n  - [jsdom-testing-mocks](https://github.com/trurl-master/jsdom-testing-mocks) - a set of tools for emulating browser behavior in jsdom environment\n  - [MSW](https://mswjs.io/) - API mocking library for browser and Node.js\n    - [@mswjs/data](https://github.com/mswjs/data) - data modeling and relation library for testing\n- [Prettier](https://prettier.io/) - opinionated code formatter\n  - [package.json plugin](https://github.com/matzkoh/prettier-plugin-packagejson) - to sort the keys of a `package.json` file\n  - [TW plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - to sort Tailwind classes\n- [ESLint](https://eslint.org/) - pluggable linting utility\n- [Husky](https://github.com/typicode/husky) \u0026 [lint-staged](https://github.com/okonet/lint-staged) - run ESLint \u0026 Prettier before commiting new code\n- [CI/CD](https://github.com/features/actions) - Github Actions to run integration tests on each PR \u0026 Main branch\n- [source-map-explorer](https://github.com/danvk/source-map-explorer) - analyze and debug space usage through source maps\n- [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) - visualize and analyze the production bundle\n\n### Built-in Authentication\n\nA token-based API agnostic authentication is already included in this project. It resides in [src/common/auth](./src/common/auth) and provides a `useAuth` hook. This hook returns current auth state (`token`, `userId`, `isLoggedIn`, and loading indicators), `signIn` method to perform a Sign-in operation, `relogin` method to renew the token, and `signOut` method to perform a Sign-out operation.\n\nIt also provides 2 guard components, [RequireIsLoggedIn](./src/common/auth/RequireIsLoggedIn.tsx) and [RequireIsAnonymous](./src/common/auth/RequireIsAnonymous.tsx), to [wrap routes](./src/app/App.tsx).\n\nInternally, all auth state is stored by Jotai in [src/common/auth/state.ts](./src/common/auth/state.ts). The JWT token is persisted in `localStorage`.\n\nThere is also a [src/app/PersistAuthGate.tsx](./src/app/PersistAuthGate.tsx) to automatically relogin a user after the page reloads if token is present in `localStorage`.\n\n## Installation\n\n- [Install nvm](https://github.com/nvm-sh/nvm) (Node version manager)\n- Install Node v20 and upgrade npm\n  ```bash\n  nvm install 20\n  nvm use 20\n  npm upgrade -g npm\n  ```\n- Clone this repository\n  ```bash\n  git clone https://github.com/Kamahl19/react-starter.git\n  ```\n- Install project dependencies\n  ```bash\n  npm i\n  ```\n- Edit the `.env` file\n\n## Usage\n\nStart the app locally\n\n```bash\nnpm start\n```\n\nVite will run web server in the development mode at `http://localhost:3000`.\n\nThis project includes [Mock Service Worker](https://mswjs.io/) to mock API. It starts automatically and provides API for authentication and user functionality.\n\n## Building for Production\n\nBuild the app for production\n\n```bash\nnpm run build\n```\n\nThe app is then ready to be deployed from the `/dist` folder. See the [Building for Production](https://vitejs.dev/guide/build.html#browser-compatibility) and [Deploying a Static Site](https://vitejs.dev/guide/static-deploy.html) for more information.\n\n## Deploying to Vercel\n\nRead more about [how to deploy to Vercel here](https://vercel.com/docs/getting-started-with-vercel). In short, these are the necessary steps:\n\n0. Confugiration file [vercel.json](./vercel.json) is already created in this project\n1. Create new Vercel Project\n2. Import GitHub repository\n3. Add environment variable `VITE_API_URL` with value `/api`\n4. Hit Deploy\n\nNow each commit pushed to the `main` branch will be deployed to production automatically. Each branch or Pull Request will be [deployed as preview](https://vercel.com/docs/deployments/preview-deployments).\n\n### Analysing \u0026 Visualizing production JS bundle\n\nThere are 2 different tools to analyze and visualize the production JS bundle:\n\n- source-map-explorer\n  ```bash\n  npm run analyze\n  ```\n- rollup-plugin-visualizer\n  ```bash\n  npm run visualize\n  ```\n\n## Testing\n\nLaunch the test runner in the interactive watch mode\n\n```bash\nnpm run test\n```\n\nVitest also provides a [neat UI](https://vitest.dev/guide/ui.html) to view and interact with the tests. Open it by running `npm run test:ui`.\n\nSee [Vitest docs](https://vitest.dev/) for more information.\n\n## Prettier\n\nThis project uses [Prettier](https://prettier.io/), an opinionated code formatter, to ensure that the whole codebase conforms to a consistent style.\n\nPrettier runs when:\n\n- developer manually executes `npm run format` command\n- in IDE on file-save if configured ([VSCode](https://github.com/prettier/prettier-vscode), [IntelliJ IDEA](https://prettier.io/docs/en/webstorm.html))\n- automatically on `pre-commit` hook, right before code is committed\n- during CI\n\n## ESLint\n\nProject comes with ESLint configured. It helps us prevent common errors.\n\nCode quality concerns, best practices, possible logical issues etc. are checked by [ESLint](https://eslint.org/docs/latest/user-guide/). Our custom ESLint configuration [.eslintrc.cjs](./.eslintrc.cjs) includes these rules and plugins:\n\nESLint runs when:\n\n- developer manually executes `npm run lint` command\n- developer starts Vite dev server by `npm start` command\n- in IDE on background if supported ([VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), [IntelliJ IDEA](https://www.jetbrains.com/help/webstorm/eslint.html))\n- automatically on `pre-commit` hook, right before code is committed\n  - defining actions ([.husky/pre-commit](./.husky/pre-commit)) for git hooks is enabled by [Husky](https://github.com/typicode/husky)\n  - linting only the files and changes being committed enables [lint-staged](https://github.com/lint-staged/lint-staged)\n- during continuous integration defined in [.github/workflows/test.yml](./.github/workflows/test.yml)\n\n## i18n\n\nRunning `npm run i18n` will first parse the whole codebase to find all used i18n keys. Then it inserts missing keys into the JSON files and removes deprecated keys which are not used in the codebase anymore. The result will be an alphabetically sorted JSONs containing all the currently used i18n keys in the codebase.\n\n## CI/CD\n\nThis project is using [GitHub's Actions](https://github.com/features/actions) to run [integration tests](.github/workflows/test.yml) on each PR and Main branch. It includes running eslint, prettier, tests and building the app. PR becomes mergable only if it passes. We also show badge on top of `README.md` to show Main branch status.\n\nThere is also a [code-quality action](.github/workflows/codeql-analysis.yml) to run [Github's CodeQL](https://codeql.github.com/) analysis.\n\nIf you don't use GitHub you can remove the `.github` folder, otherwise follow these steps to configure your GitHub repository:\n\n1. Go to Settings -\u003e Branches -\u003e Add rule\n   - Apply to your main branch\n   - Require status checks to pass before merging\n   - Select build checks being run in test.yml\n2. Update path to your repository (eg. `Kamahl19/react-starter`) and name of the branch for CI badge in `README.md`\n\n## Keeping up with updates\n\nOnce you start building your own app on top of React Starter you will probably want to keep up-to-date with the new updates of React Starter. This can be easily achieved using GitHub's compare feature. We suggest this process:\n\n1. When you clone the React Starter repo, don't forget to write down the hash of [latest main's commit](https://github.com/Kamahl19/react-starter/commits/main)\n2. Every once in a while, compare the version of React Starter you used with the current version of React Starter like this `https://github.com/Kamahl19/react-starter/compare/{YOUR_LATEST_REACT_STARTER_COMMIT_HASH}...main`\n3. Go through the diff and apply the changes in your own app\n4. Commit these changes into your own repo with this commit message: `Updating to React Starter hash: {LATEST_REACT_STARTER_COMMIT_HASH}`. This way you always keep the hash of the React Starter's version you currently use in your app\n\n## License\n\nThis is open source software [licensed as MIT](https://github.com/Kamahl19/react-starter/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKamahl19%2Freact-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKamahl19%2Freact-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKamahl19%2Freact-starter/lists"}