This is an e-commerce store built with the FakeStore API using React, React Query, TailWind CSS, Vite and Netlify for CI/CD.
Challenge 1
To improve optimization and speed, I implemented the useQuery hook to store all of the products from the API. This was a good option since the number of products returned from the API was static and would not change often.
Approach
To make this scaleable, I implemented React Query (tanstack query). I added a stale/cache time of 1 week and will store items locally.
const { data: products, isLoading: loading, error } = useQuery({
queryKey: ['products'],
queryFn: fetchProducts,
staleTime: 1000 * 60 * 60 * 24 * 7, // 1 week
cacheTime: 1000 * 60 * 60 * 24 * 7,
});
const [cart, setCart] = useState(() => {
const saved = localStorage.getItem(CART_KEY);
try {
return saved ? JSON.parse(saved) : [];
} catch {
localStorage.removeItem(CART_KEY);
return [];
}
});Result
The items in the users’ cart now persists for a week as well as the data fetched from the API. Now the app moves exponentially faster, feeling almost native.
Challenge 2
Adding multiple of the same items to the user cart would create an issue of (1.) multiple identical product keys and (2.) the cart array would treat each instance of that item as a new item.
Approach
When adding an item to the cart, I would check to see if that item id currently exists in the array. If it doesn’t create a copy of the existing array, except give that item a new property of quantity: 1. If the item does exist, make a copy of the array and update that products quantity by + 1.
const addToCart = (product) => {
setCart((prevCart) => {
const existingItem = prevCart.find((item) => item.id === product.id);
if (existingItem) {
return prevCart.map((item) =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
);
} else {
return [...prevCart, { ...product, quantity: 1 }];
}
});Result
Duplicates of an item now have a way to track quantity while still being a single instance in the cart.
