Meta logo

Meta Frontend Engineer System Design Questions

39 practice questions for Meta Frontend Engineer interviews

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

system design Medium api design #1

1. [OA] Class Design — Create a centralized Notification System for Meta's messaging platform

Managing notifications across different platforms and ensuring a user-friendly interface is paramount for keeping users engaged. This design focuses on a central notification management system.
Problem statement: Implement a class NotificationSystem that supports sending notifications and retrieving them by user.
- Method Signatures:
- constructor() — initializes the notification system.
- sendNotification(userId: string, message: string): void — sends a notification to the specified user.
- getNotifications(userId: string): string[] — retrieves notifications for the specified user.
Example 1:
Input: system = new NotificationSystem(); system.sendNotification('user1', 'Welcome!');
Output: system.getNotifications('user1') => ['Welcome!']
Constraints:
- 1 <= userId.length <= 10^5
- 1 <= message.length <= 500
system design Medium api design #2

2. [OA] Class Design — Design a client-side Image Carousel for Meta's photo sharing application

Displaying images efficiently in a carousel format is essential for user engagement in photo-sharing apps. This design focuses on class structure that manages the image data, current state, and transition logic for the carousel.
Problem statement: Create a class ImageCarousel that manages images and transitions between them.
- Method Signatures:
- constructor(images: string[]) — initializes the carousel with the provided image URLs.
- next(): string — moves to the next image and returns the URL.
- prev(): string — moves to the previous image and returns the URL.
- getCurrentImage(): string — returns the URL of the current image.
Example 1:
Input: carousel = new ImageCarousel(['img1.jpg', 'img2.jpg', 'img3.jpg'])
Output: carousel.getCurrentImage() => 'img1.jpg'
Output: carousel.next() => 'img2.jpg'
Constraints:
- 1 <= images.length <= 100
- All strings in images are valid URLs.

Related Meta Frontend Engineer interview prep

Start practicing Meta questions

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

Get Started Free