Frontend Machine Coding Questions for Interview Preparation

I noticed a pattern after clearing technical rounds at 𝟭𝟴+ 𝗰𝗼𝗺𝗽𝗮𝗻𝗶𝗲𝘀... A lot of interviews don’t test random knowledge. They test patterns. If you're preparing for frontend roles (especially JS + React), these are the areas I was repeatedly asked in machine coding + technical rounds: 🚀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁  • Flatten array (with depth param)  • Flatten object  • Deep object comparison  • String problems (sequential count, unique count)  • Sorting without using sort()  • Recursion (comes up a LOT)  • Group by category  • reduce() based problems  • Two-pointer problems  • Function currying  • Promise-based questions  • Using apply() to solve real problems  • Polyfills: map, filter ⚛️ 𝗥𝗲𝗮𝗰𝘁  • Debounce & Throttle (and implementing useDebounce)  • Timer-based problems  • Custom hooks (useFetch)  • Filtering & sorting UI  • Infinite scrolling  • Virtual scrolling  • Pagination (basic but important)  • API fetching patterns  • Combining virtual + infinite scrolling  • Classic apps: Todo / Tic Tac Toe (with twists) 💡 𝗢𝗻𝗲 𝘁𝗵𝗶𝗻𝗴 𝗜 𝗹𝗲𝗮𝗿𝗻𝗲𝗱: It’s not about knowing everything. It’s about recognizing patterns and thinking clearly under pressure. 𝗠𝗼𝘀𝘁 𝗿𝗼𝘂𝗻𝗱𝘀 𝗳𝗲𝗹𝘁 𝗹𝗶𝗸𝗲: “𝘓𝘦𝘵’𝘴 𝘴𝘦𝘦 𝘩𝘰𝘸 𝘺𝘰𝘶 𝘢𝘱𝘱𝘳𝘰𝘢𝘤𝘩 𝘵𝘩𝘪𝘴” 𝘳𝘢𝘵𝘩𝘦𝘳 𝘵𝘩𝘢𝘯 “𝘋𝘰 𝘺𝘰𝘶 𝘬𝘯𝘰𝘸 𝘵𝘩𝘪𝘴 𝘦𝘹𝘢𝘤𝘵 𝘢𝘯𝘴𝘸𝘦𝘳?” If you're preparing right now, focus more on problem patterns + clarity of thought than memorizing solutions. Happy to share more from my prep journey if it helps someone 🙂 #Frontend #JavaScript #React #InterviewPrep #MachineCoding #WebDevelopment

Frontend machine coding questions you should definitely practice for interviews. These are the kind of problems that test how well you can build real features, not just write syntax. 1. Build a Typeahead / Autocomplete (like Google search) 2. Build a Debounced Search Input 3. Build a Todo App with CRUD functionality 4. Build a Modal / Dialog component with accessibility support 5. Build a Dropdown with keyboard navigation 6. Build an Infinite Scroll / Pagination system 7. Build a Star Rating component 8. Build a Carousel / Image Slider 9. Build a Nested Comments / Threaded UI 10. Build a File Explorer (like VS Code sidebar) 11. Build a Kanban Board (drag and drop) These problems are not just about UI - they test: • state management • performance • edge cases • component design Which one have you implemented recently? #frontenddevelopment #reactjs #machinecodeing #webdevelopment #interviewprep

