Enterprise React tech stack in 2022

This is the React tech stack you need to build a big scalable reliable and nice looking app in 2022.

Motivation

React ecosystem is changing rapidly as well as the whole frontend development area. It is not easy to compile a modern tech stack to build professional enterprise-class web apps. This is an opinionated boilerplate that helps you to get a quick start.

Main modules

• React SSR framework Next.js.
• Central state management Redux.
• Next and Redux connector next-redux-wrapper.
• Async middleware for Redux Redux-Saga.
• Translation and i18n next-translate.
• Form library React Hook Form.
• UI design system Chakra.

Tech Stack description

There is an article describing the main ideas behind this tech stack.

Installation and usage

• install yarn.
• in local project directory run yarn to load modules.
• run npm run dev to start the app.

Working demo

You can see this app in action at Vercel hosting

Demo functionality

The demo app uses Fake Store API.
It has three pages that a typical online shop would have:

• Product list (Shop)
• Product cart (Cart)
• User profile (User)

All pages should look nice in all screen resolutions.

These 3 pages use getInitialProps data fetching method. There is no real functionality to add products to the cart, so you need to navigate via the menu.
To demonstrate the other two data fetching methods getServerSideProps and getStaticProps there are two additional pages that have the same functionality as the two main ones but use different data fetching methods under the hood.