Add documentation for using Redux and React Query as state management tools

frontend/design/README.md

@@ -0,0 +1,18 @@
+# Design Document
+
+## Contents
+
+-   [Redux & React Query Structure](./redux-query.md): The structure of `redux` & `react-query`
+
+## Maintaining the Document
+
+For significant scope and complex new features, it is recommended to write a Design Document before starting any implementation work. On the other hand, we don't need to design documentation for small, simple features and bug fixes.
+
+Writing a design document for big features has many advantages:
+
+-   It helps new visitors or contributors understand the inner workings or the architecture of the project.
+-   We can agree with the community before code is written that could waste effort in the wrong direction.
+
+While working on your design, writing code to prototype your functionality may be useful to refine your approach.
+
+Authoring Design document is also proceeded in the same [contribution flow](../../CONTRIBUTING.md) as normal Pull Request such as function implementation or bug fixing.

frontend/design/redux-query.md

@@ -0,0 +1,12 @@
+# Redux & React Query Structure
+
+This document covers the structure of `redux` & `react-query`.  
+CodePair uses redux and react-query as state management tools. This document compares their use cases and roles.
+
+## [Redux](https://redux-toolkit.js.org/)
+
+Redux is utilized for storing globally used data such as user tokens and theme modes. In cases where data is not globally used in the project but is utilized by one or more sub-components, it is stored in Redux. The code for the Redux store can be found in [`../src/store`](../src/store/).
+
+## [React Query](https://tanstack.com/query/v3/)
+
+React Query is utilized for managing API calls and their resulting states. It inherently employs internal caching for state management. When data is needed in sub-components, the implementation avoids using cached results and instead stores the results of API calls in Redux. To prevent duplicate calls, sub-components refrain from directly invoking React Query and calls are made exclusively from the page level. The React Query hook used in this project can be found in [`../src/hooks/api`](../src/hooks/api/).