Skip to content

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

License

Notifications You must be signed in to change notification settings

wednesday-solutions/react-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Template

An 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 & deployment.


Expert teams of digital product strategists, developers, and designers.


Built using react-floki

React Template CD

Getting Started

  • Install dependencies using yarn install

  • Run the initialize script using yarn run initialize

  • Start the dev server using yarn start

  • Go through the other scripts in package.json

Global state management using reduxSauce

Implementing a Redux middleware using redux-sagas

Network requests using wretch

Styling using emotion

Using Material UI as the component library

Localization using Lingui

Routing using react-router

Creating and showcasing components individually and in isolation using Storybooks

Accessibility testing using Storybooks a11y Addon

For the documentation take a look at: Accessbility test

Bundling your application using Webpack

Analyzing the bundle size using webpack-bundle-analyzer

  • The size of the bundle is analyzed using the webpack-bundle-analyzer to make sure that the bundle is lean and optimized.

    Take a look at the following files

Implementing CI/CD pipelines using Github Actions

  • CI/CD using Github Actions. The CI pipeline has the following phases

    • Checkout
    • Install dependencies
    • Lint
    • Test
    • Accessbility Test
    • Build

    The CD pipeline has the following phases

    • Checkout
    • Install dependencies
    • Build
    • Deploy

    Take a look at the following files

Testing using @testing-library/react

End to End testing using playwright

For the documentation take a look at: playwright

Scaffolding components/containers/tests using react-floki

  • Components, containers, tests and stories can be scaffolded using
    yarn generate
    
    For the documentation take a look at: react-floki

Misc

Aliasing

  • @app -> app/
  • @containers -> app/containers/
  • @components -> app/components/
  • @services -> app/services/
  • @utils -> app/utils/

Take a look at the following files

Chunkify and Lazy loading

Take a look at the following files

App entry point

PWA

Take a look at the following files