🚀 My Quince Frontend Engineer Interview Experience (2025) | Software Development Engineer 3

Position: Software Development Engineer 3 [Frontend]
Location: Bangalore
Compensation: 💰 40-42 LPA Fixed + 40 LPA Esops
Tech Stack: JavaScript, HTML, CSS, VanillaJS, ReactJS

🏢 About Quince

Quince is a fast-growing e-commerce platform focused on providing luxury-quality essentials at radically lower prices by cutting out middlemen. Their tech team is lean, and their hiring process aims to filter top performers—but as you’ll see in this article, even well-prepared candidates can hit roadblocks.

🧩 Round 1 – BarRaiser Round

This was a highly structured and concept-heavy round where the interviewer focused on a deep understanding of web fundamentals, frontend performance, and clean problem-solving. Let’s break it down 👇

🔹 Topics Covered

⚡ Core Web Vitals (LCP, FCP, CLS)

These are Google’s UX-focused performance metrics:

• LCP (Largest Contentful Paint): Measures loading performance. Should occur within 2.5s.
• FCP (First Contentful Paint): Measures the time from page load to when the first DOM content is rendered.
• CLS (Cumulative Layout Shift): Measures visual stability. Avoid layout shifts caused by images, fonts, etc.

✅ How to improve:

• Use proper width and height on images.
• Avoid using document.write.
• Use lazy loading.
• Minify JS and CSS.
• Serve static assets with a CDN.

🧠 Critical Rendering Path (CRP)

This is what happens behind the scenes when you type a URL and hit enter:

1. DNS Lookup – Resolves the domain to IP.
2. TCP Connection – Handshake with the server.
3. HTTP Request/Response – HTML is downloaded.
4. Parsing HTML → Builds the DOM
5. Parsing CSS → Builds the CSSOM
6. JS Execution – Blocks rendering unless async or defer used.
7. Render Tree Creation → Layout → Paint

✅ Optimization Tip: Move critical CSS inline, defer non-critical JS, compress images, and preconnect important resources.

🚀 Performance Optimization Techniques

• Debounce and throttle expensive event handlers
• Reduce DOM depth and complexity
• Use requestIdleCallback or requestAnimationFrame when appropriate
• Avoid inline styles and long-running JS tasks
• Avoid memory leaks (event listeners, timers not cleared)

🔹 Problem Solving

1️⃣ Union & Intersection of Two Sorted Arrays

const a = [1, 3, 4, 6, 7];
const b = [2, 3, 4, 5];

// Union
const union = [...new Set([...a, ...b])].sort((x, y) => x - y); // [1,2,3,4,5,6,7]

// Intersection
const intersection = a.filter((val) => b.includes(val)); // [3, 4]

2️⃣ Find the Election Winner (Frequency + Order)

const votes = ['a', 'a', 'b', 'b', 'a', 'b', 'c'];

function findWinner(votes) {
  const map = new Map(); // 🗺️ To store frequency of each candidate

  // 🧮 Count votes for each candidate
  for (let v of votes) {
    map.set(v, (map.get(v) || 0) + 1); // 🧾 If already exists, increment count; else set to 1
  }

  let maxVotes = 0; // 🔢 Track highest vote count
  let winner = "";  // 🏆 Store current winner

  // 🔍 Loop through original votes array to maintain first appearance priority
  for (let v of votes) {
    if (map.get(v) > maxVotes) {
      maxVotes = map.get(v); // ✅ Update maxVotes if current is higher
      winner = v;            // 🥇 Update winner accordingly
    }
  }

  return winner; // 🎯 Return final winner
}

console.log(findWinner(votes)); // 'a' 🗳️

💡 JS Note: Use Map for preserving insertion order with count frequency logic.

3️⃣ JavaScript Object Comparison

let obj1 = {};
let obj2 = {};

console.log(obj1 == obj2);   // false ❌
console.log(obj1 === obj2);  // false ❌

⚠️ Even though both are empty objects, in JavaScript objects are compared by reference, not by value.

const obj3 = obj1;
console.log(obj1 === obj3);  // true ✅

4️⃣ JavaScript Execution Order (Event Loop)

