{"id":18720699,"url":"https://github.com/nareshbhatia/react-force-template","last_synced_at":"2026-03-05T22:34:54.547Z","repository":{"id":50068893,"uuid":"187047984","full_name":"nareshbhatia/react-force-template","owner":"nareshbhatia","description":"Template intended to be a starting point for serious React applications","archived":false,"fork":false,"pushed_at":"2021-06-05T02:05:31.000Z","size":3439,"stargazers_count":11,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T14:23:11.726Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/nareshbhatia.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}},"created_at":"2019-05-16T14:50:17.000Z","updated_at":"2021-05-25T16:16:52.000Z","dependencies_parsed_at":"2022-09-22T23:40:56.472Z","dependency_job_id":null,"html_url":"https://github.com/nareshbhatia/react-force-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nareshbhatia/react-force-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-force-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-force-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-force-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-force-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nareshbhatia","download_url":"https://codeload.github.com/nareshbhatia/react-force-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-force-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30152946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T21:15:50.531Z","status":"ssl_error","status_checked_at":"2026-03-05T21:15:11.173Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":[],"created_at":"2024-11-07T13:32:19.119Z","updated_at":"2026-03-05T22:34:54.498Z","avatar_url":"https://github.com/nareshbhatia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Force Template\n\nThis template is intended to be a starting point for serious React applications.\nIt offers an opinionated directory structure and demonstrates best practices in\nlayout, error handling, hooks and more.\n\n![Screen Shot](assets/screen-shot.png)\n\nCheck out the following repos for more complex examples using this template:\n\n-   [Stock Charts](https://github.com/nareshbhatia/stock-charts)\n-   [Manage My Money](https://github.com/nareshbhatia/manage-my-money)\n-   [GraphQL Bookstore](https://github.com/nareshbhatia/graphql-bookstore)\n\n## Getting Started\n\nMake sure your development machine is set up for building React apps. See the\nrecommended setup procedure [here](./dev-machine-setup.md).\n\nNow execute the following commands to build and run the template.\n\n```bash\n$ yarn\n$ yarn start\n```\n\nNow point your browser to http://localhost:3000/.\n\n## Folder Structure\n\nThis example follows best practices adopted by popular React projects including\nMaterial-UI.\n\n```\n/src\n    /components\n    /contexts\n    /features\n    /models\n    /services\n    /utils\n```\n\n-   `components:` This is where we keep components that are reused across\n    application features. Components are arranged in sub-folders - one or more\n    tightly related components per sub-folder.\n\n-   `contexts:` This folder contains the React contexts we need for our app.\n\n-   `features:` Contains domain-specific features of the app - one folder per\n    feature. Feature is an abstract concept which could map to a reasonable\n    level of granularity for your application. For example, feature could map to\n    a page, a group of pages or a tab on your app. The feature folder can hold\n    multiple components that are tightly related to the feature and are not\n    reusable across features. Keep the folder structure flat as long as\n    possible. Consider creating sub-folders when the folder reaches seven or\n    more files.\n\n-   `models`: This is where we keep the application's domain entities, value\n    objects, interfaces and types. Please refer to\n    [Domain-Driven Design](https://archfirst.org/domain-driven-design/) to\n    understand the meaning of these terms.\n\n-   `services:` Contains functionality to access the outside world. This could\n    be services for accessing REST or GraphQL APIs, listeners for WebSockets,\n    access to data stores etc. This layer is also known as the `adapter` layer\n    in the\n    [Hexagonal Architecture](http://alistair.cockburn.us/Hexagonal+architecture)\n    or the\n    [Onion Architecture](http://jeffreypalermo.com/blog/the-onion-architecture-part-1/).\n\n-   `utils:` - contains general purpose utilities such as date/time utilities\n    and number parsing \u0026 formatting utilities.\n\nWhen reviewing the above folder structure, note how we control the items exposed\nby a folder. Each folder has an `index.ts` file which exports only what is\nneeded by external consumers - nothing more, nothing less! If everything needs\nto be exported, we simply use `export * from './xyz';` - instead of repeating\neach item individually. This makes it easier to manage the index files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnareshbhatia%2Freact-force-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnareshbhatia%2Freact-force-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnareshbhatia%2Freact-force-template/lists"}