{"id":18275977,"url":"https://github.com/tim-w-james/react-ts-template","last_synced_at":"2025-04-05T03:31:16.688Z","repository":{"id":40335655,"uuid":"489605968","full_name":"Tim-W-James/react-ts-template","owner":"Tim-W-James","description":"Opinionated template for frontend React TypeScript projects with Vite, ESLint, Prettier, Vitetest, and more. Includes a README template","archived":true,"fork":false,"pushed_at":"2023-09-18T22:27:36.000Z","size":1015,"stargazers_count":2,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T22:16:58.658Z","etag":null,"topics":["biolerplate","eslint","frontend","github-actions","hmr","husky","node","npm","pnpm","prettier","react","renovate","starter","storybook","stylelint","template","typescript","vite","vitest"],"latest_commit_sha":null,"homepage":"","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/Tim-W-James.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-07T07:44:07.000Z","updated_at":"2023-10-17T16:04:34.000Z","dependencies_parsed_at":"2023-02-14T17:01:16.640Z","dependency_job_id":null,"html_url":"https://github.com/Tim-W-James/react-ts-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":"Tim-W-James/frontend-ts-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tim-W-James%2Freact-ts-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tim-W-James%2Freact-ts-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tim-W-James%2Freact-ts-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tim-W-James%2Freact-ts-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tim-W-James","download_url":"https://codeload.github.com/Tim-W-James/react-ts-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284911,"owners_count":20913691,"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","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":["biolerplate","eslint","frontend","github-actions","hmr","husky","node","npm","pnpm","prettier","react","renovate","starter","storybook","stylelint","template","typescript","vite","vitest"],"created_at":"2024-11-05T12:14:37.602Z","updated_at":"2025-04-05T03:31:11.669Z","avatar_url":"https://github.com/Tim-W-James.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React TS Template\n\nOpinionated template for frontend React TypeScript projects with Vite, ESLint,\nPrettier, Vitetest, and more packages. This template aims to speed up the\ninitial configuration and boilerplate for new projects, while providing\nintegration with a range of modern tooling. This repo also includes a React\nstarter app using Bootstrap Components and React Router 6.\n\n### Template includes:\n\n- [![React 17](https://img.shields.io/badge/-React%2017-black?style=flat-square\u0026logo=react)](https://reactjs.org/docs/getting-started.html): frontend framework\n- [![Vite](https://img.shields.io/badge/-Vite-black?style=flat-square\u0026logo=vite)](https://vitejs.dev/config/): frontend build tool and dev server, configured in [`./vite.config.ts`](./vite.config.ts)\n- [![TypeScript 4.7](https://img.shields.io/badge/-TypeScript-black?style=flat-square\u0026logo=typescript)](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html): types for js. Configured in [`./tsconfig.json`](./tsconfig.json)\n- [![SASS](https://img.shields.io/badge/-SASS-black?style=flat-square\u0026logo=sass)](https://sass-lang.com/): CSS preprocessor\n- [![ESLint](https://img.shields.io/badge/-ESLint-black?style=flat-square\u0026logo=eslint)](https://eslint.org/docs/2.0.0/user-guide/configuring): Linter/code analyzer for TypeScript. Configured in [`./.eslintrc.cjs`](./.eslintrc.cjs) with rules from AirBnB and SonarJS\n- [![Stylelint](https://img.shields.io/badge/-Stylelint-black?style=flat-square\u0026logo=stylelint)](https://stylelint.io/): Linter/code analyzer for SCSS. Configured in [`./.stylelintrc.cjs`](./.stylelintrc.cjs)\n- [![Prettier](https://img.shields.io/badge/-Prettier-black?style=flat-square\u0026logo=prettier)](https://prettier.io/docs/en/configuration.html): Formatter. Configured in [`./.prettierrc.cjs`](./.prettierrc.cjs)\n- [![Vitest](https://img.shields.io/badge/-Vitest-black?style=flat-square\u0026logo=vite)](https://vitest.dev/config/): unit testing framework. Configured in [`./vite.config.ts` \u003e `test`](./vite.config.ts#L52)\n- [![Storybook](https://img.shields.io/badge/-Storybook-black?style=flat-square\u0026logo=storybook)](https://storybook.js.org/): view, document and test individual components and pages. Configured in [`./.storybook/main.cjs`](./.storybook/main.cjs)\n- [![unplugin-auto-import](https://img.shields.io/badge/-Unplugin%20Auto%20Import-black?style=flat-square\u0026logo=vite)](https://github.com/antfu/unplugin-auto-import#configuration): global imports. Configured in [`./vite.config.ts` \u003e `Plugins` \u003e `AutoImport`](https://github.com/Tim-W-James/react-ts-template/blob/main/vite.config.ts#L19)\n- [![pnpm](https://img.shields.io/badge/-pnpm-black?style=flat-square\u0026logo=pnpm)](https://pnpm.io/): configuration for the `pnpm` package manager for better performance, lockfiles and monorepo support. See steps \u003ca href=\"#todo\"\u003ebelow\u003c/a\u003e if you wish to use a different package manager.\n- [![npm](https://img.shields.io/badge/-npm-black?style=flat-square\u0026logo=nodedotjs)](https://www.npmjs.com/) scripts - run with `pnpm run \u003cscript\u003e`:\n  - `dev` - starts a dev environment on localhost with Hot Module Reloading (automatically updates when source code changes)\n  - `dev:https` - starts a dev environment on localhost over https (requires [local development certificates to be generated](https://github.com/FiloSottile/mkcert), or use [vite-plugin-basic-ssl](https://github.com/vitejs/vite-plugin-basic-ssl) to auto generate certs)\n  - `build` - compile production source code to [`./dist`](./dist)\n  - `preview` - after build, preview on localhost\n  - `lint` - evaluate ESLint rules against source code\n  - `format` - format source code with prettier and try to fix any ESLint errors\n  - `test:run` - run tests using [Vitest](https://vitest.dev/config/)\n  - `test:ui` - run tests and display a UI on localhost\n  - `test` - run unit tests in watch mode (automatically reruns tests when source code changes)\n  - `coverage` - run coverage tests and output results to [`./coverage`](./coverage)\n  - `storybook` - launch [Storybook](https://storybook.js.org/) to view, document and test components and pages\n- [![Husky](https://img.shields.io/badge/-Husky-black?style=flat-square\u0026logo=git)](https://github.com/typicode/husky): pre-commit Git hooks to lint, format and run tests. Configured in [`./.husky`](./.husky)\n- [![Renovate](https://img.shields.io/badge/-Renovate-black?style=flat-square\u0026logo=renovatebot)](https://github.com/marketplace/renovate): GitHub bot for automatic dependency updates. Configured in [`./renovate.json`](./renovate.json)\n- [![GitHub Actions](https://img.shields.io/badge/-GitHub%20Actions-black?style=flat-square\u0026logo=githubactions)](https://docs.github.com/en/actions): GitHub CI/CD pipeline. Configured in [`./.github/workflows`](./.github/workflows)\n- Starter React app with [![Bootstrap 5](https://img.shields.io/badge/-Bootstrap%205-black?style=flat-square\u0026logo=bootstrap)](https://react-bootstrap.github.io/getting-started/introduction/) and [![React Router 6](https://img.shields.io/badge/-React%20Router%206-black?style=flat-square\u0026logo=reactrouter)](https://reactrouter.com/docs/en/v6/getting-started/overview)\n- See the \u003ca href=\"#project-structure\"\u003eProject Structure\u003c/a\u003e\n\nComplete the configuration checklist below and remove from the README once complete.\n\n## TODO\n\n- [ ] If using VSCode, install recommended extensions with the command pallet: `Extensions:Show Recommended Extensions`. Otherwise, use install an[`EditorConfig`](https://editorconfig.org/#download) plugin for your text editor or IDE of choice\n- [ ] Specify the following fields with a search and replace:\n      repo_name, project_title, project_description, project_keywords\n- [ ] Replace personal information with your own:\n      Tim-W-James, Tim James, tim.jameswork9800@gmail.com, https://linkedin.com/in/timothy-william-james/, https://timjames.dev\n- [ ] Specify the [`LICENSE.txt`](LICENSE.txt) for the project and set [`./package.json` \u003e `license`](./package.json#L10)\n- [ ] [`README.md`](README.md) - there is a README template [below](#top) based on the [Best-README-Template](https://github.com/othneildrew/Best-README-Template). Find a list of resources to help you write READMEs in a comment at the end of this file. Fill out the following:\n  - [ ] Fill out each section of the README as needed, uncommenting/removing sections as needed.\n  - [ ] Add images for the following:\n        [`./public/assets/images/logo.png`](./public/assets/images/logo.png), [`./public/assets/images/screenshot.png`](./public/assets/images/screenshot.png)\n        \u003c!-- ! Use ESM, this is only included for reference --\u003e\n        \u003c!-- ! If you need to use CJS, see: https://www.typescriptlang.org/docs/handbook/esm-node.html --\u003e\n      \u003c!-- - [ ] Set the environment of the project: --\u003e\n    \u003c!-- - ES Modules (import, export): --\u003e\n      \u003c!-- - Add to `package.json`: `\"type\": \"module\"` --\u003e\n      \u003c!-- - Add to `tsconfig.json`:\n        - `\"module\": \"ES6\"`\n        - `\"moduleResolution\" : \"node`\n        - `\"lib\": [\"ES6\", \"DOM\"]` --\u003e\n      \u003c!-- - Add to `.eslintrc.cjs`: `\"parserOptions\": { \"sourceType\": \"module\" }` --\u003e\n    \u003c!-- - Node CommonJS (require, exports): --\u003e\n      \u003c!-- - Add to `package.json`: `\"type\": \"commonjs\"` --\u003e\n      \u003c!-- - Add to `tsconfig.json`: `\"module\": \"commonjs\"` --\u003e\n      \u003c!-- - Add to `.eslintrc.cjs`: `\"parserOptions\": { \"sourceType\": \"script\" }` --\u003e\n- [ ] Set the target ES version (ES6 - supported by most browsers, ESNext - latest):\n  - [`./.eslint.cjs`](./.eslint.cjs):\n    - `\"\u003ctarget\u003e\": true`\n    - `\"ecmaVersion\": \u003ctarget\u003e`\n  - [`./tsconfig.json`](./tsconfig.json):\n    - `\"target\": \"\u003ctarget\u003e\"`\n    - `\"module\": \"\u003ctarget\u003e\"`\n    - `\"lib\": [\"\u003ctarget\u003e\", \"DOM\"]`\n  - Append `--target \u003ctarget\u003e` to the `build` script in [`./package.json`](./package.json#L36) or specify the target in [`./vite.config.ts` \u003e `build` \u003e `target`](./vite.config.ts#L48)\n- [ ] Specify formatting and editor configuration in [`./.editorconfig`](./.editorconfig). Use the [`./.prettierrc.cjs`](./.prettierrc.cjs) for js specific rules that are not defined in [`./.editorconfig`](./.editorconfig)\n- [ ] Add any [global imports](https://github.com/antfu/unplugin-auto-import#configuration) to [`./vite.config.ts` \u003e `Plugins` \u003e `AutoImport`](https://github.com/Tim-W-James/react-ts-template/blob/main/vite.config.ts#L19). You may also need to update the Vite configuration used in [`./.storybook/main.cjs`](./.storybook/main.cjs)\n- [ ] Specify node version in the [`./.nvmrc`](./.nvmrc) and [`./package.json` \u003e `engines` \u003e `node`](./package.json#L24)\n- [ ] This repo is configured for the `pnpm` package manager. If you wish to change this to [`yarn`](https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable) or `npm`, configure the following:\n  - Modify [`./package.json` \u003e `engines`](./package.json#L25) and [`./package.json` \u003e `packageManager`](./package.json#L27) to refer to the version of the package manager you are using\n  - Modify the GitHub actions in [`./.github/workflows`](./.github/workflows) to install your package manager (if using something other than `npm`), use it in pipeline steps, and cache\n  - Modify any scripts that call `pnpm` in [`./package.json` \u003e `scripts`](./package.json#L30)\n  - Modify any Git hooks that call `pnpm` in [`./.husky/pre-commit`](./.husky/pre-commit)\n  - Update the README instructions accordingly\n  - Remove the old lockfile and regenerate it if needed:\n    - `pnpm`: `pnpm i --lockfile-only`\n    - `yarn`: `yarn install --mode update-lockfile`\n    - `npm`: `npm install --package-lock-only`\n  - NOT RECOMMENDED: If you don't want to commit your lockfile, add it to the [`./.gitignore`](./.gitignore) and change the GitHub Action step \"Install Dependencies\" (for `npm`, change `npm ci` to `npm i`).\n- [ ] Install dependencies with your package manager of choice:\n  - `pnpm`: `pnpm i`\n  - `yarn`: `yarn`\n  - `npm`: `npm ci` (lockfile) or `npm i` (no lockfile)\n- [ ] Install Git hooks if needed (this should happen automatically when dependencies are installed): `husky install`\n- [ ] Add continuous deployment workflow to [`./.github/workflows`](./.github/workflows) as needed\n- [ ] Install the [Renovate](https://github.com/marketplace/renovate) bot on GitHub for automatic dependency updates\n- [ ] Finally, remove/modify the sample code:\n  - [`./src/example-component.tsx`](./src/example-component.tsx) and [`./src/example-component.test.tsx`](./src/example-component.test.tsx) (example for using Vitest and snapshots)\n  - [`./src/stories`](./src/stories) (example Storybook)\n  - [`./public/assets`](./public/assets)\n  - Anything else you don't need in [`./src`](./src)\n  - And any dependencies you don't need such as `react-bootstrap` or `react-icons`\n\n↑ Remove everything above once setup is complete. ↑\n\n\u003c!-- ! If you can read this comment, please preview this file with a markdown renderer --\u003e\n\n\u003c!--\n*** README forked from the Best-README-Template: https://github.com/othneildrew/Best-README-Template\n*** Forked by Tim James: https://github.com/Tim-W-James/README-Template\n***\n*** See the TODO lists for project setup.\n*** Find a list of resources for writing markdown, etc. at the end of this file.\n--\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Tim-W-James/repo_name\"\u003e\n    \u003c!-- \u003cimg src=\"public/assets/images/logo.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e --\u003e\n  \u003c/a\u003e\n\n  \u003ch2 align=\"center\" id=\"top\"\u003eproject_title\u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n    project_description\n    \u003cbr /\u003e\n\u003c!--     \u003ca href=\"https://github.com/Tim-W-James/repo_name\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e --\u003e\n\u003c!--     \u003ca href=\"https://github.com/Tim-W-James/repo_name\"\u003eView Demo\u003c/a\u003e --\u003e\n\u003c!--     ·\n    \u003ca href=\"https://github.com/Tim-W-James/repo_name/issues\"\u003eReport Bug\u003c/a\u003e --\u003e\n\u003c!--     ·\n    \u003ca href=\"https://github.com/Tim-W-James/repo_name/issues\"\u003eRequest Feature\u003c/a\u003e --\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!-- Shields: https://shields.io --\u003e\n\u003c!-- Icons: https://github.com/simple-icons/simple-icons/blob/develop/slugs.md --\u003e\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003c!-- GitHub Actions Shield --\u003e\n  \u003ca href=\"https://github.com/Tim-W-James/repo_name/actions\"\u003e\u003cimg src=\"https://img.shields.io/github/workflow/status/Tim-W-James/repo_name/CI?style=for-the-badge\u0026logo=githubactions\u0026logoColor=white\" alt=\"CI\"\u003e\u003c/a\u003e\n  \u003c!-- Last Commit Shield --\u003e\n  \u003ca href=\"https://github.com/Tim-W-James/repo_name/commits/main\"\u003e\u003cimg src=\"https://img.shields.io/github/last-commit/Tim-W-James/repo_name.svg?style=for-the-badge\u0026logo=git\u0026logoColor=white\" alt=\"Commit\"\u003e\u003c/a\u003e\n  \u003c!-- Renovate Shield --\u003e\n  \u003ca href=\"https://github.com/Tim-W-James/repo_name/issues/2\"\u003e\u003cimg src=\"https://img.shields.io/badge/-Renovate-black.svg?style=for-the-badge\u0026logo=renovatebot\u0026colorB=555\" alt=\"Renovate\"\u003e\u003c/a\u003e\n  \u003c!-- Release Shield --\u003e\n  \u003c!-- \u003ca href=\"https://github.com/Tim-W-James/repo_name/releases\"\u003e\u003cimg src=\"https://img.shields.io/github/v/release/Tim-W-James/repo_name.svg?include_prereleases\u0026style=for-the-badge\" alt=\"Release\"\u003e\u003c/a\u003e --\u003e\n  \u003c!-- Contributors Shield --\u003e\n  \u003c!-- \u003ca href=\"https://github.com/Tim-W-James/repo_name/graphs/contributors\"\u003e\u003cimg src=\"https://img.shields.io/github/contributors/Tim-W-James/repo_name.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\" alt=\"Contributors\"\u003e\u003c/a\u003e --\u003e\n  \u003c!-- Forks Shield --\u003e\n  \u003c!-- \u003ca href=\"https://github.com/Tim-W-James/repo_name/network/members\"\u003e\u003cimg src=\"https://img.shields.io/github/forks/Tim-W-James/repo_name.svg?style=for-the-badge\" alt=\"Forks\"\u003e\u003c/a\u003e --\u003e\n  \u003c!-- Stars Shield --\u003e\n  \u003c!-- \u003ca href=\"https://github.com/Tim-W-James/repo_name/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/Tim-W-James/repo_name.svg?style=for-the-badge\" alt=\"Stars\"\u003e\u003c/a\u003e --\u003e\n  \u003c!-- Issues Shield --\u003e\n  \u003c!-- \u003ca href=\"https://github.com/Tim-W-James/repo_name/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/Tim-W-James/repo_name.svg?style=for-the-badge\" alt=\"Issues\"\u003e\u003c/a\u003e --\u003e\n  \u003c!-- License Shield --\u003e\n  \u003c!-- \u003ca href=\"https://github.com/Tim-W-James/repo_name/blob/main/LICENSE.txt\"\u003e\u003cimg src=\"https://img.shields.io/github/license/Tim-W-James/repo_name.svg?style=for-the-badge\" alt=\"License\"\u003e\u003c/a\u003e --\u003e\n  \u003c!-- Linkedin Shield --\u003e\n  \u003c!-- \u003ca href=\"https://linkedin.com/in/timothy-william-james/\"\u003e\u003cimg src=\"https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\" alt=\"Linkedin\"\u003e\u003c/a\u003e --\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails open=\"open\"\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#goals\"\u003eGoals\u003c/a\u003e\u003c/li\u003e\n        \u003c!-- \u003cli\u003e\u003ca href=\"#roadmap\"\u003eGoals\u003c/a\u003e\u003c/li\u003e --\u003e\n        \u003c!-- \u003cli\u003e\u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\u003c/li\u003e --\u003e\n        \u003c!-- \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e --\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n        \u003cul\u003e\n          \u003c!-- \u003cli\u003e\u003ca href=\"#example-usecases\"\u003eExample Usecases\u003c/a\u003e\u003c/li\u003e --\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#development\"\u003eDevelopment\u003c/a\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#testing\"\u003eTesting\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#code-style\"\u003eCode Style\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#project-structure\"\u003eProject Structure\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#documentation\"\u003eDocumentation\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003c!-- \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e --\u003e\n    \u003c!-- \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e --\u003e\n    \u003c!-- \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e --\u003e\n    \u003c!-- \u003cli\u003e\u003ca href=\"#acknowledgements\"\u003eAcknowledgements\u003c/a\u003e\u003c/li\u003e --\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\n\u003c!-- [![repo_name Screen Shot][product-screenshot]](https://example.com) --\u003e\n\nAbout text.\n\n### Goals\n\n- Stuff to do\n\n\u003c!-- ### Roadmap\n\nSee the [open issues](https://github.com/Tim-W-James/repo_name/issues) for a list of proposed features (and known issues). --\u003e\n\n\u003c!-- ### Features\n\n* --\u003e\n\n\u003c!-- ### Built With\n\n* []() --\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\n### Prerequisites\n\n- Install [`node`](https://nodejs.org/en/) for the version in `.nvmrc` or use [`nvm`](https://github.com/nvm-sh/nvm):\n\n  ```sh\n  nvm install \u0026\u0026 nvm use\n  ```\n\n- Install the [`pnpm`](https://pnpm.io/installation) package manager. Use [`corepack`](https://nodejs.org/api/corepack.html) for automatic installation, which is an experimental `node` feature that must be enabled using:\n\n  ```sh\n  corepack enable\n  ```\n\n### Installation\n\n- Clone the repo:\n\n  ```sh\n  git clone https://github.com/Tim-W-James/repo_name.git\n  ```\n\n- Install dependencies with [`pnpm`](https://pnpm.io/installation):\n\n  ```sh\n  pnpm i\n  ```\n\n\u003c!-- USAGE --\u003e\n\n## Usage\n\n- Build to [`./dist`](./dist) and preview:\n\n  ```sh\n  pnpm build\n  pnpm preview\n  ```\n\n\u003c!-- ### Example Usecases\n\nUse this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.\n\n_For more examples, please refer to the [Documentation](https://example.com)_ --\u003e\n\n\u003c!-- DEVELOPMENT --\u003e\n\n## Development\n\n- Ensure you have Git Hooks enabled (should run automatically after `pnpm i`):\n\n  ```sh\n  npx husky install\n  ```\n\n- Start a development environment:\n\n  ```sh\n  pnpm dev\n  ```\n\n### Testing\n\n- Run unit tests in watch mode (automatically reruns tests when source code changes):\n\n  ```sh\n  pnpm test\n  ```\n\n- Run coverage tests and output results to [`./coverage`](./coverage):\n\n  ```sh\n  pnpm coverage\n  ```\n\n- View and test individual components or pages:\n\n  ```sh\n  pnpm storybook\n  ```\n\n### Code Style\n\n- Evaluate ESLint ([`./.eslintrc.cjs`](./.eslintrc.cjs)) and StyleLint ([`./.stylelintrc.cjs`](./.stylelintrc.cjs)) rules against source code:\n\n  ```sh\n  pnpm lint\n  ```\n\n- Format source code with prettier ([`./.prettierrc.cjs`](./.prettierrc.cjs)) and try to fix any ESLint ([`./.eslintrc.cjs`](./.eslintrc.cjs)) or StyleLint ([`./.stylelintrc.cjs`](./.stylelintrc.cjs)) errors:\n\n  ```sh\n  pnpm format\n  ```\n\n### Project Structure\n\n- **Source Code**: [`./src`](./src)\n  - Entry point and routes: [`./src/index.tsx`](./src/index.tsx)\n  - Root component: [`./src/App.tsx`](./src/App.tsx)\n  - Common components: [`./src/components`](./src/components). Has alias `@components`. Group by type for `layout`, `buttons`, `forms`, etc.\n  - Common hooks: [`./src/hooks`](./src/hooks). Has alias `@hooks`\n  - Common utils: [`./src/utils`](./src/utils). Has alias `@utils`\n  - Pages: [`./src/pages`](./src/pages). Has alias `@pages`. Nest subfolders for `components`, `utils`, `hooks`, etc. depending on the scope they apply to\n  - React context: [`./src/context`](./src/context). Has alias `@context`\n- **Unit Tests**: place `tests` adjacent to source code\n- **Storybook Stories**: place `stories` adjacent to source code\n- **SCSS Styling**:\n  - Use [`index.scss`](./src/index.scss) for globals\n  - Place page or component specific styles adjacent to source code, using scoped `.modules`\n- **Global TypeScript Types**: [`./types`](./types)\n- **Web Accessible Files** (`robots.txt`, `manifest.json`, etc.): [`./public`](./public)\n- **Site Assets** (`favicon.svg`, images, etc.): [`./public/assets`](./public/assets). Has alias `@assets`\n\nDefine path alias in [`./tsconfig.paths.json`](./tsconfig.paths.json).\n\nI recommend using [VSCode file nesting](https://code.visualstudio.com/updates/v1_64#_explorer-file-nesting) for a [cleaner file tree](https://github.com/antfu/vscode-file-nesting-config).\n\n### Documentation\n\n- Document code with [JSDoc](https://jsdoc.app/about-getting-started.html)\n- Document components or pages with [Storybook](https://storybook.js.org/) and run with:\n\n  ```sh\n  pnpm storybook\n  ```\n\n\u003c!-- CONTRIBUTING --\u003e\n\u003c!-- ## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a [Pull Request](https://github.com/Tim-W-James/repo_name/pulls) --\u003e\n\n\u003c!-- LICENSE --\u003e\n\u003c!-- https://choosealicense.com --\u003e\n\u003c!-- ## License\n\nDistributed under the MIT License. See [`LICENSE.txt`](./LICENSE.txt) for more information. --\u003e\n\n\u003c!-- CONTACT --\u003e\n\u003c!-- ## Contact\n\nEmail: [tim.jameswork9800@gmail.com](mailto:tim.jameswork9800@gmail.com \"tim.jameswork9800@gmail.com\")\n\nProject Link: [https://github.com/Tim-W-James/repo_name](https://github.com/Tim-W-James/repo_name) --\u003e\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\u003c!-- ## Acknowledgements\n\n* []()\n* []()\n* []() --\u003e\n\n\u003ca href=\"#top\"\u003e↑ Back to Top ↑\u003c/a\u003e\n\n\u003c!-- MARKDOWN IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[product-screenshot]: public/assets/images/screenshot.png\n\n\u003c!-- USEFUL LINKS FOR MARKDOWN\n* https://github.com/Tim-W-James/blog/blob/master/Markdow-Cheatsheet.md\n* https://www.markdownguide.org/basic-syntax\n* https://www.webpagefx.com/tools/emoji-cheat-sheet\n* https://shields.io\n* https://github.com/simple-icons/simple-icons/blob/develop/slugs.md\n* https://choosealicense.com\n* https://pages.github.com\n* https://daneden.github.io/animate.css\n* https://connoratherton.com/loaders\n* https://kenwheeler.github.io/slick\n* https://github.com/cferdinandi/smooth-scroll\n* http://leafo.net/sticky-kit\n* http://jvectormap.com\n* https://fontawesome.com --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-w-james%2Freact-ts-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftim-w-james%2Freact-ts-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-w-james%2Freact-ts-template/lists"}