Theory - MVC and React Architecture
Q: What does MVC stand for?
A: Model-View-Controller.
Q: Role of Model in MVC?
A: Manages data and business logic.
Q: Role of View in MVC?
A: Handles the display/UI layer.
Q: Role of Controller in MVC?
A: Handles input, updates model, and returns a response.
Q: Key benefit of MVC?
A: Separation of concerns for better maintainability.
Q: Explain MVC architecture in Node.js/Express with examples.
A: Model: Mongoose schema, View: React front-end, Controller: Express routes.
Q: React and MVC?
A: React is mainly View but also has logic, challenging strict MVC use.
Q: Compare MVC vs React architecture.
A: MVC separates concerns strictly; React combines View and some logic.
Q: MVC in MERN stack?
A: MongoDB: Model, Express: Controller, React: View, Node.js: Runtime.
React Architecture
Q: What is component-based architecture?
A: UI broken into reusable, independent components.
Q: Role of virtual DOM?
A: Lightweight copy of real DOM for efficient updates.
Q: What is unidirectional data flow?
A: Data flows from parent to child via props.
Q: Purpose of Reconciliation?
A: Process to update the DOM after changes.
Q: What are HOCs?
A: Functions that take and return enhanced components.
Q: React component lifecycle?
A: Includes mounting, updating, unmounting with useEffect hooks.
Q: State Management in React?
A: Local: useState; Global: Redux/Zustand/Recoil.
Q: Role of hooks?
A: Enable state and side-effects in functional components.
Q: JSX to DOM flow?
A: JSX -> React.createElement -> Virtual DOM -> Real DOM update.
MongoDB Query Tasks
Q: Users from NY > 30
A: db.users.find({ city: "New York", age: { $gt: 30 } })
Q: Orders > 500 sorted
A: db.orders.find({ price: { $gt: 500 } }).sort({ orderDate: -1 })
Q: Users with active/inactive
A: db.users.find({ status: { $in: ["active", "inactive"] } })
Q: Orders with 'phone'
A: db.orders.find({ product: { $regex: "phone", $options: "i" } })
Q: Order count/user
A: db.orders.aggregate([{ $group: { _id: "$userId", count: { $sum: 1 } } }, { $sort: { count: -1 } }])
Q: Total revenue/user
A: db.orders.aggregate([{ $group: { _id: "$userId", revenue: { $sum: { $multiply: ["$price",
"$quantity"] } } } }])
Q: Join users with orders
A: db.users.aggregate([{ $lookup: { from: "orders", localField: "_id", foreignField: "userId", as:
"orders" } }])
Q: Quantity 1-5
A: db.orders.find({ quantity: { $gte: 1, $lte: 5 } })
Q: Price > 1000, sum qty
A: db.orders.aggregate([{ $match: { price: { $gt: 1000 } } }, { $group: { _id: "$product", totalQty: {
$sum: "$quantity" } } }])
Q: Join and unwind orders
A: db.users.aggregate([{ $lookup: { from: "orders", localField: "_id", foreignField: "userId", as:
"orders" } }, { $unwind: "$orders" }])
Code Examples
Q: Express server
A: const express = require('express'); const app = express(); app.listen(3000);
Q: MongoDB connection
A: mongoose.connect('mongodb://localhost/test').then(() => console.log('db connected'));
Q: Welcome component
A: const Welcome = ({ name }) => <h1>Welcome {name}</h1>;
Q: Dark mode toggle
A: const [dark, setDark] = useState(false);
Q: Counter component
A: const [count, setCount] = useState(0);
Q: Random joke (useEffect)
A: useEffect(() => { fetch(...).then(...) }, []);
Q: Controlled form
A: const [input, setInput] = useState('');
Q: Map list
A: array.map(item => <li>{item}</li>);
Q: Todo list add
A: setTodos([...todos, newTodo]);
Q: Clock with useEffect
A: useEffect(() => { const i = setInterval(...); return () => clearInterval(i); }, []);
Q: Button with props
A: const Button = ({ text, onClick }) => <button onClick={onClick}>{text}</button>;
Q: Conditional render
A: isLoggedIn ? <Dashboard /> : <Login />;
