JavaScript Core (The Foundation)
- Execution Context & Call Stack
- Hoisting (var vs let/const, TDZ)
- Closures & Lexical Scope
- Scope Chain & Shadowing
- Event Loop
- Microtask Queue vs Macrotask Queue (Callback Queue)
- Promises, async/await, [Link], [Link], [Link], [Link]
- Prototypes & Prototypal Inheritance
- this keyword (Default, Implicit, Explicit, Arrow)
- call, apply, bind
- Debouncing & Throttling
- Currying & Partial Application
- Deep Copy vs Shallow Copy
- Event Delegation, Bubbling & Capturing
- Generators & Iterators
- WeakMap, WeakSet, WeakRef
- Symbol & its use cases
- Proxy & Reflect
- Nullish Coalescing (??) vs Optional Chaining (?.)
- Polyfills (map, filter, reduce, bind, [Link])
# Rendering Strategies
- CSR (Client Side Rendering)
- SSR (Server Side Rendering)
- SSG (Static Site Generation)
- ISR (Incremental Static Regeneration)
- Hydration & Partial Hydration
- Streaming SSR
- Edge Rendering
# Web Performance & Vitals
- FCP (First Contentful Paint)
- LCP (Largest Contentful Paint)
- TTI (Time to Interactive)
- CLS (Cumulative Layout Shift)
- INP (Interaction to Next Paint)
- TTFB (Time to First Byte)
- Lighthouse Auditing & CI Integration
- Lazy Loading (Images, Components, Routes)
- Image Optimization (srcset, WebP, AVIF, Blur Placeholders)
- Font Optimization (font-display, preload, subsetting)
- Critical Rendering Path
- Resource Hints (preload, prefetch, preconnect, dns-prefetch)
# Bundling, Build Tools & Architecture
- Webpack (Entry, Output, Loaders, Plugins)
- Vite (Why Faster, ESM-based Dev Server, HMR)
- Tree Shaking (Dead Code Elimination, sideEffects flag)
- Code Splitting (Dynamic Imports, Route-based Splitting)
- Module Federation (Webpack 5, Remote/Host Apps)
- Micro Frontends (Architecture Patterns, When to Use)
- Monorepo (Nx, Turborepo, Build Caching)
- Babel & Transpilation
- Source Maps (Debugging Production)
- Environment Variables & Build Configs
# CSS & UI Engineering
- CSS Specificity & Cascade
- Box Model (content-box vs border-box)
- Flexbox (All Properties, Common Layouts)
- CSS Grid (Template Areas, auto-fill vs auto-fit)
- Positioning (static, relative, absolute, fixed, sticky)
- CSS-in-JS vs CSS Modules vs Tailwind (Trade-offs)
- Responsive Design & Media Queries
- Container Queries
- CSS Variables (Custom Properties)
- Animations & Transitions (keyframes, will-change, GPU acceleration)
- BEM Methodology
- Design System Architecture (Tokens, Theming)
- z-index & Stacking Context
# Networking, APIs & Security
- REST API Design
- GraphQL (Queries, Mutations, Subscriptions)
- GraphQL Caching with Apollo (Normalized Cache, Cache Policies)
- WebSockets vs SSE vs Long Polling
- CORS (Preflight, Access-Control Headers, Proxy)
- HTTP/1.1 vs HTTP/2 vs HTTP/3
- Authentication (JWT, OAuth 2.0, Sessions, Cookies)
- XSS (Cross-Site Scripting) — Prevention
- CSRF (Cross-Site Request Forgery) — Prevention
- Content Security Policy (CSP)
- HTTPS, TLS, SSL Basics
- Service Workers & PWA Basics
# Debugging & DevTools
- Chrome DevTools — Elements Tab
- Chrome DevTools — Console
- Chrome DevTools — Network Tab
- Chrome DevTools — Performance Tab
- Chrome DevTools — Debugger
- Chrome DevTools — Application Tab
- React DevTools & Profiler
- Memory Leaks Detection (Heap Snapshots, Detached DOM)
- Lighthouse Performance Auditing
# React & Framework Concepts
- Virtual DOM & Reconciliation Algorithm
- React Fiber Architecture
- React Lifecycle (Class + Hooks)
- useState, useEffect, useRef, useCallback, useMemo
- useReducer vs useState
- Custom Hooks (useDebounce, useFetch, useClickOutside, usePrevious)
- [Link] vs useMemo vs useCallback
- Context API (When It's Enough, When It's Not)
- Redux (Flux Pattern, Middleware, Thunk, Saga)
- Zustand / Recoil / Jotai
- Controlled vs Uncontrolled Components
- React Suspense & Error Boundaries
- React Server Components (RSC)
- Higher Order Components (HOC)
- Render Props Pattern
- Compound Component Pattern
- React Portal
- Ref Forwarding
- Code Splitting with [Link] & Suspense
- React Strict Mode (Double Rendering & Why)