Frontend Interview Questions Asked by Top Companies

Frontend Interview Questions Asked by Top Companies

Here are real frontend interview questions asked by top companies, organized by topic.

Machine Coding (All Companies)

• Build an OTP input component with auto-focus.
• Build a progress bar with animations.
• Build an autocomplete search bar with debounce.
• Build a pagination component.
• Build a multi-step tab form.
• Build a file explorer (tree view).
• Build a food ordering app with cart and filters.
• Build an image carousel.
• Build an accordion.
• Build a modal/dialog.

JavaScript (All Companies)

• Explain closures with an example.
• Explain the event loop and microtasks vs macrotasks.
• Implement a polyfill for map, filter, reduce, bind.
• Implement debounce (asked by Flipkart).
• Implement throttle (asked by Walmart).
• Implement currying: sum(1)(2)(3)(4)..(n) (asked by Amazon).
• Explain call, apply, and bind.
• Explain prototypes and prototypal inheritance.
• Explain event bubbling (asked by Oyo).
• Explain event delegation.
• Explain async and defer attributes (asked by Ola).
• Explain CORS and preflight requests.

React

• Explain hooks: useState, useEffect, useMemo, useCallback.
• When do you use useMemo vs useCallback?
• Explain the dependency array in useEffect.
• How does reconciliation work?
• Why do we need keys in lists?
• Implement a custom hook (useDebounce, useFetch).
• Explain context vs Redux for state management.
• How do you optimize React performance?

Frontend System Design

• Design Instagram's feed.
• Design Netflix's video player.
• Design Twitter's feed.
• Design WhatsApp's chat.
• Design an autocomplete search system.
• Design a multi-step form wizard.
• Design a notification system.

CSS and HTML

• Explain flexbox vs grid.
• Center a div (horizontally and vertically).
• Explain CSS specificity.
• Explain the box model.
• Explain semantic HTML and accessibility.
• Build a responsive navbar.

Performance

• What are Core Web Vitals?
• How do you optimize bundle size?
• Explain code splitting and lazy loading.
• How do you optimize images?
• Explain the critical rendering path.

The Takeaway

Real questions from top companies: machine coding (OTP, autocomplete, pagination, food ordering app), JavaScript (closures, event loop, debounce, throttle, currying, polyfills, event bubbling, CORS), React (hooks, reconciliation, performance), system design (Instagram feed, Netflix player), and CSS/HTML (flexbox, grid, accessibility). Practice these.