Notion logo

Notion Frontend Engineer System Design Questions

28 practice questions for Notion Frontend Engineer interviews

Notion 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 Notion.

system design Senior caching #1

1. [OA] LRU Cache — Implement caching for Notion API responses

Notion's API requires efficient handling of frequent requests to improve performance and response times. Implement an LRU (Least Recently Used) Cache to store recent results of API calls, allowing quick retrieval of data with minimal latency.
### Problem Statement:
You need to design an LRUCache class with the following methods:
- get(key: int) -> int: Returns the value of the key if it exists in the cache, otherwise returns -1.
- put(key: int, value: int): Updates or inserts the value by the key. When the cache reaches its capacity, it should invalidate the least recently used item before inserting a new item.
### Example 1:
Input:
python
cache = LRUCache(2)
cache.put(1, 1)
cache.put(2, 2)
cache.get(1)
cache.put(3, 3)
cache.get(2)

Output: 1
-1

### Example 2:
Input:
python
cache.put(4, 4)
cache.get(1)
cache.get(3)
cache.get(4)

Output: -1
3
4

### Constraints:
- 1 <= capacity <= 3000
- 1 <= key, value <= 10^4
system design Senior api design #2

2. [OA] API Design — Design a Rich Text Editor for Notion

Notion’s user-friendly interface requires an intuitive Rich Text Editor that supports various text formats and rich content such as images or links. You need to design a class that represents this editor, allowing users to perform operations such as adding text, changing the format, and retrieving the current content.
### Problem Statement:
Implement a RichTextEditor class that supports the following operations:
- addText(text: str): Adds plain text to the document.
- formatText(start: int, end: int, format: str): Applies the specified format (like bold, italic, underline) from start to end indices.
- getContent() -> str: Returns the current content of the editor as a string, preserving formatting information.
### Example 1:
Input:
python
editor = RichTextEditor()
editor.addText("Hello")
editor.addText(" World")
editor.formatText(0, 5, "bold")
editor.getContent()

Output: '<b>Hello</b> World'
### Example 2:
Input:
python
editor.formatText(6, 11, "italic")
editor.getContent()

Output: '<b>Hello</b> <i>World</i>'
### Constraints:
- 1 <= text.length <= 1000

Related Notion Frontend Engineer interview prep

Start practicing Notion questions

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

Get Started Free