https://lnkd.in/dBGtZUwZ — Your ability to write clean code is no longer the bottleneck for your promotion to Senior or Staff engineer. At the enterprise level, the real separator is your ability to design systems that don't crumble under the weight of millions of users. Most mid-level developers can build a pixel-perfect UI, but very few can architect a scalable, Reddit-style frontend infrastructure. Building frontendengineers.com has taught me that the hardest battles aren't fought in the components; they are fought in state orchestration and data flow. If you aren't thinking about how Redux Toolkit Query interacts with Next.js 15 server components, you are building technical debt by default. In this massive 5,000-word deep dive, I break down the exact patterns we use to scale global platforms. We cover everything from mastering Redux Saga and Redux Persist to optimizing React 19 for the latest Core Web Vitals. Seniority is about understanding why you would choose Redis for the frontend layer over simple browser caching. It’s about knowing how to structure Redux Middleware to handle complex authentication flows without blocking the main thread. I reviewed hundreds of system design documents, and most fail because they treat the frontend as a side-effect of the backend. Stop being a translator for Figma files and start being a system architect. This handbook part is specifically designed to bridge the gap between 'knowing the syntax' and 'owning the architecture'. Whether you are deep in Redux DevTools debugging or configuring TypeScript-heavy micro-frontends, this is for you. Want all 205+ guides in a single, high-value PDF? Grab the Master Frontend Engineering Handbook 2026 here: https://lnkd.in/dGQhFu6y What is the biggest hurdle you face when designing a global-scale frontend architecture? Tag a fellow engineer who is ready to make the jump to Staff level. #FrontendEngineering #SystemDesign #ReactJS #NextJS #TypeScript #WebPerformance #SoftwareArchitecture #Coding #Programming #WebDevelopment #Redux #JavaScript #TechLead #StaffEngineer #SeniorEngineer #Frontend #FullStack #RedditArchitecture #SoftwareEngineering #TechCareer #DevLife #Scalability #React19 #WebDesign #OpenSource #EngineeringManager #ComputerScience #CodeQuality #StateManagement #PerformanceOptimization

𝐑𝐞𝐚𝐜𝐭 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐕𝐢𝐞𝐰 𝐓𝐫𝐚𝐩: How do you write an Error Boundary using functional components? 🚨🏴☠️ If your answer is, "I’ll just use a try/catch inside a useEffect," you might be costing yourself the offer. Here is a quick refresher on Error Boundaries and the production-level tip you need to ace this question. 🧠 𝐓𝐡𝐞 𝐂𝐨𝐫𝐞 𝐂𝐨𝐧𝐜𝐞𝐩𝐭 Since React 16, a single unhandled error in a component during rendering will unmount the entire component tree—resulting in the dreaded blank white screen. Error Boundaries act like a massive catch {} block for your UI. If a localized component (like a product review widget) crashes, the boundary catches it, prevents the rest of the page from unmounting, and displays a graceful fallback UI instead. 📌 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐓𝐢𝐩 Interviewers love asking how to build one in modern, functional React. The catch? You can't. Native React still requires a Class Component using componentDidCatch or static getDerivedStateFromError to build a boundary from scratch. There are no hook equivalents yet. 💻 𝐏𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧 𝐀𝐩𝐩 𝐮𝐬𝐞 𝐜𝐚𝐬𝐞 If you want to show senior-level thinking, explain that while you can write a custom class wrapper, the industry standard for production apps is using Brian Vaughn’s react-error-boundary library. Why? It gives you two massive advantages: 1. 𝘾𝙡𝙚𝙖𝙣 𝙁𝙪𝙣𝙘𝙩𝙞𝙤𝙣𝙖𝙡 𝙒𝙧𝙖𝙥𝙥𝙚𝙧𝙨: You get a <ErrorBoundary> component that accepts a simple fallback UI and an onReset function to easily clear caches and let the user "try again." 2. 𝘾𝙖𝙩𝙘𝙝𝙞𝙣𝙜 𝙩𝙝𝙚 𝙪𝙣𝙘𝙖𝙩𝙘𝙝𝙖𝙗𝙡𝙚: Native error boundaries cannot catch errors inside async API calls or event handlers (like an onClick). The library provides a useErrorBoundary hook that allows you to manually push async errors into the boundary, triggering your fallback UI perfectly. Stop letting a single broken widget crash your entire application! #ReactJS #WebDevelopment #Frontend #SoftwareEngineering #TechInterviews #JavaScript

