Dummy guide to building scalable react web architecture

Over the years, working as a frontend engineer, I've been involved in multiple React projects. Every time I start a new project, the question that comes in my mind is, "How can I establish a stable, scalable, yet quick foundation to support the app?" The answer varies depending on the project's size, but the core question remains the same. In this article, we will delve into this question, providing a straightforward, no-nonsense insight into building a robust foundation for your project so that you can quickly get started!

Building a scalable architecture from the outset and conducting necessary research is crucial. A strong foundation allows you to make various edits and adjustments to your projects later on. React is unopinionated, meaning you can flexibly use it according to your convenience.
However, over-engineering your codebase for small, one-page apps, MVP demos or feature modules can be counterproductive. In these cases, opting for a basic file structure like the one shown below is preferable and saves you from spending unnecessary extra time maintaining it

> src
   > Components
      > Module.js
      > ModuleContainer.js
      > styles.css
   > App.js
   > App.css
   > Index.js

But on the other hand, for more complex structures, involving a full-fledged backend, frontend, reducers, and context, you should ask yourself three important questions when building its foundation.

- How to design a loosely coupled React architecture?

If React components are too interdependent, it can lead to the over-rendering of unnecessary components, slowing down the app. Aim to separate the concerns of components as much as possible.

- How to decompose your application UI into components?

Decomposing React components is essential for code readability and maintainability, especially when working in a team. Aim for a file with a maximum of 150-200 lines of code, ideally keeping it around 100 lines for better clarity.

- How to Implement data fetching with Redux/Flux?

Middleware/global state store can add extra complexity to your app. Ensure your folder structure is neatly laid out, as it requires some boilerplate code setup. Once in place, it becomes a valuable tool for handling complex interactions and dynamic updates in larger, more complex apps. It's an extremely good investment for larger complex apps.

Lay out a plan addressing these questions according to your project, and you'll end up with a structure similar to the one below.

Ps - If you want a working example here's a repo link to one of my projects to understand the structure better
https://github.com/RiyaNegi/Social-Monitoring

> Backend(server)
> Frontend(client)
  > assets (comprising of media files)
  > components
    > Module 
      > index.js
      > index.css
    > Module2
      > index2.js
      > index2.css
  > context
    > actions
    > reducers
    > InitialState.js
    > Provider.js
  > helpers 
    > AxiosInstance.js (an instance of Axios with customized settings that are resuable throughout the application. )
    > Constants (variables that can be reused throughout the app)
  > routes
  > utils (Comprising of functions that will be repeatedly used throughout the app)
  > App.css
  > App.js
  > App.test.js
  > index.css
  > index.js

Starting a new project can be overwhelming. The easiest way to navigate this challenge is to refer to good GitHub repositories and study their folder structure. Don't spend too much time worrying about building the perfect foundation structure, as changes and adjustments are part of the learning process. There will always be unforeseen changes, no matter how hard you try to plan. Just do your best to be curious about everything and get started with it as soon as possible!!