Full Stack Developer Interview Questions

Frontend developer interviews in India have evolved far beyond "explain the box model" basics. Recruiters at Razorpay, Swiggy, and Flipkart now open with live coding challenges, expect you to debug production scenarios on a whiteboard, and probe whether you understand performance budgets as deeply as you know CSS Grid.

The role itself pays between ₹4-8 LPA for entry-level positions and ₹12-25 LPA for mid-level engineers with 3-5 years of experience, according to reported ranges across Bangalore, Pune, and Hyderabad job markets. Senior frontend architects at product companies can command ₹30+ LPA. But landing those offers requires navigating a gauntlet of technical depth, framework fluency, and system thinking that trips up even experienced developers.

This guide covers 30+ interview questions across experience levels, including the curveballs top-tier companies actually ask and the resources that help you answer them confidently.

Entry-level frontend developer questions

What's the difference between let, const, and var in JavaScript? var is function-scoped and hoisted, creating potential bugs. let and const are block-scoped. const prevents reassignment but doesn't make objects immutable. Interviewers want to see you explain hoisting and temporal dead zones, not just recite definitions.

Explain the CSS box model. Every element has content, padding, border, and margin. The box-sizing property determines whether padding and border are included in the element's width. Use border-box to make layout math predictable. Bonus points if you mention how this affects responsive design calculations.

What is the virtual DOM and why does React use it? The virtual DOM is a lightweight JavaScript representation of the actual DOM. React compares the virtual DOM with the previous version, calculates the minimum changes needed, and updates only those parts. This batch updating is faster than manipulating the real DOM directly for each state change.

How do you make a website responsive? Use relative units like percentages and rem, CSS media queries for breakpoints, flexible grid systems like CSS Grid or Flexbox, and mobile-first design principles. Mention viewport meta tags and testing across actual devices, not just browser DevTools.

What are semantic HTML elements? Elements like <header>, <nav>, <article>, and <footer> convey meaning about their content. They improve accessibility for screen readers, help search engines understand page structure, and make code more maintainable. Non-semantic <div> and <span> should be fallbacks, not defaults.

Explain event bubbling and event capturing. When an event fires on an element, it propagates up through parent elements (bubbling) or down from the root (capturing). addEventListener's third parameter controls this. Understanding this prevents bugs when you have nested clickable elements.

What's the difference between == and === in JavaScript? == performs type coercion before comparison. === checks both value and type without coercion. Always use === unless you have a specific reason for type coercion, which is rare in modern code.

How do you optimize website performance? Minimize HTTP requests, compress images, lazy-load below-the-fold content, minify CSS and JavaScript, use CDNs, implement browser caching, and eliminate render-blocking resources. Mention Core Web Vitals if you're familiar with LCP, FID, and CLS metrics.

Mid-level and experienced developer questions

Explain React hooks and when you'd use useState vs useEffect. useState manages component state. useEffect handles side effects like API calls, subscriptions, or DOM manipulation. The dependency array in useEffect controls when it runs. Experienced developers should discuss cleanup functions and common pitfalls like infinite loops.

What's the difference between server-side rendering and client-side rendering? SSR renders HTML on the server for each request, improving initial load time and SEO. CSR renders in the browser using JavaScript, enabling richer interactions but slower first contentful paint. Next.js and similar frameworks offer hybrid approaches. Discuss trade-offs based on use cases.

How would you implement authentication in a React application? Store JWT tokens securely (httpOnly cookies preferred over localStorage), implement protected routes, handle token refresh, and manage auth state globally using Context API or state management libraries. Mention CSRF protection and the security implications of different storage methods.

Explain closures in JavaScript with a practical example. A closure gives a function access to its outer scope even after the outer function has returned. Practical uses include data privacy, factory functions, and event handlers that need to remember state. Interviewers want real examples, not textbook definitions.

