| Skill | Core Concepts | Tools & Libraries | Key Techniques | Resources |
|---|---|---|---|---|
| HTML | Semantic HTML, accessibility (ARIA), DOM structure, forms, SEO-friendly markup, meta tags | HTML5 | Semantic tags (article, section, main), ARIA roles, structured data, form validation |
MDN HTML, web.dev/learn/html |
| CSS / SASS | Box model, specificity & cascade, Flexbox, CSS Grid, responsive design, CSS custom properties, BEM methodology, animations | CSS3, SASS/SCSS, PostCSS | CSS Grid layouts, Flexbox alignment, media queries, CSS variables, BEM naming convention, keyframe animations | MDN CSS, css-tricks.com, web.dev/learn/css |
| CSS Frameworks | Utility-first vs component-based approach, design tokens, theming system, tradeoffs of each | Tailwind CSS, Shadcn/ui, Daisy UI (utility-first) · Bootstrap, Material UI, Semantic UI (component-based) · Aceternity UI (animated) | Responsive utility classes, component composition, theme customization, dark mode, Tailwind config | Tailwind docs, Shadcn/ui docs |
| JavaScript | Event loop, closures, prototypal inheritance, async/await, Promises, ES6+ features, Web APIs (Fetch, DOM, Storage, History) | Vanilla JS | Destructuring, modules (import/export), error handling, event delegation, async patterns, optional chaining |
MDN JS, javascript.info, You Don't Know JS (book) |
| TypeScript | Static typing, type inference, generics, interfaces vs types, utility types (Partial, Pick, Omit), strict mode |
TypeScript, ts-node | Type narrowing, discriminated unions, generic constraints, mapped types, declaration files (.d.ts) |
TypeScript docs, Total TypeScript |
| React.js | Component model, virtual DOM, one-way data flow, reconciliation, hooks lifecycle, component composition | React 18+, React DevTools | Hooks (useState, useEffect, useCallback, useMemo, useRef), custom hooks, lifting state, Context API |
react.dev |
| Next.js | SSR, SSG, ISR, App Router vs Pages Router, React Server Components, file-based routing, API routes, middleware | Next.js 14+, Vercel | Server vs client components, route handlers, middleware, next/image, next/font, metadata API, streaming |
Next.js docs, Next.js Learn |
| Skill | Core Concepts | Tools & Libraries | Key Techniques | Resources |
|---|---|---|---|---|
| Authentication | Session vs token-based auth, JWT structure (header/payload/signature), OAuth 2.0 flow, OpenID Connect, refresh token rotation | Auth.js (NextAuth), Clerk, Passport.js, Firebase Auth | Social login (OAuth providers), JWT validation, protected routes, session management, refresh + access token pattern | Auth.js docs, OAuth 2.0 RFC |
| Frontend Security | XSS (stored/reflected/DOM), CSRF, clickjacking, CORS misconfiguration, Content Security Policy (CSP), iframe sandbox, input sanitization | DOMPurify, Helmet.js (Node side) | Sanitize user-generated HTML, configure CORS correctly, set CSP headers, use sandbox on iframes, avoid dangerouslySetInnerHTML |
OWASP Top 10, MDN Security, web.dev/secure |
| HTTPS & Cookie Security | TLS/SSL, mixed content errors, secure cookie attributes, localStorage vs cookie tradeoffs | Chrome DevTools (Security tab) | HttpOnly + Secure + SameSite=Strict cookie flags, avoid storing tokens in localStorage, HSTS |
OWASP Cookie Cheatsheet |
| Skill | Core Concepts | Tools & Libraries | Key Techniques | Resources |
|---|---|---|---|---|
| Payment Gateways | Payment flow (client → server → gateway), idempotency keys, webhook signature verification, PCI DSS awareness (never handle raw card data), test vs live keys | Stripe, Razorpay | Payment intents, server-side charge creation, webhook verification (stripe-signature), error handling, subscription + recurring billing |
Stripe docs, Razorpay docs |
| Skill | Core Concepts | Tools & Libraries | Key Techniques | Resources |
|---|---|---|---|---|
| WebSockets | Full-duplex TCP connection, WS handshake, event-driven model, connection lifecycle, rooms & namespaces | Socket.io, ws (Node), native WebSocket API |
Event emission, broadcasting to rooms, reconnection logic, authentication via handshake query/cookie | Socket.io docs, MDN WebSocket |
| Communication Patterns | When to use each: short polling (simple, wasteful), long polling (fallback), SSE (server→client streams), WebSocket (bidirectional), Webhooks (server-to-server async events) | EventSource (SSE), native fetch (polling), ngrok (webhook local testing) |
Long polling fallback, SSE for live feeds (news, notifications), webhooks for payment/CI events, choosing the right pattern for the use case | MDN SSE, web.dev/eventsource |
| WebRTC | Peer-to-peer media, signaling server role, ICE candidates, STUN/TURN servers, data channels | PeerJS, simple-peer, native WebRTC API |
Offer/answer model, ICE negotiation, video/audio streaming, screen sharing, NAT traversal via TURN | MDN WebRTC, WebRTC.org |
| Skill | Core Concepts | Tools & Libraries | Key Techniques | Resources |
|---|---|---|---|---|
| Redux | Flux architecture, single source of truth, reducer purity, middleware, selector memoization — use when state is complex and shared across many components | Redux Toolkit, RTK Query | Slices, createAsyncThunk, Thunks, createSelector, createApi, cache tag invalidation |
Redux docs, RTK Query docs |
| Lightweight State | Atom-based state, derived/computed state, avoiding prop drilling without Redux boilerplate — use for small-to-medium apps | Zustand, Jotai, Recoil | Zustand stores with actions, Jotai atoms + derived atoms, Recoil selectors; pick one per project | Zustand docs, Jotai docs |
| Server State | Client state vs server state distinction, stale-while-revalidate, cache invalidation, background refetching — replaces Redux for async data in most apps | TanStack Query (React Query), SWR | Query keys, mutations, optimistic updates, infinite queries, prefetching, invalidateQueries |
TanStack Query docs, SWR docs |
| Type-safe APIs | End-to-end type safety without schema/codegen, procedure-based API design, RPC pattern | tRPC + Zod | Routers, procedures (query/mutation), context & middleware, Zod input validation, Next.js adapter | tRPC docs |
| GraphQL | Declarative data fetching, schema definition, queries vs mutations vs subscriptions, fragments, normalized cache, N+1 problem | Apollo Client, URQL | Query composition, cache policies, optimistic UI, persisted queries, DataLoader (server-side) | Apollo docs, GraphQL.org |