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 react-google-maps for map.

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/app/_components/: Components within the module.

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

• src/constant/: Declared constants.

• src/data: Declared dummy data.

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

• src/lib/: Libraries and utilities.

• src/store/: Store and state management or provider.

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

• src/utils: Declared utilities.

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),
  });
};