console.log("a"); // 🔹 1st: Synchronous → prints immediately

setTimeout(() => console.log("b")); // 🕓 Macro task → pushed to the task queue

new Promise((resolve) => {
  console.log("e"); // 🔹 2nd: Synchronous → prints immediately
  resolve("c");     // ✅ Promise resolved
}).then(console.log); // 🔸 Microtask → added to microtask queue

console.log("d"); // 🔹 3rd: Synchronous → prints immediately

✅ Output:

a  // sync
e  // sync inside promise
d  // sync
c  // microtask (resolved promise)
b  // macrotask (setTimeout)

🧠 JS Note:

• Synchronous code runs first
• Then microtasks (.then, MutationObserver)
• Then macrotasks (setTimeout, setInterval)

Priority: Sync > Microtasks > Macrotasks

✅ Result: Cleared the Round Successfully

The BarRaiser round tested not just coding, but also how well you understand browser internals, JS runtime behavior, and performance best practices.

💻 Round 2 – Machine Coding

💡 Task: Build a basic app that fetches API data and handles edge cases like failure or empty responses.

⚙️ My Solution:

• Used Redux to manage API data
• Wrote a fully structured, modular, scalable app
• Added loader and error states
• Followed production-level patterns instead of just local state

🧠 Tip: Don't over-engineer if the round doesn't demand it. Sometimes, simple solutions are better received.

❌ The Harsh Reality – Rejected After Clearing Everything

Unfortunately, despite solving everything correctly, I was rejected. Here's why I believe this happened:

• 👨‍💻 The interviewer was a fresh graduate and seemed uninterested
• 🚫 No video was turned on during the entire round
• 🗣️ Zero engagement—felt like speaking into a void
• 💔 No feedback, no discussion—just a rejection mail

I reached out to HR with feedback, but received no acknowledgment. But if I could have cleared that round, then only the one round would have been left, one of my friends cracked the offer for a similar role, and his HM round looks like below:

🧑‍💼 Round 3 – Hiring Manager Discussion

🧩 Topics Covered:

• ✅ General discussion on recent projects, product ownership, and real-world frontend challenges
• ✅ Live coding task: mapLimit function to control concurrency in async operations
• ✅ Bonus: Implemented a caching layer to prevent redundant API calls

🎯 Takeaway – Interview Red Flags to Watch Out For:

• 🚩 No video on? Might signal disinterest
• 🚩 No follow-up questions or engagement? Be cautious
• 🚩 Overqualified interviewer mismatch? You might not get the review you deserve

💡 Never join a company that doesn't respect your time during interviews. If they’re careless now, what can you expect after joining?

📌 Final Thoughts

This experience with Quince reminded me that performance alone isn’t enough. Interviewers must be aligned, respectful, and invested. Otherwise, candidates are left in the dark, no matter how prepared they are.

🙌 Shoutout to all those going through similar rejections—you are not alone.

Hey there from LearnYard! 👋

Glad to see you exploring the free content from our course! We’ve shared 10 valuable articles at no cost to help you get a real feel of what’s inside.

If you’ve found these helpful, we’d love to know! 💬
Share your thoughts or key takeaways on LinkedIn, Twitter, or Instagram — and don’t forget to tag Gourav Hammad & Mohammad Fraz. We’ll personally respond to your post!

Thanks for being part of the LearnYard journey. Keep learning, keep growing! 🚀

Loved the free content? Want access to the full course — for free? 💸

Here’s how: share the course with your friends using your affiliate link (you’ll find it on your profile or home page), and earn 20% commission on each sale.

Just 4–5 sales and you’ll recover the full course price of ₹999/- 🔁
So why wait? Start sharing, start earning, and unlock the rest of the course effortlessly! 🛠️📈

📢 Hashtags for Visibility

#FrontendInterview #ReactJSTips #HiringReality #QuinceInterview #FrontendDeveloper #TechRejection #BarRaiserExperience #MachineCodingRound #CrackTheInterview #InterviewTips #SoftwareEngineerLife #TechHiring #CodeNewbie #FrontendMasters #Quince #SDE3 #QuinceFrontend #LearnYard