Short Explanation

Project Goals

1. Administrator: Take charge of user management, validating KKKS and vendor accounts. Access insightful analytics through a comprehensive dashboard, providing transaction insights and vendor performance metrics.

2. Vendors: Boost promotional efforts with control over vendor landing page. Effortlessly manage product data by adding new items, updating listings, organizing categories, and refining product specifications.

3. KKKS: Simplify a purchasing journey with easy-to-use features. Manage a shopping cart, access a convenient checkout page, and effortlessly manage shipping addresses. Seamlessly make payments, receive invoices for transactions, and provide ratings after receiving the purchased goods.

Tech Stack Used

Spotlight

The Problems and How I Solved It

• Adoption of TypeScript: I recommended incorporating TypeScript into the project. By introducing static typing, we could improve code quality, catch errors early during development, and enhance collaboration within the team. TypeScript would bring a level of clarity and safety to the codebase, making it easier to understand and maintain in the long run.

• To improve form handling and validation, I propose using Zod and React Hook Form instead of Yup and Formik. Zod's versatility in validating API data responses and providing robust type inference for TypeScript offers several advantages. Adopting Zod and React Hook Form would not only improve the overall developer experience but also promote consistency and reliability in our form handling and API data validation processes. This enhancement aligns with our goal of creating a cleaner and more maintainable codebase while leveraging the benefits of TypeScript's strong typing throughout the project.

• Restructuring the project: I emphasized the importance of reevaluating the project's structure. With the current messy codebase, refactoring and organizing the files, folders, and components would greatly enhance maintainability and scalability.

• Improvement in use of React Query: with React Query, we didn't need to use native react hooks like useState and useEffect anymore as it was already handled by them. Take a look at this code, and yes I took it from this project codebase.

const cartKey = 'cart';

const getCart = async () => {
  const response = await authorizedClient.get('cart/get');
  return response.data;
};

export const useGetCart = () => {
  return useQuery([cartKey, 1], async () => await getCart());
};

const [getCarts, setGetCarts] = useState([]);
const getCart = useGetCart();

useEffect(() => {
    if (getCart.isSuccess) {
      setGetCarts(getCart.data.data);
    }
  }, [getCart?.data?.data, getCart.isSuccess]);

useEffect(() => {
    if (
      getCart &&
      getCart.data &&
      getCart.data.data &&
      getCart.data.data.length > 0
    ) {
      setGetCarts(getCart.data.data);
    }
  }, [getCart]);

I fix it into this

const { data, isLoading } = useGetCart();

const cartKey = 'cart';

const getCart = async () => {
  const response = await httpClient.get('cart/get');

  return getCartSchema.parse(response.data.data); //parsing response with Zod
};

export const useGetCart = () => {
  const { data, isLoading } = useQuery({
    queryKey: [cartKey],
    queryFn: async () => await getCart(),
  });

  return { data, isLoading };
};

Lesson Learned