{"id":25615185,"url":"https://github.com/wednesday-solutions/react-template","last_synced_at":"2025-09-01T12:10:04.495Z","repository":{"id":38290935,"uuid":"205660899","full_name":"wednesday-solutions/react-template","owner":"wednesday-solutions","description":"An enterprise react 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":"2025-05-20T07:53:22.000Z","size":50463,"stargazers_count":102,"open_issues_count":13,"forks_count":93,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-20T08:43:46.047Z","etag":null,"topics":["antd","apisauce","pwa","react","react-boilerplate","react-floki","react-intl","react-router","react-starter","react-starter-kit","react-starter-project","react-starterkit","react-template","react17","redux","saga","storybook","styled-components","translations","webpack"],"latest_commit_sha":null,"homepage":"https://wednesday.is/building-products/?utm_source=github\u0026utm_medium=react_template","language":"JavaScript","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":"2019-09-01T10:26:57.000Z","updated_at":"2025-03-08T10:59:11.000Z","dependencies_parsed_at":"2025-03-17T16:10:44.085Z","dependency_job_id":"d249b33a-b429-42cf-8169-af282f3fb0a3","html_url":"https://github.com/wednesday-solutions/react-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/wednesday-solutions/react-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wednesday-solutions","download_url":"https://codeload.github.com/wednesday-solutions/react-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wednesday-solutions%2Freact-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273122125,"owners_count":25049539,"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","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["antd","apisauce","pwa","react","react-boilerplate","react-floki","react-intl","react-router","react-starter","react-starter-kit","react-starter-project","react-starterkit","react-template","react17","redux","saga","storybook","styled-components","translations","webpack"],"created_at":"2025-02-22T03:18:49.704Z","updated_at":"2025-09-01T12:10:04.471Z","avatar_url":"https://github.com/wednesday-solutions.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg align=\"left\" src=\"https://github.com/wednesday-solutions/react-template/blob/master/react_template_github.svg\" width=\"480\" height=\"540\" /\u003e\n\n\u003cdiv\u003e\n  \u003ca href=\"https://www.wednesday.is/?utm_source=github\u0026utm_medium=react_template\" 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    \u003ch1 align=\"left\"\u003eReact Template\n    \u003c/h1\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=github\u0026utm_medium=react_template\" 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### Built using [react-floki](https://github.com/wednesday-solutions/react-floki)\n\n![React Template CD](https://github.com/wednesday-solutions/react-template/workflows/React%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- Run the initialize script using `yarn run initialize`\n\n- Start the dev server using `yarn start`\n\n- Go through the other scripts in `package.json`\n\n## Global state management using reduxSauce\n\n- Global state management using [Redux Sauce](https://github.com/infinitered/reduxsauce)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/reducer.js](app/containers/HomeContainer/reducer.js)\n  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)\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.js](app/containers/HomeContainer/selectors.js)\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.js](app/containers/HomeContainer/saga.js)\n  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)\n\n## Network requests using wretch\n\n- API calls using [Wretch](https://github.com/elbywan/wretch)\n\n  Take a look at the following files\n\n  - [app/utils/apiUtils.js](app/utils/apiUtils.js)\n  - [app/services/repoApi.js](app/services/repoApi.js)\n  - [app/containers/HomeContainer/saga.js](app/containers/HomeContainer/saga.js)\n\n## Styling using emotion\n\n- Styling components using [Emotion](https://emotion.sh/)\n\n  Take a look at the following files\n\n  - [app/components/T/index.js](app/components/T/index.js)\n  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)\n\n## Using Material UI as the component library\n\n- Reusing components from [Material UI](https://mui.com)\n\n  Take a look at the following files\n\n  - [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)\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.js)\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.js](app/routeConfig.js)\n  - [app/containers/App/index.js](app/containers/App/index.js)\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  - run storybook `yarn storybook`\n\n- Take a look at the following files\n\n  - [.storybook/webpack.config.js](.storybook/webpack.config.js)\n  - [.storybook/main.js](.storybook/main.js)\n  - [.storybook/preview.js](.storybook/preview.js)\n  - [.storybook/reactIntl.js](.storybook/react-Intl.js)\n  - [app/components/Clickable/stories/Clickable.stories.js](app/components/Clickable/stories/Clickable.stories.js)\n\n## Accessibility testing using Storybooks a11y Addon\n\n- Accessbility testing is done using [a11y addon](https://storybook.js.org/addons/@storybook/addon-a11y).\n\n  Take a look at the following files\n\n  - [.storybook/main.js](.storybook/main.js)\n  - [.storybook/test-runner.js](.storybook/test-runner.js)\n\n- Run all the accessbility tests using\n\n  ```\n  yarn test-storybook\n  ```\n\n- Run single test file by specifying path\n\n  ```\n  yarn test-storybook \u003cpath to file\u003e\n  ```\n\nFor the documentation take a look at: [Accessbility test](https://storybook.js.org/docs/react/writing-tests/accessibility-testing)\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.dev.babel.js](internals/webpack/webpack.dev.babel.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  - Accessbility 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.js](jest.config.js)\n  - [jest.setup.js](jest.setup.js)\n  - [app/containers/HomeContainer/tests](app/containers/HomeContainer/tests)\n  - [app/services/tests/repoApi.test.js](app/services/tests/repoApi.test.js)\n  - [app/components/T/tests/index.test.js](app/components/T/tests/index.test.js)\n\n## End to End testing using playwright\n\n- End to End testing is done using [playwright](https://github.com/microsoft/playwright).\n\n  Take a look at the following files\n\n  - [playwright.config.js](playwright.config.js)\n  - [\\_\\_tests\\_\\_/example.spec.js](__tests__/example.spec.js)\n\n- Run all End to End tests using\n\n  ```\n  yarn test:e2e\n  ```\n\n- Run single test file by specifying path\n\n  ```\n  yarn test:e2e \u003cpath to file\u003e\n  ```\n\nFor the documentation take a look at: [playwright](https://playwright.dev/docs/intro)\n\n## Scaffolding components/containers/tests using react-floki\n\n- Components, containers, tests and stories can be scaffolded using\n  ```\n  yarn generate\n  ```\n  For the documentation take a look at: [react-floki](https://github.com/wednesday-solutions/react-floki)\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\nTake a look at the following files\n\n- [internals/webpack/webpack.base.babel.js](internals/webpack/webpack.base.babel.js)\n\n### Chunkify and Lazy loading\n\nTake a look at the following files\n\n- [app/containers/HomeContainer/loadable.js](app/containers/HomeContainer/loadable.js)\n- [app/utils/loadable.js](app/utils/loadable.js)\n\n### App entry point\n\n- [app/app.js](app/app.js)\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.js](app/app.js)\n- [internals/webpack/webpack.config.prod.js](internals/webpack/webpack.config.prod.js)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwednesday-solutions%2Freact-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwednesday-solutions%2Freact-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwednesday-solutions%2Freact-template/lists"}