https://lnkd.in/dESephV3 — 95% of engineers think building a calendar is just a few divs and a map function, but this is exactly where Senior interviews are won or lost. After reviewing hundreds of system design docs while building frontendengineers.com, I realized the 'Senior Gap' is real. Mid-level developers focus on making the UI look like the Figma file. Senior and Staff engineers focus on state orchestration, timezone edge cases, and preventing main-thread jank. When you're building a Calendly-level experience with React 19, you aren't just rendering dates. You are managing complex date-fns logic, implementing accessibility with Aria-live regions, and ensuring smooth performance across React Native and Web. In this 5,000+ word deep dive, I break down the architectural patterns required to scale these components to millions of users. We look at how Next.js 15 handles server-side state for scheduling and how to optimize Web Vitals when rendering massive grids. Transitioning to a Senior role means moving away from 'how do I build this' to 'how does this scale and break'. If you want to ace the system design round at Big Tech, you need to understand the underlying engine, not just the syntax. I’ve spent 12 years in the trenches of enterprise frontend architecture to bring you these specific insights. Mastering these nuances is what differentiates a coder from a true Software Architect. Want all 205+ guides in a single, high-value PDF? Grab the Master Frontend Engineering Handbook 2026 here: https://lnkd.in/dGQhFu6y What is the single most complex UI component you have ever had to build from scratch? Tag a developer who is currently grinding for their next big promotion. #FrontendEngineering #TechLeads #SystemDesign #ReactJS #WebDevelopment #SoftwareEngineering #JavaScript #TypeScript #NextJS #FrontendArchitecture #CodingInterview #SeniorDeveloper #StaffEngineer #WebPerformance #ReactNative #UIUX #SoftwareArchitecture #CodingLife #WebDevTips #CareerGrowth #TechCommunity #ProductEngineering #EnterpriseSoftware #SystemDesignInterview #FrontendDev #FullStack #Harshal #MasterHandbook #EngineeringLeads #CleanCode

Rippling 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 | 𝗦𝗲𝗻𝗶𝗼𝗿 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿 The interview consisted of three rounds covering JavaScript fundamentals, React design, and problem-solving. 𝗥𝗼𝘂𝗻𝗱 𝟭: JavaScript + Problem Solving + CSS This round focused heavily on core JavaScript concepts, problem-solving, and CSS fundamentals. 𝗣𝗿𝗼𝗯𝗹𝗲𝗺-𝗦𝗼𝗹𝘃𝗶𝗻𝗴 𝗧𝗮𝘀𝗸 I was asked to flatten a nested array with a custom ordering requirement, where:  • Top-level elements were processed first  • Nested elements were processed later I was able to solve it, although it took some time to finalize the approach. 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 Output-Based Question var obj = {  value: 6,  print: function() {   console.log(this.value);  } } 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻: What happens when the print function is called? This tested understanding of the this keyword and execution context. 𝗙𝗼𝗹𝗹𝗼𝘄-𝘂𝗽: How to preserve the object context when calling the function later? Answer: Using bind 𝗣𝗼𝗹𝘆𝗳𝗶𝗹𝗹 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 I was asked to write a polyfill for bind, which I was able to implement quickly. 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 / 𝗦𝘆𝘀𝘁𝗲𝗺 𝗧𝗵𝗶𝗻𝗸𝗶𝗻𝗴 Implement a simplified version of a state subscription system (similar to pub-sub or basic state management like selector/dispatch patterns) I wasn’t very familiar with this pattern at that time, so I couldn’t fully solve it. 𝗖𝗦𝗦 𝗗𝗶𝘀𝗰𝘂𝘀𝘀𝗶𝗼𝗻 Explain all position values:  • static  • relative  • absolute  • fixed  • sticky I explained most of them correctly, but was slightly off on the definition of absolute positioning. 𝗙𝗹𝗲𝘅𝗯𝗼𝘅 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 How to assign different widths to flex items? Answered using appropriate flex properties. 𝗪𝗵𝗮𝘁 𝗪𝗮𝘀 𝗘𝘃𝗮𝗹𝘂𝗮𝘁𝗲𝗱:  • JavaScript fundamentals (this, bind, closures indirectly)  • Problem-solving approach  • Understanding of CSS layout systems  • Ability to write low-level implementations (polyfills) . . . Continue reading it here: https://lnkd.in/g2ybHhvF Note: It's my friend's interview experience.

