Frontend Drill for e-commerce product page #1

Code Example

// Custom hook
function usee-commerceproductpageFilter() {
  const [filters, setFilters] = useState({});
  const filtered = useMemo(() => 
    applyFilters(data, filters), 
    [data, filters]
  );
  return { filtered, setFilters };
}

// improve component reusability

Commands & References

• npm create vite@latest my-app
• npm run build
• element.addEventListener('click', handler)

Lab Steps

1. Set up with: npm create vite@latest my-app
2. Build or refactor the component for the scenario.
3. Validate accessibility and performance.
4. Propose one improvement for production.

Exercises

• Add one accessibility enhancement.
• Implement one performance optimization.
• Write one unit test for this component.