Google logo

Google Frontend Engineer System Design Questions

48 practice questions for Google Frontend Engineer interviews

Google 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

No verified questions yet for Google.

system design Senior api design #1

1. [OA] Client-Side Router — Design a Router for Google Maps

Google Maps needs an efficient way to handle client-side routing for various map views. Your task is to design a class-based router that can manage routes based on the current path and dynamically load components.
Problem Statement: Implement a class Router that manages routes for a map application and has the following methods:
- addRoute(path: string, component: any): void: Adds a new route mapping path to a component.
- navigate(path: string): void: Navigates to the specified path and loads the associated component.
- getCurrentComponent(): any: Returns the component of the current route.
Example 1:
const router = new Router();
router.addRoute('/home', HomeComponent);
router.addRoute('/about', AboutComponent);
router.navigate('/home');
console.log(router.getCurrentComponent()); // HomeComponent example
Constraints:
- The path will always be a string in the format of /[a-zA-Z]+.
- The component can be any function or class that should be rendered for that route.
system design Senior caching #2

2. [OA] LRU Cache — Implement a caching layer for Google Search Results

As part of Google Search Services, you need to optimize data retrieval by implementing an LRU (Least Recently Used) Cache. This cache will store recently accessed search queries and their results, helping to reduce the load on Google's servers and speed up user interactions.
Problem Statement: Design and implement a data structure for an LRU Cache that supports the following operations:
- get(key: number): number: Retrieves the value of the key if the key exists in the cache. Otherwise, returns -1.
- put(key: number, value: number): void: Updates the value of the key if the key exists. If the key does not exist, add the key-value pair to the cache. If the cache reaches its capacity, it should invalidate the least recently used item before inserting the new item.
Example 1:
LRUCache cache = new LRUCache(2);
cache.put(1, 1);
cache.put(2, 2);
cache.get(1); // returns 1
cache.put(3, 3); // evicts key 2
cache.get(2); // returns -1 (not found)
Constraints:
- capacity of the cache is between 1 and 3000.
- All keys and values are positive integers.

Related Google Frontend Engineer interview prep

Start practicing Google questions

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

Get Started Free