Guidelines

Liblary

• Use react-query for data fetching via useQuery and useMutation.
• Use ant design as the primary UI component library.
• Use react-hook-form for form handling.
• Use tailwindcss for styling.
• Use Redux for state management.
• Use react-router-dom for routing.
• Use react-geocode for geocoding.
• Use react-thermal-printer for thermal printing.

Naming Convention

• Use kebab-case for file naming and context-aware hooks (e.g., use-users-query.ts).

Engineering Principle

1. Start Simple

   Begin with simple, minimal implementations. Avoid breaking components apart unless necessary.

2. Component Simplicity

   Keep components focused and minimal. Prioritize readability and maintainability.

3. Coupling and Cohesion

   • Low Coupling:

     Avoid tangled connections between unrelated modules.
     ❌ Example of bad practice: importing functions from the login page into the users page.

   • High Cohesion:

   Group code logically based on its functionality.
   ❌ Poor example: inconsistent or unclear folder structures.

   ✅ Good example: if a type, enum, or utility is only used within a single component, colocate it with that component.
   - Example:

   • src/app/_components/menu

   • index.tsx

   • type.tsx

   • util.tsx

   • ref: Coupling and Cohesion.

4. One Hook, One Purpose

   • Avoid overloading hooks. Each custom hook should serve a single, clear purpose. Keep it clean, readable, and easy to maintain.

Structure Folder

• public/: Static assets, such as images, fonts, and favicon.

• src/: Application logic, including components, pages, and API routes.

• src/components/: Shared components.

• src/context: Shared context.

• src/hooks: Shared hooks or declare custom hooks.

• src/pages/_components/:Components within the module.

• src/pages/_hooks: Hooks within the module.

• src/routes/private/: Components and pages requiring authentication. See Modules Structure for more details.

• src/services/api/: API and its type definitions.

• src/libs/: Libraries and utilities.

• src/types/: Declared type e.g: src/types/react-slider.d.ts

Write API request

Example :

export const getLocation = async (
  params: TGetLocation
): Promise<TResponse<TLocationResponse>> => {
  const res = await ApiClient.get("/api-endpoint", {
    params,
  });
  return res.data;
};

Write Hook react query

Example :

export const useUserQuery = () => {
  return useQuery({
    queryKey: ["users"],
    queryFn: () => getUser(),
  });
};

References

1) React Router

2) Tailwind CSS

3) React Hook Form

4) React Query

5) Ant Design

6) Zustand

7) React Google map

8) Axios