libraries-dependencies-mastery

Libraries & Dependencies Mastery

Overview

You are an expert in modern web development libraries and their integration. This skill provides complete mastery of the essential libraries powering modern full-stack applications: Next.js, React, TypeScript, Tailwind CSS, Firebase, State Management (Zustand, Redux Toolkit), Forms (react-hook-form, Zod), UI/UX (shadcn/ui, lucide-react), and Payments (Stripe). Learn setup, configuration, integration patterns, advanced usage, performance optimization, troubleshooting, version management, and common pitfalls.

Core Library Mastery

1. Next.js 13+ Complete Mastery

Setup & Configuration:

• Installation and project initialization
• tsconfig.json configuration for strict TypeScript
• next.config.js customization
• Environment variables (.env, .env.local, .env.production)
• Path aliases (@/ imports)
• Monorepo setup with workspaces

App Router (Next.js 13+):

• File-based routing structure
• Route segments and dynamic routes ([id], [...slug])
• Route groups and layouts ((auth), (dashboard))
• Parallel routes and intercepting routes
• Loading states and error boundaries
• Not found and error.js pages
• Middleware and request handling
• Route handlers (GET, POST, PUT, DELETE, PATCH)
• Server Components vs Client Components
• Suspense and streaming
• Data fetching patterns (fetch, cache tags)
• Revalidation strategies (ISR, on-demand)

Performance Optimization:

• Image optimization with next/image
• Font optimization
• Script optimization and loading strategies
• Dynamic imports with React.lazy
• Code splitting and bundle analysis
• CSS optimization and minification
• Compression and gzip
• CDN configuration

Common Pitfalls & Solutions:

• Hydration mismatches (Server vs Client)
• Using client-only features in Server Components
• Incorrect caching strategies
• Image optimization issues
• Font loading performance
• Dynamic routes not rendering statically
• Environment variable scope

Troubleshooting Guide:

Issue: "Cannot find module" in builds
Solution: Check tsconfig paths, clear .next folder, rebuild

Issue: Hydration mismatch error
Solution: Use dynamic imports, wrap client code, check useEffect

Issue: Images not optimizing
Solution: Use next/image, configure domains, check sizes

Issue: Build time too long
Solution: Analyze with `next/bundle-analyzer`, use dynamic imports

Issue: Environment variables undefined
Solution: Prefix with NEXT_PUBLIC_ for client, restart dev server

Version Management:

• Upgrading from Pages Router to App Router
• Breaking changes between versions
• Migration guides
• Beta features and deprecations
• Staying updated with releases

2. React 18+ Complete Mastery

Hooks Deep Dive:

• useState: State management, state updates, batching
• useEffect: Side effects, cleanup, dependencies, common pitfalls
• useContext: Context creation, avoiding prop drilling
• useReducer: Complex state logic, reducer patterns
• useCallback: Memoization, dependency arrays
• useMemo: Expensive computations, memory management
• useRef: DOM access, persistent values, .current
• useLayoutEffect: DOM layout measurements
• useTransition: Concurrent rendering, isPending state
• useDeferredValue: Value debouncing, input optimization
• useId: Unique identifiers, accessibility
• useImperativeHandle: Custom instance values

Component Patterns:

• Functional components with hooks
• Custom hooks development and reusability
• Compound components
• Render props pattern
• Higher-order components
• Provider pattern
• Controlled vs uncontrolled components
• Composition over inheritance

Performance Optimization:

• React.memo for preventing rerenders
• useCallback with dependencies
• useMemo for expensive operations
• Lazy loading with React.lazy and Suspense
• Code splitting strategies
• List rendering with keys (importance of stable keys)
• Avoiding unnecessary renders
• Profiler API for performance measurement

Concurrent Features:

• Suspense boundaries
• useTransition for non-blocking updates
• useDeferredValue for value debouncing
• Streaming and progressive rendering
• Automatic batching of state updates

Common Pitfalls & Solutions:

• Missing dependency in useEffect
• Stale closures in hooks
• Memory leaks in useEffect
• Infinite loops with useEffect
• Using hooks conditionally
• Not returning cleanup functions
• Incorrect memo dependencies
• State batching confusion

Troubleshooting Guide:

Issue: Infinite loop in useEffect
Solution: Check dependencies, add return cleanup function

Issue: Stale state in callback
Solution: Include state in dependencies or use useCallback

Issue: Memory leak warning
Solution: Add cleanup function to useEffect, unsubscribe

Issue: Component rerending unnecessarily
Solution: Use React.memo, useCallback, useMemo

Issue: Hydration error with useId
Solution: Use proper key prop, wrap in Suspense

3. TypeScript Complete Mastery

Fundamentals:

• Primitive types (string, number, boolean, null, undefined)
• Union types and intersection types
• Type literals and literal types
• Enums and const assertions
• Type aliases vs interfaces
• Extending types and interfaces
• Optional properties (?) and nullish coalescing (??)

Advanced Types:

• Generic types and constraints
• Conditional types (extends ? :)
• Mapped types (Record, Partial, Required, etc.)
• Utility types (Pick, Omit, Exclude, Extract, etc.)
• Discriminated unions for exhaustive checking
• Type guards and type predicates (is keyword)
• Const type parameters
• Template literal types

React + TypeScript:

• Component prop typing
• Event handler typing
• Ref typing with Ref<HTMLInputElement>
• useState with initial values and TypeScript
• useReducer with typed actions
• useContext with typed values
• Custom hook typing
• Children prop typing

Common Patterns:

// Discriminated union
type Action = 
  | { type: 'ADD'; payload: Item }
  | { type: 'REMOVE'; payload: string };

// Generic component
function List<T extends { id: string }>(props: { items: T[] }) {}

// Type guard
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// Utility type usage
type User = { name: string; age: number; email: string };
type UserPreview = Pick<User, 'name' | 'age'>;

Configuration:

• tsconfig.json strict mode
• CompilerOptions for strict type checking
• Path mapping and aliases
• Module resolution settings
• Declaration file generation

Common Pitfalls & Solutions:

• Type inference failures
• Type assertion misuse
• Any type overuse
• Incorrect generic constraints
• Missing type definitions
• Circular type dependencies

Troubleshooting Guide:

Issue: Type 'X' is not assignable to type 'Y'
Solution: Check property names, use type assertion carefully, review interfaces

Issue: Cannot find name 'X'
Solution: Check imports, verify tsconfig paths, check node_modules

Issue: Property 'X' doesn't exist on type 'Y'
Solution: Check types, update interfaces, verify external package types

Issue: Generic type 'T' is too complex
Solution: Add constraints, break into simpler types, use keyof

4. Tailwind CSS Complete Mastery

Core Concepts:

• Utility-first CSS methodology
• JIT (Just-In-Time) compilation
• Responsive design with breakpoints (sm, md, lg, xl, 2xl)
• Hover, focus, and other state variants
• Dark mode implementation (class and prefers-color-scheme)
• Custom configuration (colors, spacing, fonts)
• Arbitrary values ([width: 343px])
• CSS layers and specificity

Configuration & Customization:

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#your-color',
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
  plugins: []