MERN Architecture
MERN architecture explains how the four parts work together.
React UI -> Express API -> Node.js runtime -> MongoDB database
Then the response comes back:
MongoDB -> Express API -> React UI
What each part does
| Part | Responsibility |
|---|---|
| React | User interface and user interactions |
| Express | API routes, middleware, validation, auth, responses |
| Node.js | Runtime that executes backend JavaScript |
| MongoDB | Stores application data |
Example flow
User clicks "Create note" in React.
- React sends
POST /api/notes. - Express receives the request.
- Middleware checks auth and validates body.
- Controller calls service.
- Service writes to MongoDB.
- Express returns JSON response.
- React updates the UI.
Common mistake
Do not put backend secrets or database code inside React.
React runs in the user's browser. Anything bundled into React can be exposed to the user.
Interview answer
In MERN architecture, React handles the frontend UI, Express exposes API routes, Node.js runs the backend JavaScript, and MongoDB stores data. A typical request starts from React, reaches an Express route, executes backend logic in Node.js, reads or writes MongoDB, then returns a JSON response to update the UI.