{"id":18419536,"url":"https://github.com/tutods/react-boilerplate","last_synced_at":"2026-04-07T21:32:10.826Z","repository":{"id":120506751,"uuid":"468360240","full_name":"tutods/react-boilerplate","owner":"tutods","description":"My React Application Boilerplate using WebPack, Babel, TypeScript, ESLint, Prettier and Husky","archived":false,"fork":false,"pushed_at":"2022-04-12T13:18:19.000Z","size":115,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-20T03:05:57.489Z","etag":null,"topics":["babel","boilerplate","eslint","react","reactjs","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/tutods.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-03-10T13:45:28.000Z","updated_at":"2022-05-14T05:40:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3826d4f-5c65-4dc5-961a-e4f235128400","html_url":"https://github.com/tutods/react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tutods/react-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Freact-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Freact-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Freact-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Freact-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tutods","download_url":"https://codeload.github.com/tutods/react-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutods%2Freact-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31530641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["babel","boilerplate","eslint","react","reactjs","typescript","webpack"],"created_at":"2024-11-06T04:17:21.049Z","updated_at":"2026-04-07T21:32:10.783Z","avatar_url":"https://github.com/tutods.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Boilerplate\u003c/h1\u003e\n\u003cp align=\"center\"\u003eThis repository contain the basics to start a new project using:\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg alt=\"React\" src=\"https://img.shields.io/badge/react-1E4174?style=for-the-badge\u0026logo=react\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"Webpack\" src=\"https://img.shields.io/badge/webpack-1E4174?style=for-the-badge\u0026logo=webpack\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"babel\" src=\"https://img.shields.io/badge/babel-1E4174?style=for-the-badge\u0026logo=babel\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"TypeScript\" src=\"https://img.shields.io/badge/TypeScript-1E4174?style=for-the-badge\u0026logo=TypeScript\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"eslint\" src=\"https://img.shields.io/badge/eslint-1E4174?style=for-the-badge\u0026logo=eslint\u0026logoColor=white\" /\u003e\n\u003cimg alt=\"prettier\" src=\"https://img.shields.io/badge/prettier-1E4174?style=for-the-badge\u0026logo=prettier\u0026logoColor=white\" /\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n\n\u003ch2\u003e💡 What you will found?\u003c/h2\u003e\n\nYou can found the folders structure below:\n\n```\n.\n├── public\n└── src\n    ├── assets\n    │   ├── styles\n    │   └── media\n    ├── components\n    ├── contexts\n    ├── pages\n    │   └── Main\n    └── shared\n        ├── @types\n        ├── hooks\n        ├── services\n        └── utils\n```\n\n\u003ch3 style=\"font-weight: 300\"\u003e🗂 Details\u003c/h3\u003e\n\n\u003e **`public`:** files you want each user can access, like images, favicon, etc.\n\n\u003e **`src/assets`:** on this folder I save my global styles (`global.scss`) and project media (SVG files, images, ...)\n\n\u003e **`src/components`:** all the components to this project\n\n\u003e **`src/contexts`:** in some applications I use contexts, so this folder is for them\n\n\u003e **`src/pages`:** usually I use `react-router-dom` package, and for that, the `Main/index.tsx` is the file with all routes, and to each page I create another folder and respective files in `src/pages`\n\n\u003e **`src/shared/@types`:** you can imagine that is the folder to storage all the types created for this project (yes, I use Typescript!)\n\n\u003e **`src/shared/hooks`:** folder to storage custom hooks\n\n\u003e **`src/shared/services`:** folder to storage external services, usually with `axios` package\n\n\u003e **`src/shared/utils`:** common functions, regex's, etc.\n\n\u003ch3 style=\"font-weight: 300\"\u003e📄 Files\u003c/h3\u003e\n\nIn this boilerplate you can found this initial files:\n\n\u003e **`.dockerignore`, `Dockerfile` and `docker-compose.yml`:** files related with Docker (if you want create a container)\n\u003e \u003csmall\u003eIn this case, I create only the image to run a dev server (not a build server)\u003c/small\u003e\n\n\u003e **`.prettierrc` and `.prettierignore`:** **Prettier** configuration files;\n\n\u003e **`.eslintrc.js`:** **ESLint** configuration file\n\n\u003e **`tsconfig.json`:** My configurations to **TypeScript** \u003csmall\u003e(I use `baseUrl` option to clean the imports)\u003c/small\u003e\n\n\u003e **`webpack.config.js`:** **WebPack** configuration file\n\n\u003e**`.babelrc`:** **Babel** configuration file\n\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n\u003cdiv align=\"right\" style=\"margin-top: 50px\"\u003e\n\u003ch3 style=\"font-weight: 300\"\u003e\n🧑🏻‍💻 About Me\n\u003c/h3\u003e\n\n\u003ca href=\"https://github.com/TutoDS\" alt=\"TutoDS\"\u003e\n\u003cimg src=\"https://github.com/tutods.png\" alt=\"Daniel Sousa @TutoDS\" width=\"100px\" style=\"border-radius: 100%\"\u003e\n\u003cbr /\u003e\n \u003csub\u003e\u003cb\u003eDaniel Sousa @TutoDS\u003c/b\u003e\u003c/sub\u003e\n\u003c/a\u003e\n\n\u003cdiv style=\"margin: 20px 0\" /\u003e\n\n[facebook]: https://facebook.com/tutods2014\n[twitter]: https://twitter.com/tutods\n[youtube]: https://youtube.com/tutods2014\n[instagram]: https://instagram.com/dsousa_12\n[linkedin]: https://www.linkedin.com/in/daniel-sousa-tutods/\n[gitlab]: https://gitlab.com/jdaniel.asousa\n\n[\u003cimg src=\"https://img.shields.io/badge/Facebook%20-%232671E5.svg?\u0026style=for-the-badge\u0026logo=Facebook\u0026logoColor=white\" alt=\"Facebook\"/\u003e][facebook] [\u003cimg src=\"https://img.shields.io/badge/Twitter%20-%231DA1F2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" alt=\"Twitter\"/\u003e][twitter]\n\n[\u003cimg src=\"https://img.shields.io/badge/LinkedIn%20-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\"/\u003e][linkedin] [\u003cimg src=\"https://img.shields.io/badge/Instagram%20-%23E4405F.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" alt=\"Instagram\"/\u003e][instagram]\n\n[\u003cimg src=\"https://img.shields.io/badge/YouTube%20-%23FF0000.svg?\u0026style=for-the-badge\u0026logo=YouTube\u0026logoColor=white\" alt=\"YouTube\"/\u003e][youtube] [\u003cimg src=\"https://img.shields.io/badge/Gitlab%20-%23181717.svg?\u0026style=for-the-badge\u0026logo=gitlab\u0026logoColor=white\"/\u003e][gitlab]\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutods%2Freact-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftutods%2Freact-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutods%2Freact-boilerplate/lists"}