Documentation

Frontend Folder Structure Overview #

The frontend of the Property Pro project follows a feature-based structure, with folders organized by specific functionalities. This approach enhances modularity and maintainability, making it easier to navigate and extend the application. Additionally, the structure includes shared assets, configuration files, and primary entry points for the application.

Detailed Folder Structure Description #

1. components Folder
   • Contains reusable UI components that are used throughout the application, promoting code reusability and consistency in the user interface.
2. middleware Folder
   • Contains middleware code responsible for handling tasks such as logging and error handling. This helps in managing side effects and enhancing application stability.
3. pages Folder
   • Likely contains individual pages of the application. Each page represents a distinct view, and these are often mapped to specific routes in the application.
4. store Folder
   • Handles state management using Redux:
     • createAsyncThunk and createSlice: Used for managing authentication.
     • Checkout Data: Managed using createSlice for handling state related to the checkout process.
     • RTK Query: Used for managing other application states, ensuring efficient data fetching and caching.
5. types Folder
   • Likely contains TypeScript definitions, which are essential for type checking and maintaining type safety across the project, ensuring a more robust codebase.
6. utils Folder
   • Contains utility functions commonly used in various parts of the project. Examples include:
     • Number Formatter: Standardizes numerical displays.
     • Date Formatter: Consistently formats date and time.
     • cn Function: Utility for handling class names dynamically.
7. index.tsx
   • The main entry point for the application, where the application is initialized and the root components are rendered.
8. i18next.tsx
   • Manages internationalization (i18n) to support multiple languages within the application, enhancing user accessibility.
9. Popups
   • Custom popup implementation without third-party libraries. Modals can be triggered and managed using Redux actions.
   • To display a modal, dispatch an action with the modal name. For example:
     javascript

     dispatch(togglePopup('address'));

   • To pass data to the popup, include the data within the togglePopup action:
     javascript

     dispatch(
togglePopup({
popup: 'address',
popupProps: { address }, // pass the data here
}),
);

   • To close any popup, dispatch the closePopup action. All related popup code can be found in:
     bash

     /resources/frontend/store/features/popup/popupSlice.ts


#