HTML Sitemap
A complete index of all learning materials, courses, coding challenges, and study resources on DeepFrontend.
General Portals
Company Prep Guides
Learning Paths & Roadmaps (25)
- Foundations & Tooling(11 topics)
- HTML(11 topics)
- CSS(16 topics)
- JavaScript(23 topics)
- TypeScript(15 topics)
- React(25 topics)
- State Management(4 topics)
- Redux Ecosystem(19 topics)
- Next.js(18 topics)
- Node.js(16 topics)
- Express.js(11 topics)
- Databases(14 topics)
- GraphQL(9 topics)
- API Development(13 topics)
- Web Security(7 topics)
- PWA & Offline(5 topics)
- Testing(9 topics)
- Frontend Performance(11 topics)
- Frontend Architecture(11 topics)
- Backend for Frontend (BFF)(4 topics)
- DevOps & Deployment(5 topics)
- AI for Frontend Developers(10 topics)
- System Design(25 topics)
- Interview Prep(5 topics)
- Data Structures & Algorithms(18 topics)
The Forge Practice Arena (133)
- Implement debouncefree
- Implement throttlepaid
- Implement curryfree
- Implement Promise.all from scratchpaid
- Implement a deep clonepaid
- Implement an event emitterpaid
- Implement memoizepaid
- Implement async retry with exponential backoffpaid
- fetchJson: fetch with proper error handlingfree
- Validate & Coerce Model Tool Callsfree
- Implement myMap (Array.prototype.map)free
- Implement myFilter (Array.prototype.filter)free
- Implement myReduce (with and without an initial value)paid
- Implement myForEach (Array.prototype.forEach)free
- Implement myFind (Array.prototype.find)paid
- Implement mySome (Array.prototype.some)paid
- Implement myEvery (Array.prototype.every)paid
- Implement myFlat (Array.prototype.flat)paid
- Implement myFlatMap (Array.prototype.flatMap)paid
- Implement myCall (Function.prototype.call)free
- Implement myApply (Function.prototype.apply)free
- Implement myBind (Function.prototype.bind)paid
- Implement myRace (Promise.race)paid
- Implement myAllSettled (Promise.allSettled)paid
- Implement myAny (Promise.any)paid
- Implement promisify(callbackFn)paid
- Build a mini Promise from scratch (MyPromise)paid
- Implement myObjectAssign (Object.assign)free
- Implement myEntries (Object.entries)free
- Implement myFromEntries (Object.fromEntries)free
- Implement deepFreezepaid
- Implement myInstanceofpaid
- Implement myNew (the new operator)paid
- Implement getType (precise type detection)paid
- Implement once(fn)free
- Implement pipe and composepaid
- Implement partial(fn, ...presetArgs)free
- Implement negate(predicate)free
- Implement groupBy(arr, keyFn)paid
- Implement keyBy(arr, keyFn)free
- Implement countBy(arr, keyFn)free
- Implement partition(arr, predicate)paid
- Implement chunk(arr, size)free
- Implement uniqueBy(arr, keyFn)paid
- Implement pick(obj, keys)free
- Implement omit(obj, keys)free
- Implement mapValues(obj, fn)paid
- Implement invert(obj)free
- Implement zip(...arrays)paid
- Implement unzip(arr)paid
- Implement range(start, end, step)free
- Implement get(obj, path, defaultValue)paid
- Implement set(obj, path, value)paid
- Implement mergeDeep(a, b)paid
- Implement flattenDeep(arr)paid
- Implement deepEqual(a, b)paid
- Implement intersectionBy, differenceBy, unionBypaid
- Implement orderBy(arr, keys, dirs)paid
- Implement normalize(list, idKey)paid
- Implement paginate(arr, options), offset and cursor modespaid
- Implement buildTree(flatNodes, idKey, parentKey)paid
- Implement flattenTree(nodes, childrenKey)paid
- Implement fetchWithTimeout(fetch, url, ms)paid
- Implement fetchWithRetry(fetch, url, options)paid
- Implement dedupeInFlight(fetch)paid
- Implement withCache(fetch, ttl)paid
- Implement fetchAllPages(fetch, url)paid
- Implement transformResponse(raw)paid
- Implement paginateAndSort(fetch, url, sortKey)paid
- Implement mapLimit(items, n, asyncFn)paid
- Implement parallel(tasks)paid
- Implement series(tasks)paid
- Implement optimisticUpdate(store, mutate, fetch)paid
- Implement buildApiClient(fetch, baseUrl)paid
- Implement verifyWebhookSignature(body, signature, secret, hmacSha256)paid
- Two Sumfree
- Contains Duplicatefree
- Best Time to Buy and Sell Stockfree
- Maximum Subarray (Kadane's Algorithm)free
- Product of Array Except Selfpaid
- Majority Element (Boyer-Moore)free
- Move Zeroesfree
- Valid Anagramfree
- Valid Palindromefree
- Group Anagramspaid
- Longest Substring Without Repeating Characterspaid
- First Unique Character in a Stringfree
- Longest Common Prefixfree
- 3Sumpaid
- Container With Most Waterpaid
- Sort Colors (Dutch National Flag)paid
- Maximum Average Subarray (Fixed Window)free
- Valid Parenthesesfree
- Min Stack (Design)paid
- Evaluate Reverse Polish Notationpaid
- Daily Temperatures (Monotonic Stack)paid
- Binary Searchfree
- Search in Rotated Sorted Arraypaid
- First Bad Versionfree
- Reverse Linked Listfree
- Linked List Cycle (Floyd's Algorithm)free
- Merge Two Sorted Listsfree
- Middle of the Linked Listfree
- Remove Nth Node From End of Listpaid
- Maximum Depth of Binary Treefree
- Invert Binary Treefree
- Binary Tree Level Order Traversalfree
- Validate Binary Search Treepaid
- Lowest Common Ancestor of a Binary Treepaid
- Diameter of Binary Treepaid
- Symmetric Treepaid
- Number of Islandsfree
- Flood Fillpaid
- Course Schedulepaid
- Clone Graphpaid
- Kth Largest Element in an Arrayfree
- Top K Frequent Elementspaid
- K Closest Points to Originpaid
- Merge Intervalsfree
- Insert Intervalpaid
- Meeting Roomspaid
- Climbing Stairsfree
- Coin Changepaid
- House Robberpaid
- Longest Increasing Subsequencepaid
- Unique Pathspaid
- Subsetsfree
- Permutationspaid
- Combination Sumpaid
- Build React Tabsfree
- Build React Accordionfree
- Build React Modalpaid
- Build React Tooltippaid
Curriculum Topic Directory (315 Published Lessons)
Direct access to all technical lessons and under-the-hood breakdowns.
Foundations & Tooling (11)
- How the Web Works: The Request Lifecycle
- Browser Internals & Critical Rendering Path
- HTTP & Networking (HTTP/1.1 vs HTTP/2 vs HTTP/3)
- DNS & TLS/HTTPS
- Git & Version Control
- Package Managers (npm, yarn, pnpm)
- Build Tools (Vite, Webpack, esbuild, Rollup, Turbopack)
- Module Systems (ESM vs CommonJS)
- Linting & Formatting (ESLint, Prettier)
- Browser DevTools Mastery
- Regular Expressions
CSS (16)
- Flexbox
- Grid
- Positioning
- Responsive Design
- Container Queries
- Transitions
- Animations
- Animation Libraries (Framer Motion, GSAP)
- CSS Custom Properties (variables)
- CSS Architecture (BEM, ITCSS)
- SCSS / Sass
- Tailwind CSS
- CSS Modules
- CSS-in-JS (styled-components, Emotion), trade-offs
- Modern CSS (:has(), nesting, cascade layers, subgrid)
- CSS Performance
JavaScript (23)
- Modules (ESM, dynamic import)
- Async Programming Overview
- JavaScript Fundamentals
- Memory Management
- Promises
- Scope
- Garbage Collection
- Async/Await
- Closures
- Data Structures in JS (Map, Set, WeakMap, WeakRef, typed arrays)
- Fetch API
- Hoisting
- Design Patterns
- Generators & Iterators
- Execution Context
- Functional Programming
- Web Workers (off-main-thread)
- Event Loop
- Error Handling
- Prototypes & Prototype Chain
- JavaScript Performance Optimization
- `this` Binding, call/apply/bind
- Coercion & Equality (== vs ===)
TypeScript (15)
- Generics
- TypeScript Basics
- Utility Types
- Types
- Advanced Types (conditional, mapped, template literal)
- Interfaces
- `infer`, Variance & Declaration Merging
- Type Aliases
- Declaration Files (.d.ts)
- Type Narrowing & Guards
- Decorators
- Modules & Namespaces
- tsconfig Deep Dive
- TypeScript with React (props, hooks, generics)
- Best Practices
React (25)
- Suspense
- Components
- Hooks Overview
- Error Boundaries
- JSX
- Effects (useEffect, cleanup, stale closures)
- Server Components
- Props
- Custom Hooks
- SSR, Hydration & Streaming
- State
- Refs & the DOM
- Reconciliation & the Virtual DOM
- Rendering Lifecycle
- Context API
- Concurrent Features (transitions, useDeferredValue)
- Forms (controlled/uncontrolled, React Hook Form)
- Portals & the Synthetic Event System
- Data Fetching with TanStack Query
- React 19 Actions, useOptimistic & the Compiler
- State Patterns (lifting, reducer+context, Zustand/Redux)
- Performance Optimization
- Design Patterns
- Folder Structure & Architecture
- Testing React
Redux Ecosystem (19)
- Redux vs Context API
- Store
- Effects (call, put, take, select)
- configureStore
- RTK vs Vanilla Redux
- Actions & Reducers
- takeLatest, takeEvery, debounce, retry
- createSlice
- Redux vs Zustand vs MobX vs Jotai
- Middleware
- Channels & Complex Workflows
- createAsyncThunk
- Selectors & Reselect
- Cancellation & race()
- Entity Adapter
- Data Normalization
- Testing Sagas
- RTK Query
- Best Practices
Next.js (18)
- Authentication
- SSR / SSG / ISR / CSR / Streaming
- App Router Overview
- Image / Font / Script Optimization
- Server/Client Component Composition
- Pages Router
- Next.js Performance
- Data Fetching & Mutations (App Router)
- Routing & Layouts
- Deployment (Vercel, self-hosted)
- Server Actions
- Dynamic Routes
- Route Handlers / API Routes
- Loading & Error UI
- Caching (Cache Components + legacy model)
- Parallel & Intercepting Routes
- Metadata & SEO
- Proxy (formerly Middleware)
Node.js (16)
- Node.js Runtime Overview
- Authentication & JWT
- Testing with node:test
- Event Loop & libuv
- Performance & Profiling
- TypeScript in Node.js (Native Execution)
- Streams & Buffers
- Security
- Packages, npm & Publishing
- Modules & File System
- Scaling, Clustering & Worker Threads
- EventEmitter & Async Patterns
- Observability & Monitoring
- Environment, Config & Process Management
- HTTP Server Fundamentals
- Error Handling & Async Context
Databases (14)
- CRUD & Collections
- Indexing & Aggregation
- Transactions & Relationships
- Performance & Replication
- Mongoose (Schema Design, Validation)
- Relational Modeling & Joins
- Indexing & Query Optimization
- Transactions & ACID
- Schema Migrations & Zero-Downtime Changes
- Prisma ORM
- ORMs vs Query Builders vs Raw SQL
- Connection Pooling & Serverless Databases
- Redis (caching, sessions, pub/sub)
- SQL vs NoSQL Trade-offs
API Development (13)
- REST Design & Best Practices
- Sessions vs Tokens, Cookie Security, Refresh Tokens
- WebSockets & SSE
- OAuth 2.0 & OpenID Connect (full flow)
- API Design & Versioning
- gRPC
- API Caching
- Polling & Long-polling Patterns
- Pagination, Filtering & Sorting Design
- Rate Limiting
- Webhooks, Idempotency & Retries
- API Documentation (OpenAPI/Swagger)
- tRPC & End-to-End Type Safety
System Design (25)
- Disney+ Hotstar: Scaling to 25.3M+ Concurrency Spikes
- Scalability & Load Balancing
- Frontend System Design Framework
- Netflix: Global Video Delivery at Petabyte Scale
- CDN & Caching
- Machine Coding Interviews
- WhatsApp: Engineering for 50B+ Messages/Day with 32 Engineers
- Message Queues & Pub/Sub
- Worked Design Examples
- Figma: WebAssembly 60fps Multiplayer & Fractional Indexing
- Database Design at Scale
- Uber: Real-Time Geospatial Matching & H3 Hexagonal Indexing
- Rate Limiting at Scale
- Google Docs: Operational Transformation (OT) at Scale
- Real-Time Systems (WebSockets at scale)
- Discord: Scaling Megaservers to Millions of Concurrents
- CAP Theorem, Consistency & Availability (frontend-relevant)
- Instagram: Delivering Billions of Images with Zero Perceived Latency
- Spotify: Sub-250ms Instant Playback & Client Ring Caching
- Zoom: Low-Latency Many-to-Many Video (SFU) & Simulcast
- Airbnb: Geospatial Polygon Search & Map/List Synchronization
- Amazon: Product Pages at Peak Prime Day Retail Load
- Dropbox: File Sync, Rolling Hash & Block Deduplication
- Notion: Offline-First Block Tree & Transaction Log Architecture
- Cloudflare: BGP Anycast, DDoS Defense & Edge V8 Isolates