# Documentation for React webapp

The current state of the pmp-webapp's project could be improved. We can always improve the code quality and the shared knowledge inside the codebase.

For this reason, I'm documenting some changes that I think it could best serve the application, by utilizing React's best practices and some programming and architecture principals.

#### All of these changes could be made inside the same existing project, only changing what we need.

## Should be added:

- Documentation on design and development guidelines for developers:
> How to develop a new page? How to create a new component and make it call the backend with the correct integration for the Redux store?
All these questions can come up for someone that is joining a new project, and we should write and define some guides and explanation on How, Why and When do certain technical choices.
A way to do this is to create a meaningful README.md file inside the needed folder.

- Centralized error handling and API communication;
> We can create a base API service that could share logic for error handling (toast message, popup notifications...) and utilize this base for Authentication and other API services;

- React Hook Form (forms validation and state):
> With [this library](https://react-hook-form.com/), we can create much simpler forms structure and handle the validation in a centralized way.

## Should change:

- Definition of Routes, pages and layouts;
> Here we need to separate the routes to their specific folder with all the routes and layouts for logged in customers.

- App component entry point;
> The file `App.tsx` is too much big with a lot of Redux and Cookies manipulations inside. This can be a problem because we need to divide the application better and have a way to mantain when it get big.

## Preferences:

- Base components interface that extend the Bootstrap 5:
> This change could improve later in the project the ability to design our own design system with different variants for different components, or eject from Bootstrap, by creating our high-level interface for the Bootstrap's components.
In the beginning, we can do something simple like just repassing all the props and rendering the component as it is:

const Button = (props: BootstrapButtonProps /* props interface */) => {
    return <BootstrapButton {...props} />
}

- Atomic Design component structure:
> If we utilize the interface base components, as mentioned before, we could also use the Atomic Design pattern and guidelines as follow to better clarify the use and share of the components: [Atomic Design's guidelines](https://bradfrost.com/blog/post/atomic-web-design/);

- Review technically Redux Thunk vs Redux Saga;
> We can check it how to make the backend integration with the Redux store by defining what to use it: Sagas or Thunks.