Guidelines

Liblary

• Use react-query for data fetching via useQuery and useMutation.
• Use shadcn/ui as the primary UI component library.
• Use react-hook-form for form handling.
• Use tailwindcss for styling.
• Use zustand 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

• build/: Docker build artifacts.

• dev-build/: Development build artifacts, such as webpack bundles and service worker files.

• 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/common/: Common utilities, global type, enum, constant e.g src/common/types/response.ts

• src/libs/: Libraries and utilities.

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

• src/validations-schema/: Declared validation schema e.g: src/validations-schema/index.validation.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(),
  });
};

export const useUserMutation = () => {
  return useMutation({
    mutationFn: (params: TUpdateUser) => updateUser(params),
  });
};

References

1) React Router

2) React Query

3) React Hook Form

4) Vite

5) Typescript

6) Tailwindcss

7) Shadcn UI

8) Zustand

9) React Google map

10) React Thermal Printer

11) React Toastify

12) Redux