{"id":17040657,"url":"https://github.com/minsoo-web/react-boilerplate","last_synced_at":"2026-04-13T06:42:49.782Z","repository":{"id":105915710,"uuid":"452116745","full_name":"minsoo-web/react-boilerplate","owner":"minsoo-web","description":"typesciprt, react-router (v6), redux-toolkit, storybook, craco, styled-components 를 이용한 셋업 환경입니다.","archived":false,"fork":false,"pushed_at":"2022-01-27T09:14:10.000Z","size":22697,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-22T16:59:45.138Z","etag":null,"topics":["boilerplate","craco","react","react-router-v6","redux","reduxtoolkit","storybook","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minsoo-web.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-01-26T02:38:30.000Z","updated_at":"2022-01-26T11:37:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"0db81e85-4406-4795-8ff0-d881a474b094","html_url":"https://github.com/minsoo-web/react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/minsoo-web/react-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsoo-web%2Freact-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsoo-web%2Freact-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsoo-web%2Freact-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsoo-web%2Freact-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minsoo-web","download_url":"https://codeload.github.com/minsoo-web/react-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsoo-web%2Freact-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31742941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T06:26:45.479Z","status":"ssl_error","status_checked_at":"2026-04-13T06:26:44.645Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","craco","react","react-router-v6","redux","reduxtoolkit","storybook","styled-components","typescript"],"created_at":"2024-10-14T09:10:09.701Z","updated_at":"2026-04-13T06:42:49.749Z","avatar_url":"https://github.com/minsoo-web.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Boilerplate\n\n![banner](https://user-images.githubusercontent.com/57122180/151328244-a75b7be4-467b-4261-9f4d-d6d15ffaa655.png)\n\n## 🤔 What is it ?\n\nThis Boilerplate is includes many config setup for useful developing React web project.  \nIncluded package and setup is like below.\n\n- typescript\n- react-router (v6)\n- styled-components\n- storybook\n- testing-library/react\n- axios / http-proxy-middleware (proxy config)\n- redux (reduxjs/toolkit)\n- craco (path alias)\n\n🙇‍♂️ _I hope you like this folder structure and useful this boilerplate for saving time project init setup_\n\n## 🗂 Folder Structure\n\n```txt\n./src\n├── @types\n│   └── index.d.ts\n├── App.tsx\n├── assets\n│   ├── fonts\n│   ├── images\n│   ├── styles\n│   └── svgs\n├── components\n│   ├── Auth            # example folders\n│   └── Common\n│       └── MButton\n│            ├── MButton.stories.tsx    # storybook\n│            ├── MButton.style.ts       # styled-components\n│            ├── MButton.test.tsx       # test file\n│            ├── MButton.tsx            # tsx file\n│            ├── MButton.type.ts        # (if needed) type defefine\n│            └── index.ts\n├── constants\n│   ├── Colors.ts\n│   └── Fonts.ts\n├── hooks\n│   ├── index.ts\n│   └── useSomeHook.tsx # example file\n├── index.tsx\n├── reportWebVitals.ts\n├── router\n│   ├── RootRouter.tsx\n│   └── index.ts\n├── screens\n│   ├── Auth\n│   ├── Home\n│   └── index.ts\n├── setupProxy.js\n├── setupTests.ts\n├── store\n│   ├── ducks\n│   │   └── auth\n│   │       ├── authSlice.ts\n│   │       ├── authThunk.ts\n│   │       └── index.ts\n│   ├── hooks.ts\n│   ├── index.ts\n│   └── rootReducer.ts\n├── stories\n│   ├── Introduction.stories.mdx\n│   └── assets\n└── utils\n    ├── AddComma.ts     # example file\n    └── Size.ts\n```\n\n## 🤷‍♂️ What` the difference ?\n\nMany Project folder structure is not my style.  \nSo I made this structure and difference is below.\n\n1. One File, One Role\n\n   I don`t like to combine styled-component with tsx file.\n   Since it is too long to read, So I devided styled-component with tsx file. 🔫 Gang\n\n2. Using ducks structure for redux-toolkit\n\n   Same reason here, I devided thunk file and slice file.\n   And combined this files for one module\n\n3. Clean Import, Easy Find File\n\n   Many example and existing react project use nameing `index.tsx` like `SomeComponents/index.tsx`.  \n   It is reason why import easy, but find file for name was complicated for me.\n\n   So I made `index.ts` file for one component folder, and named tsx file using component name.\n\ne.g\n\n_as is_\n\n```txt\nMButton\n└── index.tsx\n```\n\n_to be_\n\n```txt\nMButton\n├── MButton.style.ts\n├── MButton.tsx\n└── index.ts\n```\n\n### Useful tips for devided styled-components\n\nDevided styled-components file cause writing so many import line\n\ne.g\n\n```ts\nimport {\n  Container,\n  SomeWrapper,\n  SomeTitle,\n  SomeImageWrapper\n  // ... blah blah\n} from \"./SomeComponents.style.ts\";\n```\n\nI recommend to use `*` with `as`\n\nto be\n\n```ts\nimport * as Styled from \"./SomeComponents.style.ts\";\n\nconst SomeComponents = () =\u003e {\n  return (\n    \u003cStyled.Container\u003e\n      \u003cStyled.Wrapper\u003e\n        \u003cStyled.Title\u003ehi\u003c/Styled.Title\u003e\n      \u003c/Styled.Wrapper\u003e\n    \u003c/Styled.Container\u003e\n  );\n};\n```\n\n## 👨‍💻 How to use\n\n1. clone this project\n\n   ```bash\n   git clone https://github.com/minsoo-web/react-boilerplate.git\n   ```\n\n2. install package\n\n   \u003e before you start this package install, if you use npm rather than use yarn  \n   \u003e I recommend you should remove yarn.lock file\n\n   ```bash\n   # go into clone folder before installing the package\n   # e.g cd react-boilerplate\n\n   # using yarn\n   yarn install\n\n   or\n\n   # using npm\n   npm install\n   ```\n\n3. Let`s get it started\n\n   ```bash\n   # using yarn\n   yarn start\n\n   or\n\n   # using npm\n   npm run start\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminsoo-web%2Freact-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminsoo-web%2Freact-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminsoo-web%2Freact-boilerplate/lists"}