{"id":15561143,"url":"https://github.com/alexandr-g/cra-template-typescript-redux","last_synced_at":"2025-04-04T16:17:26.749Z","repository":{"id":38173016,"uuid":"233948002","full_name":"alexandr-g/cra-template-typescript-redux","owner":"alexandr-g","description":"Unofficial Create React App template with Redux, TypeScript, React Router, React Testing Library and custom ESlint config","archived":false,"fork":false,"pushed_at":"2025-03-11T23:48:46.000Z","size":5768,"stargazers_count":92,"open_issues_count":13,"forks_count":22,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T15:08:46.156Z","etag":null,"topics":["boilerplate","cra-template","create-react-app","create-react-app-typescript","create-react-app-v2","eslint","react","react-components","react-redux","react-redux-demo","react-router-v6","react-testing-library","react-v18","redux","redux-configuration","starter-kit","starter-template","template","typescript"],"latest_commit_sha":null,"homepage":"https://cra-template-typescript-redux.now.sh","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/alexandr-g.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2020-01-14T22:25:23.000Z","updated_at":"2025-03-06T17:56:20.000Z","dependencies_parsed_at":"2023-02-18T14:00:48.847Z","dependency_job_id":"6cee0815-b061-452f-92d5-88d1e64a43a0","html_url":"https://github.com/alexandr-g/cra-template-typescript-redux","commit_stats":{"total_commits":451,"total_committers":5,"mean_commits":90.2,"dds":0.5875831485587584,"last_synced_commit":"503cf4771eeac02a17785b2d584b8c8b457ed4ea"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandr-g%2Fcra-template-typescript-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandr-g%2Fcra-template-typescript-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandr-g%2Fcra-template-typescript-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandr-g%2Fcra-template-typescript-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandr-g","download_url":"https://codeload.github.com/alexandr-g/cra-template-typescript-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208190,"owners_count":20901570,"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":["boilerplate","cra-template","create-react-app","create-react-app-typescript","create-react-app-v2","eslint","react","react-components","react-redux","react-redux-demo","react-router-v6","react-testing-library","react-v18","redux","redux-configuration","starter-kit","starter-template","template","typescript"],"created_at":"2024-10-02T16:05:44.486Z","updated_at":"2025-04-04T16:17:26.727Z","avatar_url":"https://github.com/alexandr-g.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/cra-template-typescript-redux.svg)](https://badge.fury.io/js/cra-template-typescript-redux)\n[![Action status](https://github.com/alexandr-g/cra-template-typescript-redux/workflows/CI/badge.svg?branch=master)](https://github.com/alexandr-g/cra-template-typescript-redux/actions)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n![npm downloads](https://img.shields.io/npm/dm/cra-template-typescript-redux)\n\n# A quick start Redux + TypeScript Create React App template\n\nAn opinionated quick start [Create React App](https://github.com/facebook/create-react-app) (CRA) _template_ with configured **Redux**, **TypeScript**, **React Router**, **React Testing Library** and custom **ESlint** configuration.\n\nOriginal Create React App README available [here](./README_CRA.md)\n\n## Usage\n\n```bash\nnpx create-react-app your-project-name --template typescript-redux\n```\n\nOr\n\n```bash\nyarn create react-app your-project-name --template typescript-redux\n```\n\n`npx` command installs the most recent stable version of CRA from npm.\n\n`--template` parameter points to this template, note that `cra-template-` prefix is omitted.\n\n## Motivation\n\nYou know the pain. You start a new project from scratch and need to configure it again and again. It needs routing, ok you setup Router, then you need Redux - ok, oh 😩 Redux boilerplate is taking so much time to type. Wait... what if you could have all the tools you want just from the beginning? I want to focus on building amazing projects and not spending hours configuring. That's why I've created this template. It's here for you to use.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n- `yarn start` - runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n- `yarn test` - launches the test runner in the interactive watch mode.\n\n- `yarn build` - builds the app for production to the `build` folder.\n\n- `yarn eject` - exposes content of `react-script` package\n\n- `yarn lint` - lints project files according to eslint rules, see below. Typical use case: continuous integration environments, Travis, CircleCI, etc.\n\n- `yarn fix` - same as `yarn lint`, but also fixes errors, when possible. Typical use case: local development environment, git hooks.\n\nDue to CRA template limitations (we can change only `scripts` and `dependencies` inside generated `package.json`) all configuration is done by adding config files where possible. Also no `devDependencies` for now, sorry.\n\n## Redux configuration\n\nThe template provides basic Redux configuration with [feature based](https://redux.js.org/style-guide/style-guide/#structure-files-as-feature-folders-or-ducks) folder structure. You can use [Redux devtools browser extension](http://extension.remotedev.io/). Sample feature included in `src/features` folder, note technology agnostic `features` folder name. Based on Redux maintainers recommendation.\n\n## Testing\n\nTesting is done with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).\n\n## [Prettier](https://prettier.io/)\n\nI added `prettier` to force consistent formatting. Don't like trailing semicolons? Feel free to [tweak prettier rules](https://prettier.io/docs/en/configuration.html) inside `.prettierrc` file to match your code style.\n\n## Styles/CSS/Styling\n\nJust for the styling purpose of the example app, I used [Materialize](https://materializecss.com/). The template is shipped with the Materialize by default. I want to make sure that this template is style agnostic so you can plugin any CSS-in-JS or whatever library/framework you want to use for styles on your own.\n\n### How to remove materialize\n\nIn order to remove Materialize [MaterializeCSS](https://materializecss.com/) navigate to the `public` folder, open `index.html` and remove following CDN link in the `\u003chead\u003e` lines 18-22:\n\n```html\n\u003c!--Import materialize.css--\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css\"\n/\u003e\n```\n\nRemove or adjust all the `classNames` related to the Materialize and feel free to use your own styling.\n\n## Eslint configurations\n\nThe template extends CRA ESLint rules with a custom set, tailored for the reasonable and clean development process.\n\nEslint rules are commented for your convenience feel free to tweak or remove them inside `.eslintrc`. No judgment.\n\n## Testing template locally\n\nTo test the output of your template locally run\n\n```bash\nnpx create-react-app my-app --template file:./cra-template-typescript-redux\n```\n\n## How to create custom Create React App (CRA) templates\n\nI created a step by step guide on how to create your own templates.\n\n[View on Medium](https://medium.com/@alexgrischuk/how-to-create-custom-create-react-app-cra-templates-73a5196edeb)\n\n[View on personal blog](https://grischuk.de/posts/how-to-create-custom-create-react-app-templates)\n\n[View on dev.to](https://dev.to/alexandrg/how-to-create-custom-create-react-app-cra-templates-3nca)\n\n## Thank you\n\nI hope this template will be helpful for you and you will love using it 🖤\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandr-g%2Fcra-template-typescript-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandr-g%2Fcra-template-typescript-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandr-g%2Fcra-template-typescript-redux/lists"}