ReactJS Interview Prep - Architecture & Micro Frontends (Part 1)

Question 1

What is the primary organizational problem that 'Micro Frontends' attempt to solve?

Accepted Answer

Correct Answer

Answer

To make React components render faster.

Answer

To allow multiple, independent teams to work on, test, and deploy different sections of a massive web application (e.g., Team A owns 'Checkout', Team B owns 'Search') without blocking each other or causing merge conflicts in a monolithic repository.

Answer

To reduce the size of CSS files.

Answer

To replace Redux with Context API.

Question 2

What is a 'Monolithic' Frontend Architecture?

Accepted Answer

Correct Answer

Answer

A frontend built entirely in vanilla Javascript.

Answer

A traditional Single Page Application (SPA) where the entire frontend (routing, state, UI for all features) is housed in a single repository, built by a single build process, and deployed as a single unit.

Answer

A frontend that only uses Server-Side Rendering.

Answer

A frontend that connects to a single database.

Question 3

Which of the following is a major DISADVANTAGE of Micro Frontends?

Accepted Answer

Correct Answer

Answer

They prevent teams from using React.

Answer

They introduce massive operational complexity, duplication of dependencies (e.g., users might download React three separate times), inconsistent UI/UX if teams don't communicate, and incredibly difficult End-to-End testing.

Answer

They force all teams to use the exact same programming language.

Answer

They cannot run in modern browsers.

Question 4

What is 'Domain-Driven Design' (DDD) in the context of Frontend Architecture?

Accepted Answer

Correct Answer

Answer

Buying multiple domain names (URLs) for a website.

Answer

Structuring the codebase and team ownership around business capabilities (e.g., 'Inventory', 'Billing', 'User Profile') rather than technical layers (e.g., 'components', 'reducers', 'utils').

Answer

Designing databases based on UI layouts.

Answer

Designing UI based on Redux state.

Question 5

What does 'Independent Deployability' mean in a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

The code is deployed to multiple servers.

Answer

Team A can push an update to the 'Shopping Cart' UI to production without requiring Team B to test or redeploy the 'Search' UI. The shell application dynamically picks up Team A's new code.

Answer

The app can be deployed offline.

Answer

The database is deployed separately from the API.

Question 6

What is the 'App Shell' (or Host) in a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

The command-line interface used to build the project.

Answer

The core, lightweight container application that handles global routing, authentication, and layout (like the header/sidebar). It dynamically loads the appropriate Micro Frontends (remotes) into the main content area based on the URL.

Answer

A Docker container.

Answer

The Redux store.

Question 7

How were Micro Frontends typically achieved BEFORE modern build tools (like Webpack 5) existed?

Accepted Answer

Correct Answer

Answer

By using Redux.

Answer

By using `<iframe>` tags to embed completely separate web pages into a main layout, or by using Nginx routing to serve completely different HTML files based on the URL path (`/search` goes to Server A, `/cart` goes to Server B).

Answer

By compiling Javascript to WebAssembly.

Answer

By using Service Workers exclusively.

Question 8

Why are `<iframe>` based micro-frontends generally discouraged for highly interactive modern web apps?

Accepted Answer

Correct Answer

Answer

They are illegal in the EU.

Answer

They make sharing state (like a shopping cart count) extremely difficult (requiring `postMessage`), they break accessibility/focus management, and they ruin responsive design (like a dropdown menu getting cut off by the iframe border).

Answer

They cannot run React.

Answer

They cannot make API requests.

Question 9

What is Webpack 5 'Module Federation'?

Accepted Answer

Correct Answer

Answer

A political organization for Javascript developers.

Answer

A game-changing architectural feature that allows a JavaScript application (the Host) to dynamically load code from another independent JavaScript application (the Remote) at RUNTIME, allowing them to share dependencies like React.

Answer

A CSS compiling tool.

Answer

A database sharding technique.

Question 10

In Webpack Module Federation, what does it mean to 'share' a dependency (e.g., `shared: { react: { singleton: true } }`)?

Accepted Answer

Correct Answer

Answer

It uploads your code to GitHub.

Answer

It prevents the user from downloading React twice. If the Host app already loaded React v18, and the Remote app also uses React v18, the Remote will skip downloading its own copy and just use the Host's copy in memory.

Answer

It allows multiple users to edit the code simultaneously.

Answer

It shares Redux state across servers.

Question 11

If Micro Frontend A (Cart) needs to tell Micro Frontend B (Header) that the cart count increased, how should they communicate?

Accepted Answer

Correct Answer

Answer

Micro Frontend A should directly mutate the React state inside Micro Frontend B.

Answer

Through a decoupled mechanism like Custom DOM Events (`window.dispatchEvent`), a shared Event Bus, or by the App Shell passing down a shared Context. They should NOT tightly couple to each other's internal state managers.

Answer

By writing to a text file on the server.

Answer

By using an iframe `postMessage` exclusively.

Question 12

What is a 'Monorepo' (Monolithic Repository)?

Accepted Answer

Correct Answer

Answer

A repository with only one file.

Answer

A single Git repository that contains the source code for multiple distinct projects, packages, or Micro Frontends (e.g., storing the 'web-app', 'mobile-app', and 'shared-ui-lib' all in one repo).

Answer

A repository hosted on a single server.

Answer

A frontend architecture without any backend.

Question 13

Is a Monorepo the same thing as a Monolith?

Accepted Answer

Correct Answer

Answer

