Meesho Frontend Development Interview Questions & Answers
Curated interview practice questions with answers. These are practice scenarios, not a verified list of past interview questions.
About Meesho hiring for Frontend Development roles
Meesho is an Indian e-commerce marketplace focused on affordable products and small sellers, with a large user base in smaller towns. Its technology and analytics teams work on search, recommendations, seller tools, logistics and ads. It hires for software engineers, SDETs, business analysts, data analysts and data scientists.
For Frontend Development roles, this Meesho practice set focuses most on Build Tools and Tooling (6), Browser APIs (5), Frontend Architecture (4), TypeScript (4). It has 4 easy, 19 medium, 7 hard questions, so you can start easy and work up to the harder ones.
Company type
E-commerce & consumer tech
Headquarters
Bengaluru, India
Main India offices
Bengaluru
Meesho Frontend Development interview process
Online assessment (coding or SQL)
Technical or case round
Hiring manager round
HR round
Typical pattern based on public candidate experiences. Rounds vary by role, team and year.
Solved for MeeshoStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
✓ 3 questions free • Unlock the rest in seconds
01
Animate a modal smoothly when it opens without causing layout work.
Animate only transform and opacity, which run on the compositor:
.modal {
opacity: 0;
transform: translateY(16px) scale(0.98);
transition: opacity 200ms ease, transform 200ms ease;
}
.modal.is-open {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.modal { transition: opacity 100ms linear; transform: none; }
}
Animating top, height or margin instead would trigger layout on every frame and cause jank on low-end phones.
02
How does the History API enable client-side routing?
history.pushState(state, '', '/courses/react') changes the URL and adds a history entry without reloading the page, and replaceState updates the current entry. When users press back or forward, the popstate event fires and the app renders the matching view. The server must return the app's HTML for all routes, otherwise refreshing a deep link gives a 404. Routers in SPA frameworks are built on this API.
03
A new browser API you used does not work in older Safari versions. How do you handle it?
I would use feature detection, such as if ('share' in navigator), rather than browser sniffing, and provide a fallback like a copy-link button. Checking Can I Use and the project's browser support list before building avoids surprises. Where reasonable, a small polyfill can fill gaps. This progressive enhancement approach ensures the core feature works everywhere while newer browsers get a better experience.
Load flags once and check them where needed:
let flags = {};
export async function loadFlags(userId) {
const res = await fetch('/api/flags?user=' + encodeURIComponent(userId));
flags = res.ok ? await res.json() : {};
}
export const isEnabled = (name) => flags[name] === true;
// usage
await loadFlags(currentUser.id);
if (isEnabled('new-checkout')) renderNewCheckout();
else renderOldCheckout();
Defaulting to off when the request fails keeps the stable path. Flags enable gradual rollouts, but old flags must be removed to avoid clutter.
05
An accordion animation stutters on low-end Android phones. What is wrong?
Most likely it animates height, max-height or margin, which forces layout recalculation every frame. I would check the Performance panel for long layout events. Fixes include animating transform and opacity, using the newer interpolate-size or calc-size features for height where supported, or animating grid-template-rows from 0fr to 1fr, which is cheaper. Testing with CPU throttling in DevTools reveals these issues before users do.
06
What are source maps and should they be deployed to production?
Source maps link minified production code back to the original source files and line numbers, so DevTools and error trackers show readable stack traces. They are generated by the bundler as .map files. Many teams upload them privately to monitoring tools like Sentry and do not serve them publicly, which keeps original source code less exposed while still allowing debugging of production errors.
07
Type checking takes several minutes in a large monorepo. How do you speed it up?
I would enable project references with composite builds so only changed packages are rechecked, and turn on incremental with build info files cached in CI. skipLibCheck avoids rechecking node_modules declarations. Very complex conditional types and huge unions slow the checker, so I would profile with --generateTrace and simplify hotspots. The bundler can use fast transpilation while type checking runs separately in parallel.
08
What is transpilation and how does browserslist control it?
Transpilation converts modern JavaScript or TypeScript into syntax that target browsers understand. Tools include Babel, SWC and esbuild. A browserslist setting, such as '> 0.5%, last 2 versions, not dead', or a build target like es2020, decides which features need conversion and which polyfills to include. Targeting only modern browsers produces smaller, faster code, so the support list should be based on real analytics.
09
How do you handle unclear requirements from a product manager?
Situation: a product manager asked for 'offline support' in our web app without details. Task: I needed clarity before estimating. Action: I listed specific questions, which screens, read-only or editing, how long offline, and shared a quick prototype showing two options with effort estimates. Result: we agreed on read-only offline access for the order history, which shipped in one sprint instead of an open-ended project.
10
Cancel an older search request when the user types again using AbortController.
Keep a controller per request and abort the previous one:
let controller;
async function search(term) {
controller?.abort();
controller = new AbortController();
try {
const res = await fetch('/api/search?q=' + encodeURIComponent(term), {
signal: controller.signal
});
renderResults(await res.json());
} catch (err) {
if (err.name !== 'AbortError') showError(err);
}
}
This prevents slow old responses from overwriting newer results.
11
TypeScript types say a field exists, but the app crashes because the API did not send it. How do you prevent this?
TypeScript only checks at compile time; it cannot guarantee what a server returns at runtime. I would validate responses at the boundary with a schema library like Zod or Valibot, deriving TypeScript types from the schema so they never drift. Invalid data then fails clearly with a logged error and a fallback UI. Generating types from OpenAPI specs also keeps frontend and backend contracts aligned.
12
Set up ESLint with the flat config for a TypeScript project.
Install packages and create eslint.config.js:
// npm i -D eslint @eslint/js typescript-eslint
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
export default tseslint.config(
js.configs.recommended,
...tseslint.configs.recommended,
{
rules: {
'@typescript-eslint/no-explicit-any': 'warn',
'no-console': ['warn', { allow: ['error'] }]
}
},
{ ignores: ['dist/'] }
);
Run npx eslint . locally and in CI. Leave formatting to Prettier so the two tools do not conflict.
13
Register a service worker that caches static assets with a cache-first strategy.
Register from the page, then handle install and fetch in sw.js:
// main.js
if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');
// sw.js
const CACHE = 'static-v3';
self.addEventListener('install', e => {
e.waitUntil(caches.open(CACHE).then(c => c.addAll(['/', '/app.css', '/app.js'])));
});
self.addEventListener('fetch', e => {
e.respondWith(caches.match(e.request).then(hit => hit || fetch(e.request)));
});
Changing the cache name on each release lets the activate step delete old caches.
14
Users in India see order dates shifted by a day. What is the likely bug?
The server probably sends a date like 2026-11-12 without time zone, and new Date('2026-11-12') treats date-only strings as UTC midnight, while other formats are parsed as local time, causing shifts around midnight. I would send full ISO timestamps with offsets, store times in UTC, and format for display with Intl.DateTimeFormat('en-IN', { timeZone: 'Asia/Kolkata' }). The Temporal API, now arriving in browsers, makes this safer.
15
Write a GitHub Actions workflow that lints, tests and builds a frontend app.
A typical CI pipeline:
name: CI
on: [pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: npm
- run: npm ci
- run: npm run lint
- run: npm test -- --run
- run: npm run build
npm ci installs exactly from the lockfile, and caching speeds up repeat runs. Branch protection can require this check before merging.
16
Write a DeepReadonly type using mapped and conditional types.
Cache-Control controls caching. Files with content hashes in their names, like app.3f9a2c.js, can use max-age=31536000, immutable because a new build produces a new filename. HTML should use no-cache, which forces revalidation so users get new asset references after a deploy. ETag and Last-Modified allow cheap revalidation with 304 Not Modified responses. Wrong headers cause either stale apps or needless re-downloads.
18
Configure cache headers for hashed assets and HTML in Nginx.
Long cache for fingerprinted files, revalidation for HTML:
location ~* \.(js|css|woff2|avif|webp|svg)$ {
add_header Cache-Control 'public, max-age=31536000, immutable';
}
location / {
try_files $uri /index.html;
add_header Cache-Control 'no-cache';
}
This works only when build tools add content hashes to filenames. Returning users then load assets from cache instantly, while every deploy still reaches them through fresh HTML.
19
Write a minimal observable store in plain JavaScript.
Map allows keys of any type, keeps insertion order, has a size property and performs well with frequent additions and deletions, so it suits caches and lookups by object. Set stores unique values with fast has() checks, ideal for tracking selected ids. Plain objects are better for fixed-shape records and JSON. Arrays are better when order and index access matter and duplicates are allowed.
21
Test a DOM form with Testing Library and user-event.
Simulate real typing and clicks:
import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { mountSignupForm } from './signup';
it('shows an error for an invalid mobile number', async () => {
document.body.innerHTML = '<div id=app></div>';
mountSignupForm(document.getElementById('app'));
const user = userEvent.setup();
await user.type(screen.getByLabelText('Mobile'), '12345');
await user.click(screen.getByRole('button', { name: 'Sign up' }));
expect(screen.getByRole('alert')).toHaveTextContent('Enter a valid mobile number');
});
toHaveTextContent comes from @testing-library/jest-dom.
22
Add automated accessibility checks to Playwright tests.
Use the axe-core integration:
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('home page has no serious accessibility violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa'])
.analyze();
const serious = results.violations.filter(v => ['serious', 'critical'].includes(v.impact));
expect(serious).toEqual([]);
});
Automated tools catch only part of accessibility issues, so keyboard and screen reader checks are still needed.
Extend HTMLElement and register a tag name containing a hyphen:
class RatingStars extends HTMLElement {
connectedCallback() {
const value = Number(this.getAttribute('value') || 0);
const root = this.attachShadow({ mode: 'open' });
root.innerHTML = `<style>span { color: var(--star-color, orange); }</style>
<span role='img' aria-label='${value} out of 5'>${'*'.repeat(value)}</span>`;
}
}
customElements.define('rating-stars', RatingStars);
// usage: <rating-stars value='4'></rating-stars>
The custom property lets the page theme it despite Shadow DOM isolation.
24
Your team uses 'as any' everywhere to silence errors. How do you improve this?
I would first understand why: often the real types are unclear or the API response is untyped. I would add shared API types, introduce unknown with type guards for external data, and enable the ESLint rule no-explicit-any as a warning. Then I would fix the most risky areas first and block new any in CI. Showing a bug that types would have caught helps get team buy-in.
25
Tell me about a time you automated a repetitive task.
Situation: in my internship, we resized and compressed product images manually before every upload. Task: I wanted to save the team time. Action: I wrote a small Node script using Sharp that converted images to WebP in three sizes and added it as an npm script. Result: a task that took an hour per batch became a one-minute command, and image sizes dropped by more than half.
26
Tell me about a frontend architecture decision you led.
Situation: our app's single global store had grown to thousands of lines and slowed every feature. Task: as frontend lead, I had to propose a better structure without stopping delivery. Action: I wrote a short design document comparing options, moved server data to a query cache module by module, and set guidelines for local state. Result: the store shrank by 70 percent and new features took noticeably less time.
27
Most of your users are on low-end Android phones with slow networks. How does that change your approach?
I would test with real budget devices and network throttling rather than a fast laptop. The priorities become sending less JavaScript, rendering important content on the server, compressing images aggressively, and keeping the initial page under a strict size budget. Caching with a service worker helps repeat visits. Features like large animations and heavy carousels should be reduced or loaded only when the device can handle them.
28
How would you choose a frontend framework for a new project?
I would base it on project needs and team context rather than trends: team experience, hiring market in India, SEO and rendering requirements, ecosystem maturity, long-term support and performance on target devices. React has the largest ecosystem and talent pool, Angular suits large enterprise teams wanting an opinionated structure, Vue is approachable, and Svelte or Astro produce less JavaScript. A small proof of concept helps confirm the choice.
29
The bundle analyser shows two copies of the same library. How do you fix it?
Duplicates happen when different packages depend on incompatible versions, so the package manager installs both. I would run npm ls library-name or pnpm why to see who requires which version, then update dependents to a common version, use overrides or resolutions to force one compatible version, or configure resolve.dedupe in Vite. Duplicate framework copies are especially harmful because they can break shared state and context.
30
Write a card that changes layout based on its container width.
Use a container query so the card adapts wherever it is placed:
.card-wrapper {
container-type: inline-size;
}
.card {
display: grid;
gap: 1rem;
}
@container (min-width: 420px) {
.card {
grid-template-columns: 160px 1fr;
align-items: center;
}
}
In a narrow sidebar the image stacks above text; in a wide main column it sits beside the text, with no viewport media queries.
Tips to crack the Meesho Frontend Development interview
Understand Meesho's zero-commission seller model and its focus on Tier 2 and Tier 3 users for business case questions.
Practise analytics cases on returns, cash-on-delivery and user retention for price-sensitive customers.
Revise SQL window functions and A/B testing basics, which are commonly useful in product analytics roles.
Keep a one-minute story ready for every project on your CV: problem, your part, tools, result.
Practise the hard questions on this page aloud; Meesho interviewers usually ask follow-ups on your first answer.
Frequently asked questions
How many rounds are there in the Meesho Frontend Development interview?
Candidates usually go through 4 stages: Online assessment (coding or SQL); Technical or case round; Hiring manager round; HR round. The exact rounds change with the role, team, location and your experience, so confirm the process with the recruiter.
Which topics should I prepare for the Meesho Frontend Development interview?
This practice set leans on Build Tools and Tooling (6), Browser APIs (5), Frontend Architecture (4), TypeScript (4). Revise those first, then practise explaining one or two of your own projects end to end, because most Meesho interviewers ask you to walk through real work.
Are these the exact questions asked at Meesho?
No. These are curated practice questions that match the skills and difficulty usually tested in e-commerce & consumer tech interviews like Meesho's. They are not a leaked or verified list of past questions.
Where does Meesho hire Frontend Development professionals in India?
Meesho has large teams in Bengaluru. Openings and locations change often, so check the Meesho careers page and filter by city and experience.
Frontend Development questions for similar companies