What are the differences between REST and GraphQL? REST uses multiple endpoints with fixed data structures. GraphQL uses a single endpoint where clients request exactly the data they need. GraphQL reduces over-fetching but adds complexity. Discuss when you'd choose each based on project requirements.

How do you manage state in large React applications? Options include Context API for simple cases, Redux for complex state with time-travel debugging needs, Zustand for lighter alternatives, or React Query for server state. The best choice depends on team size, application complexity, and whether state is mostly local or server-derived.

What's your approach to writing maintainable CSS at scale? Use methodologies like BEM for naming, CSS modules or styled-components for scoping, design tokens for consistency, and utility-first frameworks like Tailwind when appropriate. Discuss how you prevent specificity wars and maintain design system coherence.

Explain debouncing and throttling with use cases. Debouncing delays function execution until after a pause in events (search input). Throttling limits function execution to once per time period (scroll handlers). Both optimize performance for expensive operations triggered by frequent events.

Company-specific challenging questions

Flipkart: Design a product listing page that handles 10,000 items efficiently. Discuss virtual scrolling or windowing libraries like react-window, pagination strategies, image lazy loading, skeleton screens for perceived performance, and how you'd measure actual performance with metrics. Consider mobile data constraints in tier-2 cities.

Razorpay: How would you build a payment form that works across browsers including IE11? Cover progressive enhancement, polyfills for modern JavaScript features, CSS fallbacks, form validation that works without JavaScript, and accessibility for screen readers. Mention PCI compliance considerations even though that's primarily backend.

Swiggy: Implement an autocomplete search with API calls. Debounce input to reduce API calls, cancel previous requests when new ones start, handle loading and error states, implement keyboard navigation, and cache recent results. Discuss how you'd test this component.

Zomato: Debug why a React component re-renders unnecessarily. Use React DevTools Profiler, check for new object/array references in props, examine useEffect dependencies, consider memoization with React.memo or useMemo, and explain when premature optimization hurts more than helps.

PhonePe: How do you ensure your application works on low-end Android devices with slow networks? Implement code splitting, reduce bundle size, use service workers for offline functionality, optimize images with modern formats and srcset, minimize third-party scripts, and test on actual devices with network throttling. This question tests India-specific awareness.

For more insights on breaking into product companies, read our guide on software developer career paths in India. If you're transitioning from backend work, check out full stack developer interview preparation strategies.

Resources to sharpen your preparation

Practice platforms LeetCode's frontend questions, Frontend Mentor for real-world projects, and CodeSandbox for building portfolio pieces matter more than tutorial hell. Build actual features, not just follow-along projects.

Documentation over courses MDN Web Docs for JavaScript and web APIs, official React documentation, and CSS-Tricks for layout techniques provide deeper understanding than video courses. Read the docs for libraries you claim to know.

System design for frontend Frontend system design is increasingly common at senior levels. Practice designing components like infinite scroll, image carousels, or real-time collaborative editors. Discuss trade-offs, not just implementation details.

Mock interviews Pramp and interviewing.io offer peer practice. Record yourself explaining technical concepts. Most candidates fail not because they lack knowledge but because they can't communicate it clearly under pressure.

Browse current frontend developer openings across India to see what skills employers emphasize right now. Job descriptions reveal which frameworks and tools are actually in demand versus what bootcamps teach.

Key takeaways

• Entry-level questions test fundamentals like the box model, semantic HTML, and JavaScript basics, but expect to explain the "why" behind best practices, not just definitions
• Mid-level interviews focus on framework expertise (especially React), state management decisions, and performance optimization with real metrics
• Top product companies ask scenario-based questions that test debugging skills, system design thinking, and awareness of India-specific constraints like network reliability
• Build real projects and read official documentation rather than collecting certificates from tutorial platforms
• Practice explaining technical decisions out loud because communication skills eliminate more candidates than knowledge gaps

Ready to put your preparation to work? Explore frontend developer opportunities on UnoJobs and let our AI-powered platform match your skills with companies actively hiring across Bangalore, Pune, Hyderabad, and remote roles throughout India.