Q: Explain the difference between Agile and Waterfall.
Iterative vs. Sequential.
Basic Implementation (Conceptual)
// Waterfall: Sequential, rigidfunctionwaterfallProject() {
gatherRequirements();
designSystem();
implementCode();
verifyTesting();
deploy();
// If requirements change here, we are in trouble.
}
// Agile: Iterative, flexiblefunctionagileProject() {
while (projectNotFinished) {
const sprintWork = planSprint();
build(sprintWork);
reviewAndAdapt();
}
}
Real World Example (JIRA/Board)
# Waterfall Ticket Structure
- Project Phase: Implementation
- Due Date: Dec 31st (Fixed)
- Dependency: Design Phase Complete
# Agile Ticket (User Story)
- As a: User
- I want to: Reset my password
- So that: I can regain access
- Acceptance Criteria: Email sent, Link works.
- Story Points: 3
Show Answer
Waterfall: Linear. Requirements -> Design -> Build -> Test -> Deploy. Hard to change course once started.
Agile: Iterative. Build small chunks, get feedback, adjust. Embraces change.
# Daily Standup Agenda
1. What did I achieve yesterday?
- "Completed the Login API endpoint."
2. What will I achieve today?
- "Writing unit tests for Login."
3. Is anything blocking me?
- "Waiting for DB credentials."
Show Answer
Daily Standup: 15 mins. What did I do? What will I do? Blockers?
Sprint Planning: Defining what goes into the next sprint (2 weeks).
Sprint Review: Demoing the work to stakeholders.
Sprint Retrospective: Team only. What went well? What went wrong? How to improve?
Q: What is "Velocity" in Scrum?
It's a metric, but not for comparing teams.
Basic Implementation (Calculation)
const pastSprints = [20, 22, 18, 24];
const velocity = pastSprints.reduce((a, b) => a + b) / pastSprints.length;
// Average Velocity: 21 points per sprint
Real World Example (Planning)
// If Backlog has 100 points of work:const sprintsNeeded = Math.ceil(100 / 21);
// Estimate: ~5 sprints to finish.// WARNING: Do not compare Team A (21) with Team B (40).// Their point scales might differ.
Show Answer
The amount of work (story points) a team can complete in a single sprint. It helps in estimating future delivery dates. It should never be used to compare Team A vs Team B.
Q: What is a "Story Point"?
It's not hours.
Basic Implementation (Fibonacci)
const storyPoints = [1, 2, 3, 5, 8, 13, 21];
// 1: Fix a typo// 3: Create a simple form// 8: Build a payment integration
Real World Example (Estimation)
// Developer A (Senior): "This takes me 2 hours."// Developer B (Junior): "This takes me 8 hours."// Both agree on Complexity:const complexity = "Medium";
const points = 5;
// Points measure complexity/risk, not just time.
Show Answer
A unit of measure for effort/complexity/risk. It is relative. A "5" is harder than a "3". It abstracts away "time" because a Senior might do a task in 1 hour that takes a Junior 5 hours, but the complexity is the same.
2. Git & Version Control
Q: Git vs. SVN (Subversion)?
Distributed vs. Centralized.
Show Answer
SVN (Centralized): Everyone commits to a single central server. If the server is down, you can't commit. History is on the server.
Git (Distributed): Every developer has a full copy of the repository (history and all) on their machine. You can commit offline and push later. Branching/Merging is much easier and cheaper in Git.
Context: SVN is legacy. Most modern companies use Git.
Q: Explain Git Flow vs. Trunk Based Development.
Complex branches vs. Fast integration.
Basic Implementation (Git Flow)
# Git Flow Structure
main (production ready)
develop (integration branch)
feature/* (feature branches)
release/* (prep for production)
hotfix/* (urgent fixes)
Real World Example (Trunk Based)
# Trunk Based (Modern CI/CD)
main (The only long-lived branch)
# Developer workflow:
1. git checkout -b feature/new-login
2. # Work for 1 day max
3. git push
4. # Merge to main (behind Feature Flag if incomplete)
Show Answer
Git Flow: Feature branches -> Develop -> Release -> Master. Good for strict release cycles.
Trunk Based: Everyone pushes to Main (Trunk) daily. Uses Feature Flags to hide unfinished work. Faster, modern standard for CI/CD.
Q: What is a Merge Conflict and how do you resolve it?
Two people touched the same line.
Basic Implementation (The Conflict)
<<<<<<< HEAD
const title = "My App";
=======
const title = "Our App";
>>>>>>> feature/branch-b
Real World Example (Resolution)
// You must manually edit the file to choose:const title = "Our App"; // Accepted incoming change// Then run:
git add file.js
git commit -m "Resolved merge conflict"
Show Answer
Occurs when Git cannot automatically reconcile differences. You must manually edit the file to choose which code to keep (Current Change vs Incoming Change), then commit the result.
Q: What is the difference between `git merge` and `git rebase`?
History preservation vs. Clean history.
Basic Implementation (Commands)
# Merge: Adds a new commit
git checkout main
git merge feature-branch
# Rebase: Rewrites history
git checkout feature-branch
git rebase main
Real World Example (Visual History)
// Merge History:
A --- B --- E (Merge Commit)
\ /
C-D
// Rebase History (Linear):
A --- B --- C --- D
Show Answer
Merge: Creates a "merge commit". Preserves the exact history of when things happened. Can be messy.
Rebase: Moves your commits to the tip of the target branch. Creates a linear history. Dangerous on shared branches (rewrites history).
3. Project Structure & Architecture
Q: Explain "Feature Folder" structure vs. "Type Folder" structure.
Grouping by file extension vs. grouping by domain.
// Open for extension, Closed for modificationfunctionButton({ icon }) {
// Instead of hardcoding icons inside,// we accept an icon prop (Extension).return <button>{icon} Click Me</button>;
}
Show Answer
Single Responsibility: Do one thing well.
Open/Closed: Open for extension, closed for modification.
Liskov Substitution: Subtypes must be substitutable for base types.
Interface Segregation: Small, specific interfaces are better than big ones.
Dependency Inversion: Depend on abstractions, not concretions.
Q: What is "Technical Debt"?
Borrowing time now, paying interest later.
Basic Implementation (The "Hack")
// TODO: Refactor this later. It's slow but works.const user = users.find(u => u.id === id);
// O(N) lookup every render.
Real World Example (Paying Interest)
// Later, as users array grows to 10,000:// The app freezes. We must now stop feature work// to refactor this to a Hash Map O(1).const userMap = { [id]: user, ... };
Show Answer
Choosing an easy/fast solution now instead of a better approach that would take longer. It's okay sometimes, but you must "pay it back" (refactor) later, or the code becomes unmaintainable.
4. CI/CD & DevOps
Q: What is CI/CD?
Continuous Integration / Continuous Deployment.
Basic Implementation (Concept)
// CI: Developer commits code -> Auto Test runs// CD: Tests Pass -> Auto Deploy to Server
Real World Example (GitHub Actions)
# .github/workflows/ci.yml
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm test
Show Answer
CI (Integration): Automating the build and testing of code every time a team member commits changes to version control.
CD (Deployment/Delivery): Automating the release of validated code to a repository or production environment.
Q: What is a "Pipeline"?
Steps to production.
Basic Implementation (Steps)
1. Lint Code
2. Run Unit Tests
3. Build Application
4. Deploy to Staging
5. Run E2E Tests
6. Deploy to Production
Real World Example (Config)
# Pipeline failure blocks deployment
lint:
script: npm run lint
test:
script: npm run test
needs: [lint]
deploy:
script: npm run deploy
needs: [test]
Show Answer
A series of automated steps defined in a config file (e.g., .github/workflows/main.yml). Example: Checkout Code -> Install Deps -> Lint -> Test -> Build -> Deploy.
Q: Docker in Frontend?
Containers.
Basic Implementation (Dockerfile)
# Define environment
FROM node:18-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]
Real World Example (Usage)
# Run anywhere with same results
docker build -t my-app .
docker run -p 3000:3000 my-app
# No more "It works on my machine"
Show Answer
Docker packages the app and its environment (Node version, OS) into a container. It ensures "It works on my machine" means it works everywhere. Useful for consistent build environments and SSR apps.
Q: What is "Linting" vs "Formatting"?
ESLint vs Prettier.
Basic Implementation (ESLint - Logic)
// ESLint Error: Variable defined but never usedconst x = 10;
console.log("Hello");
Real World Example (Prettier - Style)
// Before Prettier:const obj={a:1,b:2}
// After Prettier:const obj = { a: 1, b: 2 };
Show Answer
Linting (ESLint): Analyzes code for potential errors, bugs, and bad practices (e.g., unused variables, infinite loops).
Formatting (Prettier): Enforces a consistent style (indentation, quotes, semicolons). It doesn't care about logic.
Q: What are Husky and lint-staged?
Git Hooks.
Basic Implementation (Husky)
# .husky/pre-commit# Runs before every commit
npm run lint
Real World Example (lint-staged)
// package.json
"lint-staged": {
"*.{js,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
// Only runs on files you are committing!
Show Answer
Tools to run scripts before you commit (pre-commit hook).
Husky: Manages git hooks.
lint-staged: Runs linters/formatters only on the files that are currently staged for commit (saves time).
5. Package Management & Tooling
Q: npm vs. yarn vs. pnpm?
Dependency managers.
Basic Implementation (Commands)
npm install
yarn install
pnpm install
Real World Example (pnpm structure)
node_modules/
.pnpm/ (hard links store)
react -> .pnpm/react@18...
// pnpm uses symlinks to a global store.// Saves disk space if you have 10 React projects.
Show Answer
npm: Default, comes with Node. Slowest historically, but caught up.
yarn: Introduced lockfiles and speed.
pnpm: Fastest and most disk-efficient. Uses symlinks to share packages globally (saves GBs of space).
# In CI/CD, use `npm ci` instead of `npm install`# It strictly installs what is in the lockfile.
npm ci
Show Answer
It locks the exact versions of every dependency (and sub-dependency) installed. It ensures that every developer and the CI server install exactly the same tree of packages.
// package.json
{
"workspaces": [
"apps/*",
"packages/*"
]
}
// Allows importing shared code locally without publishing to npm.
Show Answer
A single git repository that holds multiple projects (e.g., Web App, Mobile App, UI Library, Backend). Tools: Nx, Turborepo, Lerna. Benefits: Easy code sharing, atomic commits across projects.
// vite.config.js
export default defineConfig({
plugins: [react()],
});
// Serves files as native ES Modules. Instant start.
Show Answer
Webpack: The veteran. Powerful, highly configurable, but slow startup and HMR on large projects. Bundles everything.
Vite: The modern standard. Uses native ES Modules in dev (instant startup) and Rollup for production build. Extremely fast.
Q: What is "Semantic Versioning" (SemVer)?
Major.Minor.Patch
Basic Implementation (Format)
1.0.0 -> Initial Release
1.0.1 -> Patch (Bug fix)
1.1.0 -> Minor (New feature)
2.0.0 -> Major (Breaking change)
Real World Example (Ranges)
"react": "^18.2.0"
// ^ means "Compatible with 18.2.0"// Will install 18.3.0, but NOT 19.0.0
Show Answer
Format: 1.2.3 Major (1): Breaking changes.
Minor (2): New features (backward compatible).
Patch (3): Bug fixes (backward compatible).
6. Advanced Workflow & Release Strategies
Q: What is "Blue-Green Deployment"?
Zero downtime.
Basic Implementation (Concept)
Env Blue: Running V1 (Live)
Env Green: Deploying V2 (Idle)
// Switch Router:
Router -> Points to Green (V2 is now Live)
Blue becomes Idle.
Real World Example (Rollback)
// If V2 has a critical bug:
Router -> Switch back to Blue (Instant rollback)
// No need to re-deploy or revert commits.
Show Answer
You have two identical environments: Blue (Live) and Green (Idle). You deploy the new version to Green. Once tested, you switch the router to point to Green. Green becomes Live, Blue becomes Idle. Allows instant rollback.
Q: What is "Canary Release"?
Testing in production.
Basic Implementation (Traffic Split)
Users 1-95% -> Server A (Old Version)
Users 96-100% -> Server B (New Version)
Real World Example (Feature Flag)
if (user.id % 20 === 0) {
// 5% of usersreturn <NewDashboard />;
}
return <OldDashboard />;
Show Answer
Rolling out a new feature to a small subset of users (e.g., 5%) first. If metrics look good (no errors), you gradually increase the percentage to 100%. If bad, you roll back. Reduces risk.
Q: What is "Tree Shaking"?
Dead code elimination.
Basic Implementation (ES Modules)
// Library exports A and B
export const A = () => {};
export const B = () => {};
// App imports only A
import { A } from './library';
Real World Example (Result)
// The bundler (Webpack/Vite) sees B is unused.// Final Bundle:const A = () => {};
// B is completely removed from the file.
Show Answer
A build optimization step where the bundler (Webpack/Rollup) removes unused code from the final bundle. It relies on ES Modules (import/export) static structure to know what is used.
// Instead of one big bundle.js (5MB):
- main.js (200KB) // Loaded initially
- src_HeavyChart.js (4.8MB) // Loaded ONLY when component renders
Show Answer
Splitting the code into smaller bundles that can be loaded on demand (e.g., when a user visits a specific route). Reduces the initial load time of the application.
Q: What is "Polyfill" vs "Transpilation"?
New features in old browsers.
Basic Implementation (Transpilation)
// Input (ES6):const add = (a, b) => a + b;
// Output (ES5 - Babel):var add = function(a, b) { return a + b; };
Block Element Modifier. A naming convention for CSS classes to prevent style leaks and make code readable.
Example: .card__title--large (Block: card, Element: title, Modifier: large).
// Build time: Fetch data from CMS API
export asyncfunctiongetStaticProps() {
const posts = awaitfetchCMS();
return { props: { posts } };
}
// Result: Static HTML files served via CDN.
Show Answer
JavaScript, APIs, and Markup. An architecture designed to make the web faster, more secure, and easier to scale. Pre-rendering and decoupling the frontend from the backend.
Q: What is "Headless CMS"?
Content API.
Basic Implementation (Traditional CMS)
WordPress:
- Database -> PHP Engine -> HTML Page
(Frontend and Backend are coupled)
Real World Example (Headless)
Contentful/Strapi:
- Database -> API (JSON)
React App:
- Fetches JSON -> Renders Components
// Decoupled. Same content can go to Web, Mobile, Watch.
Show Answer
A Content Management System that provides content via an API (JSON) rather than rendering HTML pages itself. Allows the frontend (React/Next.js) to be completely decoupled from the content source (Contentful, Strapi).
Q: What is "Isomorphic / Universal" JavaScript?
Shared code.
Basic Implementation (Check Environment)
if (typeof window === 'undefined') {
// Running on Server (Node.js)dbCall();
} else {
// Running on Client (Browser)alert('Hello');
}
Real World Example (SSR)
// React component renders on server to HTML string// AND hydrates in browser to become interactive.
ReactDOM.hydrateRoot(root, <App />);
Show Answer
JavaScript code that can run on both the client (browser) and the server (Node.js). Essential for Server-Side Rendering (SSR) frameworks like Next.js.
Q: What is "Hot Module Replacement" (HMR)?
Dev experience.
Basic Implementation (Concept)
1. You edit `Button.js`.
2. Bundler detects change.
3. Sends new module to browser via WebSocket.
4. Browser swaps ONLY `Button` code.
5. State (e.g., Modal open) is preserved.
Real World Example (Vite/Webpack)
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
// Handle update without reload
});
}
Show Answer
A feature in bundlers (Webpack/Vite) that updates modules in the browser at runtime without a full page refresh. It retains application state (e.g., form data) while you edit code.
Q: What is "Git Cherry-Pick"?
Selective commits.
Basic Implementation (Command)
git cherry-pick <commit-hash>
Real World Example (Scenario)
// Feature branch has 10 commits.// You only want ONE specific fix from it to go to Main.
git checkout main
git cherry-pick a1b2c3d
// Only that commit is applied to main.
Show Answer
A command to take a specific commit from one branch and apply it to another. Useful for applying a hotfix from `main` to a release branch without merging the entire `main` branch.
Q: What is "Peer Dependency"?
Plugins.
Basic Implementation (package.json)
"peerDependencies": {
"react": ">=17.0.0"
}
Real World Example (Library Author)
// You are building "MyReactButton".// You don't want to bundle React inside it.// You expect the HOST app to provide React.// If host doesn't have React, npm warns them.
Show Answer
A dependency that your package expects the host application to have installed. For example, a React component library will list `react` as a peer dependency, so it doesn't bundle its own copy of React.
Q: What is "Scoped CSS" vs "Global CSS"?
Encapsulation.
Basic Implementation (Global)
/* styles.css */
.button { color: red; }
// Affects EVERY .button in the app.
Global: Styles apply to the whole document (standard CSS). Prone to conflicts.
Scoped: Styles apply only to a specific component (CSS Modules, Styled Components). Prevents side effects.
Q: What is "Progressive Enhancement" vs "Graceful Degradation"?
Strategy.
Basic Implementation (Graceful Degradation)
// Build for latest Chrome.// If old browser, show "Please upgrade".
Real World Example (Progressive Enhancement)
// 1. Basic HTML Form (Works without JS)
<form action="/submit" method="POST">...</form>
// 2. Enhance with JS (AJAX)
form.addEventListener('submit', (e) => {
e.preventDefault();
// Submit via fetch() for better UX
});
Show Answer
Progressive Enhancement: Start with basic HTML/CSS that works for everyone, then add JS layers for better experience.
Graceful Degradation: Build for modern browsers first, then provide fallbacks for older ones.
7. Collaboration & Quality Assurance
Q: What should you look for in a Code Review?
More than just syntax.
Basic Implementation (Checklist)
- Does it work?
- Are there tests?
- Is it readable?
- Any security risks?
Real World Example (Comment)
// "Good logic here, but this loop is O(N^2)."// "Can we extract this inline style to a class?"// "Missing error handling if API fails."
Show Answer
Logic errors, security vulnerabilities, performance issues, readability, maintainability, and test coverage. It's also a chance for knowledge sharing, not just finding bugs.
Q: What is the difference between a "Nitpick" and a "Blocker" in code review?
Severity.
Basic Implementation (Blocker)
// "BLOCKER: This exposes the API key in the client!"// "BLOCKER: This breaks the login page."
Real World Example (Nitpick)
// "NIT: Extra whitespace here."// "NIT: Rename variable 'd' to 'data' for clarity."// (Approves PR, but asks for small cleanup)
Show Answer
Blocker: A critical issue (bug, security flaw) that prevents the code from being merged.
Nitpick: A minor suggestion (variable naming, comment style) that improves code but shouldn't stop the merge if time is tight.
// Allows non-devs to play with props in UI
export default {
component: Button,
argTypes: {
color: { control: 'color' },
label: { control: 'text' }
}
};
Show Answer
A tool for building UI components in isolation. It documents components, allows testing different states (props) visually, and serves as a living style guide for the team.
It's the entry point for any developer. It should explain: What the project does, how to install/run it, how to run tests, and how to deploy. Good documentation reduces onboarding time.
Q: What is "Design Handoff"?
Figma to Code.
Basic Implementation (Specs)
Designer says: "Button is blue."
Dev writes: color: blue;
The process where designers provide assets, specs, and prototypes (via tools like Figma or Zeplin) to developers. Good communication here prevents "pixel perfect" issues and logic gaps.
Q: What is `.gitignore`?
Files to exclude.
Basic Implementation (File)
node_modules/
.env
dist/
Real World Example (Why)
# Never commit secrets!
.env.local
.DS_Store
coverage/
npm-debug.log
Show Answer
A file that tells Git which files or directories to ignore. Common entries: node_modules/, .env (secrets), build artifacts (dist/), and OS files (.DS_Store).
Q: What is `git stash`?
Save for later.
Basic Implementation (Command)
git stash
# Working directory is now clean.
git stash pop
# Changes are back.
Real World Example (Scenario)
// You are working on Feature A.// Boss: "Fix critical bug on Main NOW!"
1. git stash (Save Feature A work)
2. git checkout main
3. Fix bug & commit
4. git checkout feature-a
5. git stash pop (Resume work)
Show Answer
A command to temporarily shelve (store) changes you've made to your working copy so you can work on something else, and then come back and re-apply them later.
import { onLCP, onFID, onCLS } from 'web-vitals';
onLCP(console.log);
onFID(console.log);
onCLS(console.log);
// Send these to Google Analytics
Show Answer
A set of metrics Google uses to measure user experience:
LCP (Largest Contentful Paint): Loading performance.
FID (First Input Delay): Interactivity.
CLS (Cumulative Layout Shift): Visual stability.
# Run Lighthouse in CI pipeline
npm install -g @lhci/cli
lhci autorun
// Fails build if score < 90
Show Answer
An open-source tool (built into Chrome DevTools) for auditing web pages. It scores Performance, Accessibility, Best Practices, and SEO, providing actionable suggestions.
// Don't store passwords in plain text.// Don't trust user input (SQL Injection).// Use HTTPS everywhere.
Show Answer
A standard awareness document for developers and web application security. It represents a broad consensus about the most critical security risks to web applications (e.g., Injection, Broken Auth).
Q: How do you prevent XSS (Cross-Site Scripting)?
Sanitization.
Basic Implementation (React Default)
const input = "<script>alert('hack')</script>";
return <div>{input}</div>;
// React renders as text, not HTML. Safe.
Real World Example (Danger Zone)
// Only do this if you trust the source!return <div dangerouslySetInnerHTML={{ __html: input }} />;
// Must sanitize 'input' first (e.g., DOMPurify).
Show Answer
Never trust user input. Escape untrusted data before inserting it into HTML. Modern frameworks like React do this automatically (unless you use dangerouslySetInnerHTML). Use Content Security Policy (CSP) headers.
Q: How do you prevent CSRF (Cross-Site Request Forgery)?
// Server sends token in HTML/Cookie.// Client must send it back in Header.
axios.post('/api', data, {
headers: { 'X-CSRF-Token': token }
});
Show Answer
Use Anti-CSRF tokens (hidden fields) that the server validates. Ensure state-changing requests use POST/PUT/DELETE, not GET. Use SameSite cookie attributes.
Q: What is Error Tracking (e.g., Sentry)?
Production monitoring.
Basic Implementation (Console)
try {
crashApp();
} catch (e) {
console.error(e); // Only developer sees this.
}
Real World Example (Sentry)
Sentry.init({ dsn: "..." });
try {
crashApp();
} catch (e) {
Sentry.captureException(e);
// Alerts dev team via Slack/Email immediately.
}
Show Answer
Tools that capture errors occurring in users' browsers in real-time. They provide stack traces, device info, and user actions leading up to the crash, helping developers fix bugs they can't reproduce locally.
1. Unplug mouse.
2. Try to use the site with ONLY Tab/Enter.
3. Turn on Screen Reader (VoiceOver).
4. Close eyes and listen. Does it make sense?
Show Answer
Automated (axe-core): Catches ~30-50% of issues (missing labels, contrast). Fast.
Manual: Required for the rest. navigating with keyboard only, using a screen reader (VoiceOver/NVDA) to ensure the flow makes sense.