{"id":25615205,"url":"https://github.com/wednesday-solutions/react-graphql-ts-template","last_synced_at":"2025-06-18T18:39:43.593Z","repository":{"id":38234728,"uuid":"459475643","full_name":"wednesday-solutions/react-graphql-ts-template","owner":"wednesday-solutions","description":"An enterprise react graphql template application showcasing -  Testing strategy, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading and CI/CD","archived":false,"fork":false,"pushed_at":"2024-08-21T09:38:42.000Z","size":5928,"stargazers_count":12,"open_issues_count":6,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-13T21:13:12.042Z","etag":null,"topics":["antd","graphql","jest","react","react-boilerplate","react-router","react-starter","react-starter-kit","react-template","redux","reduxtoolkit","rtk","spacex","storybook","styled-components","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://wednesday.is/building-products","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/wednesday-solutions.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-02-15T07:38:21.000Z","updated_at":"2024-08-21T06:27:45.000Z","dependencies_parsed_at":"2024-03-07T11:30:35.866Z","dependency_job_id":"28a26e2b-78da-4d8f-af75-6096d8f5d01e","html_url":"https://github.com/wednesday-solutions/react-graphql-ts-template","commit_stats":null,"previous_names":[],"tags_count":33,"template":true,"template_full_name":"wednesday-solutions/react-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-graphql-ts-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-graphql-ts-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-graphql-ts-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-graphql-ts-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wednesday-solutions","download_url":"https://codeload.github.com/wednesday-solutions/react-graphql-ts-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248782260,"owners_count":21160717,"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":["antd","graphql","jest","react","react-boilerplate","react-router","react-starter","react-starter-kit","react-template","redux","reduxtoolkit","rtk","spacex","storybook","styled-components","typescript","webpack"],"created_at":"2025-02-22T03:18:54.042Z","updated_at":"2025-04-13T21:13:20.627Z","avatar_url":"https://github.com/wednesday-solutions.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg align=\"left\" src=\"https://github.com/wednesday-solutions/react-graphql-ts-template/blob/master/react-graphql-template.png\" width=\"420\" /\u003e\n\n\u003cdiv\u003e\n  \u003ca href=\"https://www.wednesday.is?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=serverless\" align=\"left\" style=\"margin-left: 0;\"\u003e\n    \u003cimg src=\"https://uploads-ssl.webflow.com/5ee36ce1473112550f1e1739/5f5879492fafecdb3e5b0e75_wednesday_logo.svg\"\u003e\n  \u003c/a\u003e\n  \u003cp\u003e\n    \u003ch3 align=\"left\"\u003eReact GraphQL TypeScript Template\u003c/h3\u003e\n  \u003c/p\u003e\n\n  \u003cp\u003e\nAn enterprise react template application showcasing - Testing strategies, Global state management, middleware support, a network layer, component library integration, localization, PWA support, route configuration, lazy loading, and Continuous integration \u0026 deployment.\n  \u003c/p\u003e\n\n---\n\n  \u003cp\u003e\n    \u003ch4\u003e\n      Expert teams of digital product strategists, developers, and designers.\n    \u003c/h4\u003e\n  \u003c/p\u003e\n\n  \u003cdiv\u003e\n    \u003ca href=\"https://www.wednesday.is/contact-us?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=serverless\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://uploads-ssl.webflow.com/5ee36ce1473112550f1e1739/5f6ae88b9005f9ed382fb2a5_button_get_in_touch.svg\" width=\"121\" height=\"34\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/wednesday-solutions/\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://uploads-ssl.webflow.com/5ee36ce1473112550f1e1739/5f6ae88bb1958c3253756c39_button_follow_on_github.svg\" width=\"168\" height=\"34\"\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n\n---\n\n\u003c/div\u003e\n\n![React GraphQL TS Template CD](https://github.com/wednesday-solutions/react-graphql-ts-template/workflows/React%20GraphQL%20TypeScript%20Template%20CD/badge.svg)\n\n\u003cdiv\u003e\n\u003cimg src='./badges/badge-statements.svg' height=\"20\"/\u003e\n\u003cimg src='./badges/badge-branches.svg' height=\"20\"/\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003cimg src='./badges/badge-lines.svg'  height=\"20\"/\u003e\n\u003cimg src='./badges/badge-functions.svg' height=\"20\"/\u003e\n\u003c/div\u003e\n\n## Getting Started\n\n- Install dependencies using `yarn install`\n\n- Start the dev server using `yarn start`\n\n- Go through the other scripts in `package.json`\n\n## TypeScript Configuration\n\n- Typescript Configuration using [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)\n\n  Take a look at the following files\n\n  - [app/tsconfig.json](app/tsconfig.json)\n\n## Global state management using @redux/toolkit\n\n- Global state management using [Redux Toolkit](https://github.com/reduxjs/redux-toolkit)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/reducer.ts](app/containers/HomeContainer/reducer.ts)\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n- Computing and getting state from the redux store using [Reselect](https://github.com/reduxjs/reselect)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/selectors.ts](app/containers/HomeContainer/selectors.ts)\n\n## Implementing a Redux middleware using redux-sagas\n\n- Side effects using [Redux Saga](https://github.com/redux-saga/redux-saga)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/saga.ts](app/containers/HomeContainer/saga.ts)\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n## Network requests using apisauce\n\n- API calls using [Api Sauce](https://github.com/infinitered/apisauce/)\n\n  Take a look at the following files\n\n  - [app/utils/apiUtils.ts](app/utils/apiUtils.ts)\n\n## GraphQL requests using Apollo Boost\n\n- GraphQL queries using [Apollo Boost](https://www.npmjs.com/package/apollo-boost)\n\n  Take a look at the following files\n\n  - [app/utils/graphqlUtils.ts](app/utils/graphqlUtils.ts)\n  - [app/containers/HomeContainer/saga.ts](app/containers/HomeContainer/saga.ts)\n\n## Styling using styled-components\n\n- Styling components using [Styled Components](https://styled-components.com)\n\n  Take a look at the following files\n\n  - [app/components/T/index.tsx](app/components/T/index.tsx)\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n## Using antd as the component library\n\n- Reusing components from [Ant design](https://ant.design)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)\n\n## Localization using Lingui\n\n- Translations using [Lingui](https://github.com/lingui/js-lingui)\n\n  Take a look at the following files\n\n  - [app/translations/en.json](app/translations/en.json)\n  - [app/containers/LanguageProvider/](app/containers/LanguageProvider/)\n  - [app/i18n](app/i18n.ts)\n\n## Routing using react-router\n\n- Routing is done using [React Router](https://github.com/ReactTraining/react-router)\n\n  Take a look at the following files\n\n  - [app/routeConfig.ts](app/routeConfig.ts)\n  - [app/containers/App/index.tsx](app/containers/App/index.tsx)\n\n## Creating and showcasing components individually and in isolation using Storybooks\n\n- Storybooks allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.\n\n  Take a look at the following files\n\n  - [.storybook/webpack.config.js](.storybook/webpack.config.js)\n  - [.storybook/config.js](.storybook/config.js)\n  - [.storybook/addons.js](.storybook/addons.js)\n  - [app/components/Clickable/stories/Clickable.stories.js](app/components/Clickable/stories/Clickable.stories.js)\n\n## Bundling your application using Webpack\n\n- We're using and configuring webpack to bundle our React application.\n\n  Take a look at the following files\n\n  - [internals/webpack/webpack.config.base.js](internals/webpack/webpack.config.base.js)\n  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)\n  - [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)\n\n## Analyzing the bundle size using webpack-bundle-analyzer\n\n- The size of the bundle is analyzed using the webpack-bundle-analyzer to make sure that the bundle is lean and optimized.\n\n  Take a look at the following files\n\n  - [internals/webpack/webpack.config.dev.js](internals/webpack/webpack.config.dev.js)\n\n## Implementing CI/CD pipelines using Github Actions\n\n- CI/CD using Github Actions.\n  The CI pipeline has the following phases\n\n  - Checkout\n  - Install dependencies\n  - Lint\n  - Test\n  - Build\n\n  The CD pipeline has the following phases\n\n  - Checkout\n  - Install dependencies\n  - Build\n  - Deploy\n\n  Take a look at the following files\n\n  - [.github/workflows/ci.yml](.github/workflows/ci.yml)\n  - [.github/workflows/cd.yml](.github/workflows/cd.yml)\n\n## Testing using @testing-library/react\n\n- Testing is done using the @testing-library/react.\n\n  Take a look at the following files\n\n  - [jest.config.json](jest.config.json)\n  - [jest.setup.js](jest.setup.js)\n  - [app/containers/HomeContainer/tests](app/containers/HomeContainer/tests)\n  - [app/services/tests/repoApi.test.ts](app/services/tests/repoApi.test.ts)\n  - [app/components/T/tests/index.test.tsx](app/components/T/tests/index.test.tsx)\n\n\n## Misc\n\n### Aliasing\n\n- @app -\u003e app/\n- @containers -\u003e app/containers/\n- @components -\u003e app/components/\n- @services -\u003e app/services/\n- @utils -\u003e app/utils/\n- @themes -\u003e app/themes\n- @images -\u003e app/images\n\nTake a look at the following files\n\n- [internals/webpack/webpack.config.base.js](internals/webpack/webpack.config.base.js)\n- [app/tsconfig.json](app/tsconfig.json)\n- [jest.config.json](jest.config.json)\n\n### Chunkify and Lazy loading\n\nTake a look at the following files\n\n- [app/containers/HomeContainer/Loadable.ts](app/containers/HomeContainer/Loadable.ts)\n- [app/utils/loadable.ts](app/utils/loadable.ts)\n\n### App entry point\n\n- [app/app.ts](app/app.ts)\n\n### PWA\n\n- [Offline Plugin](https://github.com/NekR/offline-plugin)\n- [Webpack PWA Manifest](https://github.com/arthurbergmz/webpack-pwa-manifest)\n\nTake a look at the following files\n\n- [app/app.tsx](app/app.ts)\n- [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)\n\n## Syntax for adding commit messages\n\nYour commit messages have to be in this format:\n\n```\ntype(category): description [flags]\n```\n\nWhere `type` is one of the following:\n\n- `build`\n- `docs`\n- `feat`\n- `fix`\n- `others`\n- `perf`\n- `refactor`\n- `style`\n- `test`\n- `chore`\n- `ci`\n- `temp`\n  Where `flags` is an optional comma-separated list of one or more of the following (must be surrounded in square brackets):\n- `breaking`: alters `type` to be a breaking change\n  And `category` can be anything of your choice. If you use a type not found in the list (but it still follows the same format of the message), it'll be grouped under `other`.\n\n## Auto release\n\n- Each push into `qa` branch will produce a beta release\n- Each push into `master` branch will produce a prod release\n\n  Take a look at the following files\n\n- [.github/workflows/beta-release.yml](.github/workflows/beta-release.yml)\n- [.github/workflows/prod-release.yml](.github/workflows/prod-release.yml)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwednesday-solutions%2Freact-graphql-ts-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwednesday-solutions%2Freact-graphql-ts-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwednesday-solutions%2Freact-graphql-ts-template/lists"}