Yes, they are interchangeable terms.

Answer

No. A Monolith is an architectural pattern (one giant app). A Monorepo is a version control pattern (one giant repo). You can build a highly decoupled Microservice/Micro Frontend architecture entirely within a single Monorepo.

Answer

Yes, both require Webpack.

Answer

No, Monorepos only apply to backend code.

Question 14

What problem do tools like Nx, Turborepo, or Lerna solve in a Monorepo?

Accepted Answer

Correct Answer

Answer

They compile React to native iOS code.

Answer

They manage task orchestration and caching. If you have 50 projects in a repo, and you only change a file in Project A, these tools ensure that only Project A (and projects that depend on A) are rebuilt and tested, saving hours of CI/CD time.

Answer

They format CSS files.

Answer

They manage database migrations.

Question 15

What is an 'Isomorphic' or 'Universal' JavaScript application?

Accepted Answer

Correct Answer

Answer

An app that runs on both Windows and Mac.

Answer

An application where the exact same JavaScript code (like React components or Redux logic) can execute on both the backend Server (Node.js for SSR) and the frontend Client (Browser for hydration).

Answer

An app that uses both React and Angular.

Answer

An app translated into multiple languages.

Question 16

What is the 'BFF' (Backend for Frontend) architectural pattern?

Accepted Answer

Correct Answer

Answer

A backend developer who mentors a frontend developer.

Answer

A dedicated, lightweight backend server (often Node.js/GraphQL) built specifically to serve a single frontend client. It aggregates data from multiple complex microservices and shapes it exactly how the UI needs it, reducing frontend logic.

Answer

A frontend that stores all its data in LocalStorage.

Answer

A UI component library.

Question 17

In a large organization, what is a 'Design System'?

Accepted Answer

Correct Answer

Answer

A graphic design tool like Figma or Sketch.

Answer

A complete set of standards, documentation, and a centralized, version-controlled library of reusable UI components (Buttons, Modals, Typography) that ensures visual and functional consistency across all of a company's Micro Frontends.

Answer

A database architecture diagram.

Answer

A routing framework.

Question 18

What are 'Design Tokens'?

Accepted Answer

Correct Answer

Answer

Cryptocurrency used to pay designers.

Answer

The smallest, platform-agnostic units of a design system (e.g., representing a specific hex color or spacing value as a variable like `color-brand-primary`). They ensure the React web app and the Swift iOS app use the exact same underlying visual values.

Answer

SVG icons.

Answer

React Component props.

Question 19

What is the purpose of 'Storybook' in frontend architecture?

Accepted Answer

Correct Answer

Answer

To write blog posts about code.

Answer

An open-source tool used to develop, test, and document UI components in complete isolation, outside of the main application's complex business logic or routing context.

Answer

To manage Redux state history.

Answer

To run End-to-End tests in the browser.

Question 20

What is 'Server-Driven UI' (SDUI)?

Accepted Answer

Correct Answer

Answer

Rendering React on a Node server (SSR).

Answer

An architecture where the backend API dictates not just the data, but the actual Layout and Components to render. The API returns a JSON tree (e.g., `[{ type: 'HeroBanner', data: {...} }]`), and the frontend acts as a dumb renderer.

Answer

Writing CSS in SQL databases.

Answer

Using PHP instead of React.

Question 21

In a Server-Driven UI architecture, what is the primary responsibility of the React frontend?

Accepted Answer

Correct Answer

Answer

To write complex routing logic.

Answer

To maintain a robust registry (dictionary) of UI components. It takes the JSON array provided by the server, iterates over it, and dynamically maps the requested `type` strings to the corresponding React components.

Answer

To manage the database schema.

Answer

To calculate business logic.

Question 22

Why is 'Versioning' critical when distributing a shared UI Component Library via NPM in a large organization?

Accepted Answer

Correct Answer

Answer

Because NPM requires it.

Answer

To prevent breaking changes. If the Design System team completely redesigns the `<Button>` API (v2.0.0), Team A can safely stay on v1.5.0 until they have time to migrate, while Team B adopts v2.0.0 immediately.

Answer

To track developer productivity.

Answer

To encrypt the source code.

Question 23

What is 'Feature Toggling' (or Feature Flags)?

Accepted Answer

Correct Answer

Answer

A CSS class that hides elements.

Answer

An architectural pattern that allows you to wrap a new feature in a conditional statement driven by a remote server configuration. This allows you to merge incomplete code into production, but keep it hidden from users until it is ready.

Answer

A React Hook for managing boolean state.

Answer

A Redux middleware.

Question 24

How do Feature Flags enable A/B Testing?

Accepted Answer

Correct Answer

Answer

By duplicating the entire repository.

Answer

The Feature Flag server can be configured to return `true` for 50% of users (showing them the new checkout flow) and `false` for 50% (showing the old flow), allowing the business to measure which version converts better.

Answer

By using two different databases.

Answer

By randomly deleting React components.

Question 25

What is the biggest risk of heavily utilizing Feature Flags over a long period?

Accepted Answer

Correct Answer

Answer

They slow down the build time.

Answer

'Technical Debt' and 'Flag Hell'. If you don't aggressively remove old flags once a feature is fully released, the codebase becomes an unreadable maze of `if/else` statements, making testing and maintenance a nightmare.

Answer

They cause memory leaks in the browser.

Answer

They conflict with React Router.

Academy

ReactJS Interview Prep - Architecture & Micro Frontends (Part 1)