Interview Prep Skill Matrix - rs-hash/GETTHATJOB GitHub Wiki
| Group | Tech/Skill | Basic | Medium | Advanced |
|---|---|---|---|---|
| Core Web | HTML-5 | - Semantic tags: <header>, <main>, <footer>- Document structure - Forms basics - Text elements - Lists, images, tables - Global attributes |
- Input attributes (required, pattern, autocomplete)- Media: <audio>, <video>- Meta tags - ARIA roles - HTML5 APIs ( localStorage, Drag/Drop)- Responsive images ( srcset, <picture>) |
- Accessibility deep dive (WAI-ARIA, keyboard nav) - Form validation API - Web Components (shadow DOM, slots) - CSP implications - Performance (reflow/repaint minimization) - Progressive enhancement |
| CSS3 (Flexbox, Grid, etc.) | - Selectors, specificity - Box model, positioning - Flexbox basics - Media queries - Transitions/animations |
- Grid layout - Pseudo-elements/states - Responsive design patterns - CSS variables - CSS functions ( calc, clamp) |
- Complex grid/flex patterns - Container queries - CSS Houdini - Critical CSS & performance - CSS-in-JS tradeoffs - Advanced animations |
|
| JavaScript (ES6+) | - Variables (let, const)- Functions/arrow functions - Loops, conditionals - Array & object methods - Template literals - Destructuring |
- Classes, inheritance - Promises, async/await - Modules ( import/export)- Closures & scope - this binding- Event loop basics |
- Generators & Iterators - Proxies & Reflect - WeakMap/WeakSet - Advanced async (microtasks/macrotasks) - Memory leaks - Performance tuning |
|
| DOM Manipulation | - Selectors (querySelector)- Modifying elements - Event listeners - Forms/events |
- Event delegation - MutationObserver - DOM traversal - dataset usage |
- Virtual DOM concepts - Shadow DOM - Custom elements - Large DOM perf optimizations |
|
| Web Accessibility (a11y) | - Alt text - Labels - Semantic markup |
- Keyboard navigation - ARIA roles/landmarks - Color contrast |
- WCAG guidelines - Screen reader testing - Advanced ARIA patterns (live regions, dialogs) - Automated tooling (axe-core, Lighthouse) |
|
| SEO Basics for SPA | - Meta tags - Sitemap basics - Title/description |
- Structured data (JSON-LD) - Canonical URLs - SSR for SEO |
- Advanced SEO for SPAs (hydration, prerendering) - Edge SEO strategies - Lighthouse SEO scoring |
|
| CSS Preprocessors (SASS, LESS) | - Variables, nesting | - Mixins, extends - Partials/imports |
- Functions, loops - Architecture (BEM, SMACSS, ITCSS) |
|
| Browser Rendering / Reflow | - Paint, reflow basics | - Compositing - GPU acceleration |
- Rendering pipeline deep dive - Performance profiling |
|
| Virtual DOM / Diffing Algorithm | - React’s virtual DOM concept | - Diffing heuristics | - Internals of reconciliation (Fiber) | |
| SSR vs CSR vs Hydration | - Definitions | - Tradeoffs | - Next.js hydration perf - Streaming SSR |
|
| Frameworks | React (Hooks, Context, etc.) | - JSX - Props/state - Basic hooks ( useState, useEffect) |
- Context API - Custom hooks - useReducer
|
- Concurrent features - Suspense - Refs & portals - Advanced patterns (render props, HOCs) |
| Components Development | - Functional components - Props, children - JSX rendering |
- Controlled/uncontrolled components - Form components - Compound components |
- Render props, HOCs - Portals, advanced composition - Accessibility-first component design |
|
| Next.js | - Pages, routing - API routes |
- Data fetching (getStaticProps, getServerSideProps)- Image optimization |
- Middleware - Edge runtime - App router & React Server Components |
|
| Redux / Zustand / Context API | - Store basics - Actions/reducers |
- Middleware (thunks, sagas) - Zustand basics |
- RTK Query - Normalized caching - Large-scale state architecture |
|
| React Concurrent Features | - Suspense basics | - Concurrent rendering - Transitions |
- Streaming SSR + Suspense boundaries | |
| Vue.js / Angular (Optional) | - Directives, components - CLI basics |
- Vuex/NgRx - Lifecycle hooks |
- Advanced reactivity - Angular DI system |
|
| Type Systems | TypeScript | - Types, interfaces - Basic generics |
- Utility types - Type narrowing - Declaration merging |
- Advanced generics - Conditional types - Compiler internals |
| Testing | Jest | - Unit tests - Matchers |
- Mocks - Coverage |
- Custom matchers - Performance testing |
| React Testing Library | - Render components - Queries |
- Events - Async utils |
- Accessibility testing - Advanced patterns |
|
| Cypress / Playwright (E2E) | - Selectors - Assertions |
- Fixtures - API mocking |
- Parallelization - CI scaling - Flake mitigation |
|
| Vitest | - Test setup - Assertions |
- Mocks - Coverage |
- Advanced config - Integration with Vite plugins |
|
| Mocking Strategies | - Manual mocks | - Jest/RTL mocks - MSW |
- Complex mocking (websockets, streams) | |
| Test Pyramid | - Unit testing concept | - Integration tests | - Strategy balancing, cost-effectiveness | |
| Performance | Lighthouse / Core Web Vitals | - Run audits | - Analyze metrics | - Optimize LCP/FID/CLS at scale |
| Lazy Loading / Code Splitting | - Dynamic imports | - React.lazy - Route-based splitting |
- Granular splitting - Bundle optimization |
|
| React Memo / useMemo / useCallback | - Shallow memoization | - Prevent re-renders | - Profiling + fine-grained optimization | |
| Hydration Performance | - Basic hydration | - Next.js hydration tuning | - Streaming + partial hydration | |
| Bundle Analysis / Tree Shaking | - Source maps | - Webpack Bundle Analyzer | - Advanced tree shaking - Module federation |
|
| Build Tools | Webpack | - Config basics | - Loaders, plugins | - Custom plugins - Federation |
| Vite | - Dev server | - Plugins | - SSR, HMR internals | |
| Babel | - Transpilation | - Polyfills | - Custom plugins | |
| ESLint / Prettier | - Linting basics | - Custom rules | - CI/CD integration | |
| Module Federation | - Concept | - Setup | - Micro-frontends | |
| State Mgmt | Redux Toolkit | - configureStore
|
- createSlice
|
- Advanced async workflows |
| Zustand | - Store basics | - Middleware | - Large-scale usage | |
| React Query / SWR | - Fetch basics | - Query cache | - Infinite queries, mutations | |
| Data Normalization | - Basics | - Libraries | - Complex schemas | |
| Networking | REST APIs | - CRUD calls | - Pagination - Auth headers |
- Error retries - Circuit breakers |
| GraphQL | - Queries/mutations | - Apollo basics | - Subscriptions - Caching |
|
| Axios / Fetch | - GET/POST | - Interceptors | - Custom adapters | |
| Caching Strategies | - Browser cache | - SWR cache | - CDN + stale-while-revalidate | |
| WebSockets | - Connection basics | - Events, rooms | - Scaling + perf | |
| WebRTC (optional) | - Basics | - Peer connections | - Advanced signaling | |
| Styling | CSS Modules | - Import usage | - Scoped styles | - Composition |
| Tailwind CSS | - Utility classes | - Responsive utilities | - Config + theming | |
| Styled Components / Emotion | - Tagged templates | - Props-based styling | - Theming + perf | |
| Theme UI / Chakra UI | - Components | - Theme overrides | - Extending + accessibility | |
| Forms | React Hook Form | - Setup, validation | - Controlled components | - Resolver integrations |
| Formik | - Fields, errors | - Yup validation | - Complex dynamic forms | |
| Zod / Yup Validation | - Schemas | - Async validation | - Type inference with TS | |
| CI/CD & DevOps | Git / GitHub | - Branching | - PRs, merge strategies | - Rebase vs squash, advanced workflows |
| GitHub Actions | - Basic workflows | - Matrix builds | - Caching, secrets, deploys | |
| Docker Basics | - Images, containers | - Compose | - Multi-stage builds | |
| Testing Infra | Mock Service Worker (MSW) | - Handlers | - Integration with Jest | - Complex mocking (GraphQL, SSE) |
| CI Testing Strategy | - Run tests | - Parallel jobs | - Test shards, caching | |
| Authentication | JWT / OAuth2 | - JWT basics | - Refresh tokens | - PKCE, OIDC |
| Auth0 / Firebase Auth | - Setup | - Rules/hooks | - Advanced RBAC/ABAC | |
| Security | XSS / CSRF Prevention | - Input sanitization | - Tokens | - CSP, SRI |
| Content Security Policy (CSP) | - Basics | - Directives | - Advanced enforcement | |
| Code Quality | Code Splitting | - Basic imports | - Route-level | - Granular dynamic |
| Linting & Formatting | - Setup | - Team configs | - Custom rules/plugins | |
| Unit / Integration / E2E Testing | - Basics | - Coverage strategy | - Balancing ROI | |
| Soft Skills | System Design Basics (FE focus) | - Component diagrams | - Data flow | - Scalability + perf |
| Architecture Decisions (FE) | - State vs props | - Tradeoffs | - Micro-frontends, monorepos | |
| Mentorship & Code Reviews | - PR reviews | - Coaching | - Leading teams | |
| Collaboration with Backend / Design Teams | - Handoffs | - Joint debugging | - Cross-team architecture | |
| Others | Monorepo Tools (Nx / Turborepo) | - Setup | - Pipelines | - Caching + scaling |
| Storybook | - Docs | - Controls | - Visual regression | |
| Internationalization (i18n) | - Static translations | - ICU messages | - Dynamic loading | |
| PWA (Service Workers) | - Manifest | - Offline caching | - Push sync, background tasks | |
| Mobile Web Optimization | - Viewport | - Responsive images | - Perf at scale | |
| Framer Motion / GSAP | - Basic animations | - Transitions | - Advanced sequences | |
| Push Notifications / Web Push API | - Request permission | - Show notification | - Background sync | |
| Micro-frontends | - Concept | - Routing integration | - Module federation + scaling | |
| Algorithms & Data Structures | Arrays & Strings | - Traversal, reversing - String methods |
- Sliding window - Two pointers - Sorting |
- KMP, Rabin-Karp - Substring search - Optimized rotations |
| Linked List | - Creation, traversal | - Reversal - Fast/slow pointers |
- Detect cycle - Skip lists |
|
| Stacks & Queues | - Push/pop - FIFO |
- Min/max stack - Circular queue |
- Monotonic stack/queue - Priority queue |
|
| Trees | - Traversal (DFS/BFS) | - Binary search tree - Level order |
- Tries, Segment Trees - AVL, Red-Black |
|
| Graphs | - Representation - BFS/DFS |
- Dijkstra, Topo sort | - A*, Floyd-Warshall - Network flow |
|
| Algorithms (General) | - Big-O notation - Recursion |
- Divide & conquer - Greedy - Binary search variants |
- Dynamic programming - Backtracking - Graph algorithms |
|
| Sample Projects | Beginner | - Todo app - Weather app (API fetch) - Responsive landing page |
||
| Intermediate | - E-commerce SPA (cart, checkout) - Blog with Markdown + Auth - Chat app with WebSockets |
|||
| Advanced | - Full-stack dashboard (Next.js + GraphQL) - Micro-frontend architecture demo - PWA with offline sync + push |