React JS— Architecture + Features + Folder structure + Design Pattern

Saurabh Shah
Geek Culture
Published in
24 min readAug 23, 2020

Complete corporate standard React JS boilerplate

Last updated on Nov 04, 2021.
Trying my best to keep the story up-to-date. (react-v17.0.2, MUI-v5.0)
Git repo: SAURABH SHAH / ReactJS myapp · GitLab (wip)
Code-sandbox live (playgroud embeded at bottom)
If you like the story, buy me a coffee!

fig-1. ReactJS app architecture modules

This story will cover all the aspects of a react js web app architecture. If you are creating a new responsive web application using react JS, then follow along.
Our app architecture includes various features. A quick list of few aspects that we will cover is as per fig-1 above and fig-2 below.

Agenda of this story to create a robust and scalable web app from scratch using ReactJS:

Create a new web application using react js framework.
Cover all the dependencies used by a react js application
Reasoning behind each dependency
Dependency integration and configurations
App integration steps for each dependency, if any.

This app architecture will possess all the below features with few bonus implementations on the go:

  1. App title + Favicon
  2. Material UI
  3. Router (navigation)
  4. Backend — Data connectivity (AXIOS for REST API, Firebase SDK integration)
  5. Redux + Thunk
    Redux vs Context API
    Redux toolkit & Redux persist
  6. Multi-environment setup (create deployable builds pointing to specific Database environments using environment variables, without having all environment config bundled in code.)
  7. Internationalization
  8. Unit testing.
  9. Deployment and hosting (Firebase hosting)
  10. ES Lint
  11. Design Pattern (Container-View)
  12. CI/CD for continuous integration.

The story is divided into 3 sections:




Saurabh Shah
Geek Culture

Solutions architect in IT organization. Experience on wide range of solutions for web and mobile apps with cloud integration.

Recommended from Medium