Microsoft logo

Microsoft Frontend Engineer System Design Questions

45 practice questions for Microsoft Frontend Engineer interviews

Microsoft frontend engineer interviews emphasise JavaScript, DOM manipulation, CSS, accessibility, browser APIs, and UI component architecture.

All Roles Software Engineer Backend Engineer Frontend Engineer Full Stack Engineer Mobile Engineer Data Engineer Data Scientist ML Engineer DevOps Engineer DevOps Engineer Product Manager SRE Security Engineer Engineering Manager Data Analyst UX/UI Designer QA Engineer
1
System Design
system design Hard Verified Question #1

1. Top 5 System Design Questions Jan 2026


Category: Interval-based system design problem
# Top 5 Recently Asked System Design Questions - Microsoft These are the commonly asked system design questions from Microsoft interviews and some...
Input: List
Output: Computed result
system design Medium api design #1

1. [OA] Client-Side Router — Design an SPA Router for Azure DevOps Dashboard

For Azure DevOps, implement a lightweight client-side router that allows navigation between different dashboard components without a full page reload. The Router class should support the following methods:
- addRoute(path: string, handler: Function): void: Adds a new route with its corresponding handler function.
- navigate(path: string): void: Navigates to the specified path and invokes the associated handler.
Example 1:
Input: const router = new Router(); router.addRoute('/home', () => console.log('Welcome to Home')); router.navigate('/home');
Output: Welcome to Home
Explanation: Adding a route for /home and then navigating to it triggers the corresponding handler.
Constraints:
- At most 100 routes can be added.
- Route paths will always be unique and valid.
system design Senior caching #2

2. [OA] LRU Cache — Design a caching mechanism for OneDrive file access

To enhance the performance of OneDrive, implement an LRU (Least Recently Used) Cache that stores recently accessed files. The cache should have a maximum size and remove the least recently used file whenever a new file is added beyond that limit.
Define the LRUCache class with the following methods:
- get(fileID: int) -> str: Retrieves the file content for the given file ID and updates its usage.
- put(fileID: int, content: str) -> None: Stores the file content in the cache. If the cache exceeds the size, remove the least recently used file.
Example 1:
Input: const lruCache = new LRUCache(2); lruCache.put(1, 'File1'); lruCache.put(2, 'File2'); lruCache.get(1);
Output: 'File1'
Explanation: Accessing file 1 keeps it in the cache while file 2 is also stored.
Constraints:
- Cache size will be at most 3000 files.
- Each fileID will be unique.

Related Microsoft Frontend Engineer interview prep

Start practicing Microsoft questions

Sign up for free to access walkthroughs, AI-generated questions, and more.

Get Started Free