{"id":19574261,"url":"https://github.com/vinibiavatti1/reactprojecttemplate","last_synced_at":"2026-01-23T07:34:43.592Z","repository":{"id":122462379,"uuid":"504529277","full_name":"vinibiavatti1/ReactProjectTemplate","owner":"vinibiavatti1","description":"React Project Template","archived":false,"fork":false,"pushed_at":"2022-07-05T16:05:35.000Z","size":800,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-27T05:34:00.612Z","etag":null,"topics":["blueprint","boilerplate","eslint","i18next","project","react","react-hooks","reactjs","template"],"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/vinibiavatti1.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-06-17T12:38:05.000Z","updated_at":"2024-12-20T02:07:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"715a6faf-0dac-4284-9804-0248b6ce1e09","html_url":"https://github.com/vinibiavatti1/ReactProjectTemplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vinibiavatti1/ReactProjectTemplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinibiavatti1%2FReactProjectTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinibiavatti1%2FReactProjectTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinibiavatti1%2FReactProjectTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinibiavatti1%2FReactProjectTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinibiavatti1","download_url":"https://codeload.github.com/vinibiavatti1/ReactProjectTemplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinibiavatti1%2FReactProjectTemplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28683460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T05:48:07.525Z","status":"ssl_error","status_checked_at":"2026-01-23T05:48:07.129Z","response_time":59,"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":["blueprint","boilerplate","eslint","i18next","project","react","react-hooks","reactjs","template"],"created_at":"2024-11-11T06:39:24.220Z","updated_at":"2026-01-23T07:34:43.585Z","avatar_url":"https://github.com/vinibiavatti1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Project Template\n\nThe purpose of this repository is to facilitate the React project creation, giving useful resources and a feature based organization. Different of [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html), the focus of this boilerplate is to give the opportunity to clone this repository and start coding without spending some time to configure linters and other libraries.\n\nThis project was made keeping in mind that the [VSCode](https://code.visualstudio.com/) IDE will be used for the development.\n\n## Features\n\nThis template offers built-in useful features that are used commonly in WEB projects. The features available for this projects are:\n\n-   Linting and Formatting\n    -   [ESlint](https://eslint.org/)\n    -   [Prettier](https://prettier.io/)\n    -   [EditorConfig](https://editorconfig.org/)\n    -   [React Hooks Linter](https://www.npmjs.com/package/eslint-plugin-react-hooks)\n    -   [Typescript ESlint](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin)\n-   Environment\n    -   [Dotenv](https://www.npmjs.com/package/dotenv)\n    -   [EnvCMD](https://www.npmjs.com/package/env-cmd)\n-   Testing\n    -   [Jest](https://jestjs.io/docs/tutorial-react)\n-   Typing\n    -   [Typescript](https://www.typescriptlang.org/)\n-   Internationalization\n    -   [I18next](https://react.i18next.com/)\n-   Analytics\n    -   [Web Vitals](https://create-react-app.dev/docs/measuring-performance/)\n-   Scripts\n    -   [PowerShell Util Scripts](https://docs.microsoft.com/pt-pt/powershell/)\n\n## Recommended VSCode Extensions\n\nThe list below set the recommended extensions to ensure all configurations of the project to work fine. Note that these extensions are configured inside `.vscode/extensions.json` for automatic recommendation after open the IDE.\n\n-   [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) `editorconfig.editorconfig`\n-   [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) `dbaeumer.vscode-eslint`\n-   [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) `esbenp.prettier-vscode`\n-   [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) `mikestead.dotenv`\n\n## Organization\n\nThe project is organized based on the component features, in which each feature has it's module with specific components. For the shared components, the shared folder is available. Other concepts like APIs, Services, Utils, are available in this template.\n\nThe table below shows the resources in project root:\n\n| File/Folder        | Description                                                         |\n| ------------------ | ------------------------------------------------------------------- |\n| `.vscode`          | VSCode default project configuration                                |\n| `/public`          | Public app resources and translation files for internationalization |\n| `/scripts`         | Powershell util scripts                                             |\n| `/src`             | Source code                                                         |\n| `.editorconfig`    | Editor Config configuration file                                    |\n| `.env.development` | Development environment variables                                   |\n| `.env.production`  | Production environment variables                                    |\n| `.env.staging`     | Staging environment variables                                       |\n| `.env.test`        | Test environment variables                                          |\n| `.eslintrc`        | ESLint configuration file                                           |\n| `.gitignore`       | Git ignore resources                                                |\n| `.prettierrc`      | Prettier configuration file                                         |\n| `package.json`     | NPM configuration file                                              |\n| `tsconfig.json`    | Typescript configuration file                                       |\n\n## Source Files Organization\n\nThe organization for `src` folder was made divided by concept, where each folder represents for some specific WEB development concept.\n\n| File/Folder          | Description                                        |\n| -------------------- | -------------------------------------------------- |\n| `/components`        | React components/modules                           |\n| `/constants`         | Application constants                              |\n| `/contexts`          | React contexts                                     |\n| `/enums`             | Enumerations                                       |\n| `/errors`            | App exception classes                              |\n| `/hooks`             | React custom hooks                                 |\n| `/models`            | Model classes                                      |\n| `/reducers`          | React reducers                                     |\n| `/services`          | Service modules that integrate with backend API    |\n| `/utils`             | Utility classes                                    |\n| `index.css`          | Global application CSS style                       |\n| `index.tsx`          | React entry-point                                  |\n| `react-app-env.d.ts` | React typescript configuration                     |\n| `setup.ts`           | Setup function that execute when application loads |\n| `setupTests.ts`      | Setup for Jest tests                               |\n\n## React Components\n\nInside the `/components` folder, we can find some folders that represent a specific React resource. The project component structure uses feature division to identify specific components for determined feature. Also, the structural components (layout components) can be find here.\n\n| File/Folder    | Description                                                      |\n| -------------- | ---------------------------------------------------------------- |\n| `/layouts`     | Application layout components (Header, Main, Footer and Layout)  |\n| `/modules`     | Feature components (Pages and specific components for each page) |\n| `/shared`      | Shared components                                                |\n| `App.css`      | App component style                                              |\n| `App.test.tsx` | App component test                                               |\n| `App.tsx`      | App component configuration                                      |\n\n## Internationalization\n\nThe library [i18next](https://react.i18next.com/) is used set the project as multi-cultural. It uses JSON message files to render messages in the components by the locale of the user.\n\nThe configuration of this lib can be found at `setup.ts` file.\n\nTo start using the internationalization, you must define the message for each language that the app supports in the locale files. These files are located in `/public/locales` folder.\n\n```\n/public\n    /locales\n        /en\n            translation.json\n        /pt\n            translation.json\n    ...\n```\n\nTo add a new translation, we just need to add this message to the `translation.json` file. After this, to use the translation we can use the `useTranslation` hook provided by the library.\n\n```typescript\nconst [t, i18n] = useTranslation()\nconst localeMessage = t('my.message')\n```\n\n| Variable | Description                                                                                      |\n| -------- | ------------------------------------------------------------------------------------------------ |\n| `t`      | Function that can be used to get the message in the `transaltion.json` file                      |\n| `i18n`   | Instance with the library properties, such as the current language, and other utility functions. |\n\n## Reducers\n\nThe `/reducers` folder store the reducer functions that application uses. These function should be used by `useReducer()` React hook. Each reducer has three files:\n\n| File                     | Description                                            |\n| ------------------------ | ------------------------------------------------------ |\n| `reducer.ts`             | Reducer function that is used into `useReducer()` hook |\n| `reducerActions.ts`      | Reducer action type enumeration                        |\n| `reducerInitialState.ts` | Initial state that is passed to `useReducer()` hook    |\n\n## Environment\n\nTo use specific variables depending the environment that app is running on, the lib `Dotenv` was used. This lib provides the `.env` files to configure the variables for each environment. These variables can be accessed using `process.env.\u003cvariable_name\u003e`. Some environment variables are defined in `Constants.ts` file for usage.\n\n\u003e Note: To ensure that React will load the environment variables, these variables must start with `REACT_APP` prefix.\n\n## Build\n\nThere are two commands for building the application: `build:staging` and `build:production`. The routine that will be executed for each build is the same, but the difference is the `.env` file that will be used. The `env-cmd` library will be used to select the correct `.env` file.\n\n## Scripts\n\nThe project gives some PowerShell scripts that can be used to execute common project commands, like build, start, serve, etc. You can also use the script `run_code.ps1` to open the VSCode in the project context.\n\n\u003e Note: The serve command can be executed only if the serve tool is present in the environment of the application, otherwise the command will fail. The serve tool is used to host the application into a server. It can be used to host the application for staging or production environments.\n\n## Linters and Formatters\n\nThe project has the JS and React linters already configured in `.eslintrc` file. The Prettier formatter is also configured with default parameters in `.prettierrc` file, to ensure the standardization between developers. To guarantee that the IDEs will use the same configuration, the project has the `.editorconfig` file with preset IDE configurations.\n\nFor React Hooks, the plugins `plugin:react/recommended` and `plugin:react-hooks/recommended` are configured for ESLint. Typescript had to be set into ESLint also by using the `plugin:@typescript-eslint/recommended` plugin.\n\n\u003e Note: Some of ESLint rules are set by default, as the requirement of JSDoc for functions, camelcase naming, explicit Typescript return type, and the optional React lib for JSX files. If you want to modify these configurations, please, be free to update the `.eslintrc` file following the [ESLint documentation](https://eslint.org/docs/latest/user-guide/configuring/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinibiavatti1%2Freactprojecttemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinibiavatti1%2Freactprojecttemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinibiavatti1%2Freactprojecttemplate/lists"}