🚀 Interview Experience – Frontend (React/JavaScript) | 🔹 Coding / Problem-Solving 1. A parent div with 3 child divs. You need to place first at bottom-left and second at bottom-middle and third one at bottom-right. 🔹 JS output-based questions: 🌞 (function () { try { throw new Error(); } catch (x) { var x = 1, y = 2; console.log(x); } console.log(x); console.log(y); })(); 🌞 console.log(0 || 1); //1 console.log(1 || 2); //0 console.log(0 && 1); //0 console.log(1 && 2); // 2 🌞 (function(){ var a = b = 3; })(); console.log(a); console.log(b); 🌞 Create a React component that allows a user to select a file and simulate an upload process. When the user clicks the upload button, display a progress bar that gradually fills from 0% to 100% and show the upload percentage. The progress bar should update dynamically using React state. 🔹 Core JavaScript Concepts 1. Currying (currying vs normal functions) 2. call, apply, bind – when to use 3. Event loop 4. Promises: Promise.all, Promise.allSettled, Promise.race 5. Debouncing vs Throttling 6. Sync vs Deferred execution 7. Object & Array Destructuring 8. Difference between for...of and for...in . 🔹 React Topics 1. Hooks 2. useState – async or sync? How it works internally 3. Error Boundaries 4. Redux / Redux Toolkit flow 🔹 HTML & CSS Fundamentals 1. Box Model 2. CSS Specificity 3. Pseudo-classes and Pseudo-elements 4. Accessibility. Responsive Design techniques 🔹 Testing - Writing test cases (basic understanding expected) 💡 Overall, the interview focused more on fundamentals + real-world implementation rather than just theory. Would love to hear if you've come across similar questions or patterns! 👇 #PersistentSystems #Frontend #JavaScript #ReactJS #WebDevelopment #InterviewExperience #CodingInterview #Learning #CareerGrowth

🚀 JavaScript Deep Dive: Promise.all vs Promise.allSettled One of the most common async pitfalls I see in interviews and real-world codebases is misunderstanding how "Promise.all()" behaves compared to "Promise.allSettled()". Let’s break it down 👇 🔹 Promise.all() - Fails fast - If any one promise rejects, the entire result rejects immediately - You lose results of other promises Promise.all([ Promise.resolve('success'), Promise.reject('failure') ]) .catch(console.log); // Output: "failure" 👉 Best used when: - All operations are dependent - You need all results or nothing --- 🔹 Promise.allSettled() - Never fails - Waits for all promises to complete (resolved or rejected) - Returns detailed status of each promise Promise.allSettled([ Promise.resolve('success'), Promise.reject('failure') ]) .then(console.log); /* [ { status: 'fulfilled', value: 'success' }, { status: 'rejected', reason: 'failure' } ] */ 👉 Best used when: - Tasks are independent - You want to analyze both success & failure cases --- 💡 Pro Tip (Interview Insight): If you say: «“Use "Promise.all" for dependent APIs and "allSettled" for resilient UI flows”» 👉 You instantly sound like a senior engineer. --- ⚡ Real-world example: - "Promise.all" → Payment + Order Creation (must both succeed) - "Promise.allSettled" → Fetching dashboard widgets (show partial data if some fail) --- 🔥 Mastering these small differences = writing robust, production-ready async code --- #JavaScript #Frontend #ReactJS #WebDevelopment #AsyncProgramming #CodingInterview #SeniorDeveloper

