Draw and explain the complete PixelCraft architecture:
┌─────────────────────────────────────┐
│ React Frontend │
│ (Canvas, Filters, Collaboration) │
└──────────┬──────────┬───────────────┘
│ REST │ WebSocket
▼ ▼
┌─────────────────────────────────────┐
│ Express API Server │
│ (Auth, Routes, Validation, Logging)│
└──┬───────┬───────┬───────┬──────────┘
│ │ │ │
▼ ▼ ▼ ▼
┌──────┐┌──────┐┌──────┐┌──────────┐
│Mongo ││Postgr││Redis ││ BullMQ │
│ DB ││ eSQL ││Cache ││ Workers │
│ ││ ││ ││ │
│Users ││Analyt││Sessns││Thumbnails│
│Images││Events││Rate ││Metadata │
│ ││ ││Limit ││Emails │
└──────┘└──────┘└──────┘└──────────┘
Trace the data flow for: (a) image upload, (b) real-time collaboration, (c) analytics dashboard query. Explain why each technology was chosen.
// BUG 1: React — Infinite re-render
// The gallery page crashes the tab
useEffect(() => {
const images = fetchImages();
setImages(images);
}); // ← Missing dependency array!
// BUG 2: API — 500 on valid request
// POST /api/images/upload returns 500
app.post('/api/images/upload',
authenticate,
async (req, res) => {
const image = await Image.create({
owner: req.userId,
title: req.body.title,
});
res.json(image);
// ← No error handling!
// If Image.create throws, Express
// sends 500 with no useful info
});
// BUG 3: Aggregation — empty results
// "Popular filters" returns []
db.events.aggregate([
{ $match: {
eventType: 'filter_apply',
createdAt: {
$gte: '2024-01-01'
// ← String, not Date object!
// Should be: new Date('2024-01-01')
}
}},
{ $group: { /* ... */ }}
]);
// Review this pull request.
// Find ALL security issues.
app.post('/api/auth/login',
async (req, res) => {
const user = await User.findOne({
email: req.body.email
});
if (!user) {
return res.status(404).json({
error: 'User not found'
// ← Leaks user existence!
});
}
if (req.body.password
=== user.password) {
// ← Plain text comparison!
// ← No bcrypt.compare!
const token = jwt.sign(
{ id: user._id },
'my-secret-key'
// ← Hardcoded secret!
);
res.json({ token });
}
// ← No rate limiting!
// ← No input validation!
});
Write review comments for each issue. Provide the corrected code.
Choose one topic. Explain it to a Phase-1 student (someone who knows HTML/CSS/JS basics but nothing about backend):
OPTION A: WebSockets
"How can two people edit the same
image at the same time?"
OPTION B: Database Indexing
"Why does the gallery load instantly
for 10 images but takes 30 seconds
for 10,000?"
OPTION C: Caching (Redis)
"Why does the first page load take
2 seconds but the second load is
instant?"
Use analogies. Draw a diagram. The best test of understanding is teaching it to someone who knows nothing about it.
QUESTIONS YOU MUST ANSWER:
Q: "Why MongoDB AND PostgreSQL?
Isn't one database enough?"
Q: "What would break if you removed
Redis from the architecture?"
Q: "If PixelCraft grew to 1 million
users, what's the first thing
that would fail?"
Q: "A junior dev says 'just use
Firebase for everything.'
How do you respond?"
Q: "You have to cut one technology
from the stack. Which one and
why?"
The Mid → Senior transition is about scope.
Mid developers build features. Senior developers design systems, make technical decisions, and enable other developers.