# Check package.json for frontend
grep -E "react-query|@tanstack|zustand|zod" frontend/package.json

# Check requirements.txt for backend
grep -E "pydantic|httpx|tenacity" requirements.txt

## Library Check: [Problem Category]

**Problem:** [What you're trying to solve]

**Recommendation:** Use [library] instead of custom code

**Tradeoffs:**
| Factor | Library | Custom |
|--------|---------|--------|
| Bundle size | [X]KB | 0KB |
| Lines of code | ~[Y] lines | ~[Z] lines |
| Edge cases | Handled | Must implement |
| Maintenance | Community | Us |
| Onboarding | Documented | Custom docs needed |

**My recommendation:** [Library/Custom] because [reason]

Proceed with [library]?

/**
 * CUSTOM IMPLEMENTATION
 *
 * Chose custom over [library name] because:
 * - [Specific reason 1]
 * - [Specific reason 2]
 *
 * Revisit if:
 * - [Condition that would change this decision]
 * - Library matures / our needs change
 *
 * Lines of code: [X] | Estimated library equivalent: [Y] lines
 * Decision date: [YYYY-MM-DD]
 */

// DON'T write this (30+ lines):
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => { ... }, [deps]);

// DO write this (5 lines):
import { useQuery } from '@tanstack/react-query';

const { data, isLoading, error } = useQuery({
  queryKey: ['myData', params],
  queryFn: () => fetchMyData(params)
});

// DON'T write this (AbortController + stale check + cleanup):
const controllerRef = useRef();
const requestIdRef = useRef(0);
useEffect(() => {
  controllerRef.current?.abort();
  controllerRef.current = new AbortController();
  const requestId = ++requestIdRef.current;
  fetch(url, { signal: controllerRef.current.signal })
    .then(res => {
      if (requestId !== requestIdRef.current) return;
      setData(res);
    });
  return () => controllerRef.current?.abort();
}, [deps]);

// DO write this (React Query handles it):
const { data } = useQuery({
  queryKey: ['myData', params],
  queryFn: ({ signal }) => fetch(url, { signal }).then(r => r.json())
});

// DON'T write this (Context + useEffect + localStorage):
const [state, setState] = useState(() => JSON.parse(localStorage.getItem('key')));
useEffect(() => { localStorage.setItem('key', JSON.stringify(state)); }, [state]);

// DO write this (Zustand):
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(persist(
  (set) => ({ value: null, setValue: (v) => set({ value: v }) }),
  { name: 'my-storage' }
));

// DON'T write this (custom IntersectionObserver hook):
const [isVisible, setIsVisible] = useState(false);
const ref = useRef();
useEffect(() => {
  const observer = new IntersectionObserver(([entry]) => {
    setIsVisible(entry.isIntersecting);
  });
  if (ref.current) observer.observe(ref.current);
  return () => observer.disconnect();
}, []);

// DO write this:
import { useInView } from 'react-intersection-observer';
const { ref, inView } = useInView();

// DON'T write this (custom validation + state per field):
const [email, setEmail] = useState('');
const [emailError, setEmailError] = useState('');
const validate = () => { if (!email.includes('@')) setEmailError('Invalid'); };

// DO write this:
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({ email: z.string().email() });
const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema)
});