𝗣𝗵𝗼𝗻𝗲𝗣𝗲 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝗟𝗼𝗰𝗮𝘁𝗶𝗼𝗻: 𝗕𝗲𝗻𝗴𝗮𝗹𝘂𝗿𝘂 𝗢𝗳𝗳𝗲𝗿: 𝟰𝟬+ 𝗟𝗣𝗔 𝗥𝗼𝘂𝗻𝗱 𝟭: 𝗢𝗻𝗹𝗶𝗻𝗲 𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁 (𝟭𝟮𝟬 𝗺𝗶𝗻𝘀) - 7 MCQs on JavaScript & Web fundamentals - 3 coding questions (easy → medium) in JavaScript - Key concepts:  - Arrays & Strings  - Traversing array of objects  - Caching using Map / objects 𝗥𝗼𝘂𝗻𝗱 𝟮: 𝗨𝗜 𝗧𝗲𝗰𝗵 (𝟲𝟬 𝗺𝗶𝗻𝘀) - Resume & project deep dive - Rendering techniques: CSR, SSR, Streaming - UI discussion: Accordion animation & styling - Web performance optimization - Measuring performance in real projects - Coding: Execute promises in series 𝗥𝗼𝘂𝗻𝗱 𝟯: 𝗨𝗜 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 𝗦𝗼𝗹𝘃𝗶𝗻𝗴 (~𝟳𝟱 𝗺𝗶𝗻𝘀) This round can contain DSA questions too. Some past UI based questions asked by them were: - 𝗙𝗶𝗹𝗲 𝗘𝘅𝗽𝗹𝗼𝗿𝗲𝗿 (𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 𝗵𝗲𝗿𝗲: https://lnkd.in/diwdvuwd) - 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝘆 𝗕𝗮𝘀𝗲𝗱 𝗗𝗮𝘁𝗮 𝗙𝗲𝘁𝗰𝗵𝗶𝗻𝗴 (𝗙𝘂𝗹𝗹 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻 + 𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻: https://lnkd.in/dyVjMcSH) 𝗥𝗼𝘂𝗻𝗱 𝟰: 𝗛𝗶𝗿𝗶𝗻𝗴 𝗠𝗮𝗻𝗮𝗴𝗲𝗿 (𝟰𝟱 𝗺𝗶𝗻𝘀) - Behavioral questions - Resume discussion - Deep dive into past projects 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀 - Strong fundamentals in JavaScript + Web concepts - matter a lot - Practical knowledge of performance & real-world tradeoffs is expected - Clear communication can make a big difference - Strong practice of different types of machine coding questions make a lot of difference (𝗥𝗲𝗰𝗼𝗺𝗺𝗲𝗻𝗱𝗲𝗱 𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/dMPbUR4z) Like. Repost. Save for later.

𝗜𝗳 𝘆𝗼𝘂 𝗮𝗿𝗲 𝗰𝗹𝗲𝗮𝗿 𝗮𝗯𝗼𝘂𝘁 𝘁𝗵𝗲𝘀𝗲 𝟯𝟬 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗰𝗼𝗻𝗰𝗲𝗽𝘁𝘀, 𝘆𝗼𝘂 𝘄𝗶𝗹𝗹 𝗰𝗹𝗲𝗮𝗿 𝟵𝟬% 𝗼𝗳 𝘁𝗵𝗲 𝗝𝗦 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀. 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻, 𝗦𝗰𝗼𝗽𝗲 & 𝗠𝗲𝗺𝗼𝗿𝘆 1. Execution context & call stack 2. var, let, const (scope + hoisting + TDZ) 3. Lexical scope & scope chain 4. Closures (behavior, not definition) 5. Shadowing & illegal shadowing 6. Garbage collection basics & memory leaks 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 & 𝘁𝗵𝗶𝘀 1. Function declarations vs expressions 2. this binding rules (default, implicit, explicit, new) 3. call, apply, bind 4. Arrow functions vs normal functions 5. Currying & partial application 6. Higher-order functions 𝗔𝘀𝘆𝗻𝗰 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 (𝗵𝗶𝗴𝗵𝗲𝘀𝘁 𝗿𝗲𝗷𝗲𝗰𝘁𝗶𝗼𝗻 𝗮𝗿𝗲𝗮) 1. Event loop (call stack, microtasks, task queue) 2. Promises & chaining 3. async / await (error handling & sequencing) 4. Race conditions & stale closures 5. Timers (setTimeout, setInterval) vs microtasks 6. Promise utilities (all, allSettled, race, any) 𝗗𝗮𝘁𝗮, 𝗥𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝘀 & 𝗘𝗦𝟲+ 1. == vs ===, truthy / falsy values 2. Object & array reference behavior 3. Deep vs shallow copy 4. Destructuring, rest & spread 5. Map, Set, WeakMap, WeakSet (why they exist) 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 & 𝗥𝘂𝗻𝘁𝗶𝗺𝗲 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 (𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁𝗶𝗮𝘁𝗼𝗿𝘀) 1. Event bubbling, capturing & target phase 2. Event delegation (why it works, when it fails) 3. preventDefault() vs stopPropagation() 4. DOM vs Virtual DOM (conceptual difference) 5. Reflow vs repaint (what triggers each) 6. Web storage (localStorage, sessionStorage, cookies) 7. What can and cannot be polyfilled (and why) #frontend #javascript #reactjs #interviewpreparation #frontenddeveloper #webdevelopment #career #angularDeveloper #angular