Full Stack Developer Interview Notes
Table of Contents
1. Frontend Development
2. Backend Development
3. Databases
4. System Design
5. DevOps & Deployment
6. General Programming Concepts
7. Behavioral Questions
1. FRONTEND DEVELOPMENT
HTML & Semantic HTML
Key Concepts:
Semantic tags: <header> , <nav> , <main> , <article> , <section> , <aside> , <footer>
Form elements and validation
Accessibility (ARIA labels, roles, alt text)
Meta tags for SEO
Common Questions:
What's the difference between <div> and <span> ? (Block vs inline)
What are data attributes? ( data-* attributes for storing custom data)
Difference between <script> , <script async> , and <script defer> ?
CSS
Box Model:
Content → Padding → Border → Margin
box-sizing: border-box vs content-box
Positioning:
static (default), relative , absolute , fixed , sticky
Flexbox:
css
.container {
display: flex;
flex-direction: row | column;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;
flex-wrap: nowrap | wrap;
}
.item {
flex: 1; /* flex-grow flex-shrink flex-basis */
}
Grid:
css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 20px;
}
Responsive Design:
Media queries: @media (max-width: 768px) { }
Mobile-first approach
Relative units: rem , em , % , vh , vw
CSS Specificity:
1. Inline styles (1000)
2. IDs (100)
3. Classes, attributes, pseudo-classes (10)
4. Elements, pseudo-elements (1)
Common Interview Questions:
What is CSS specificity?
Explain the difference between display: none and visibility: hidden
What are CSS preprocessors? (Sass, Less)
What is the CSS cascade?
How do you center a div?
JavaScript (Core)
Data Types:
Primitives: string , number , boolean , null , undefined , symbol , bigint
Objects: object , array , function
Hoisting:
javascript
// Variables declared with var are hoisted
[Link](x); // undefined
var x = 5;
// let and const are in temporal dead zone
[Link](y); // ReferenceError
let y = 5;
Closures:
javascript
function outer() {
let count = 0;
return function inner() {
count++;
return count;
}
}
const counter = outer();
[Link](counter()); // 1
[Link](counter()); // 2
Prototypes & Inheritance:
javascript
function Person(name) {
[Link] = name;
}
[Link] = function() {
return `Hello, ${[Link]}`;
}
const john = new Person('John');
[Link]([Link]()); // Hello, John
Event Loop:
Call Stack → Web APIs → Callback Queue → Event Loop
Microtasks (Promises) have higher priority than Macrotasks (setTimeout)
Promises & Async/Await:
javascript
// Promise
fetch('/api/data')
.then(response => [Link]())
.then(data => [Link](data))
.catch(error => [Link](error));
// Async/Await
async function fetchData() {
try {
const response = await fetch('/api/data');
const data = await [Link]();
return data;
} catch (error) {
[Link](error);
}
}
Array Methods:
map() , filter() , reduce() , forEach() , find() , some() , every()
javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = [Link](n => n * 2);
const evens = [Link](n => n % 2 === 0);
const sum = [Link]((acc, n) => acc + n, 0);
ES6+ Features:
Arrow functions
Destructuring
Spread/Rest operators
Template literals
Classes
Modules (import/export)
Optional chaining ( ?. )
Nullish coalescing ( ?? )
Common Interview Questions:
What is the difference between == and === ?
Explain this keyword
What is event delegation?
What is the difference between call() , apply() , and bind() ?
Explain debouncing and throttling
React
Component Types:
javascript
// Functional Component
function Welcome(props) {
return <h1>Hello, {[Link]}</h1>;
}
// Class Component
class Welcome extends [Link] {
render() {
return <h1>Hello, {[Link]}</h1>;
}
}
Hooks:
javascript
// useState
const [count, setCount] = useState(0);
// useEffect
useEffect(() => {
// Side effect
[Link] = `Count: ${count}`;
// Cleanup
return () => {
// Cleanup code
};
}, [count]); // Dependency array
// useContext
const theme = useContext(ThemeContext);
// useRef
const inputRef = useRef(null);
// useMemo (memoize expensive calculations)
const expensiveValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);
// useCallback (memoize functions)
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
// Custom Hook
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const item = [Link](key);
return item ? [Link](item) : initialValue;
});
useEffect(() => {
[Link](key, [Link](value));
}, [key, value]);
return [value, setValue];
}
Component Lifecycle (Class Components):
Mounting: constructor → render → componentDidMount
Updating: render → componentDidUpdate
Unmounting: componentWillUnmount
State Management:
Context API
Redux (actions, reducers, store)
Zustand, Recoil (alternatives)
Virtual DOM:
React creates a virtual representation of the DOM
When state changes, React compares virtual DOM with previous version (diffing)
Only updates changed parts in real DOM (reconciliation)
Keys in Lists:
javascript
const items = [Link](item => (
<li key={[Link]}>{[Link]}</li>
));
Common Interview Questions:
What is the difference between state and props?
What is prop drilling and how to avoid it?
Explain React reconciliation
What are controlled vs uncontrolled components?
When to use useCallback and useMemo ?
What is [Link]()?
TypeScript
Basic Types:
typescript
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;
let items: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];
// Union types
let id: string | number;
// Type alias
type User = {
name: string;
age: number;
email?: string; // Optional
}
// Interface
interface Product {
id: number;
name: string;
price: number;
}
// Generic
function identity<T>(arg: T): T {
return arg;
}
// Enum
enum Status {
Active = "ACTIVE",
Inactive = "INACTIVE"
}
2. BACKEND DEVELOPMENT
[Link] & Express
Basic Server:
javascript
const express = require('express');
const app = express();
// Middleware
[Link]([Link]());
[Link]([Link]({ extended: true }));
// Routes
[Link]('/api/users', (req, res) => {
[Link]({ users: [] });
});
[Link]('/api/users', (req, res) => {
const { name, email } = [Link];
// Save to database
[Link](201).json({ message: 'User created' });
});
[Link](3000, () => {
[Link]('Server running on port 3000');
});
Middleware:
javascript
// Custom middleware
const logger = (req, res, next) => {
[Link](`${[Link]} ${[Link]}`);
next();
};
[Link](logger);
// Error handling middleware
[Link]((err, req, res, next) => {
[Link]([Link]);
[Link](500).json({ error: 'Something went wrong!' });
});
Authentication:
javascript
const jwt = require('jsonwebtoken');
// Generate token
const token = [Link]({ userId: [Link] }, [Link].JWT_SECRET, {
expiresIn: '24h'
});
// Verify token
const authMiddleware = (req, res, next) => {
const token = [Link]?.split(' ')[1];
if (!token) {
return [Link](401).json({ error: 'No token provided' });
}
try {
const decoded = [Link](token, [Link].JWT_SECRET);
[Link] = [Link];
next();
} catch (error) {
[Link](401).json({ error: 'Invalid token' });
}
};
RESTful API Design
HTTP Methods:
GET: Retrieve data
POST: Create new resource
PUT: Update entire resource
PATCH: Partially update resource
DELETE: Remove resource
Status Codes:
200: OK
201: Created
204: No Content
400: Bad Request
401: Unauthorized
403: Forbidden
404: Not Found
500: Internal Server Error
Best Practices:
GET /api/users - Get all users
GET /api/users/:id - Get user by ID
POST /api/users - Create user
PUT /api/users/:id - Update user
DELETE /api/users/:id - Delete user
Security
Common Vulnerabilities:
1. SQL Injection: Use parameterized queries
2. XSS (Cross-Site Scripting): Sanitize user input
3. CSRF (Cross-Site Request Forgery): Use CSRF tokens
4. Injection Attacks: Validate and sanitize input
Security Best Practices:
javascript
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');
const cors = require('cors');
[Link](helmet()); // Security headers
[Link](cors({
origin: '[Link]
credentials: true
}));
// Rate limiting
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100 // limit each IP to 100 requests per windowMs
});
[Link]('/api/', limiter);
// Password hashing
const bcrypt = require('bcrypt');
const hashedPassword = await [Link](password, 10);
const isValid = await [Link](password, hashedPassword);
3. DATABASES
SQL (Relational Databases)
Basic Queries:
sql
-- SELECT
SELECT * FROM users WHERE age > 18;
SELECT name, email FROM users ORDER BY created_at DESC LIMIT 10;
-- INSERT
INSERT INTO users (name, email, age) VALUES ('John', 'john@[Link]', 30);
-- UPDATE
UPDATE users SET age = 31 WHERE id = 1;
-- DELETE
DELETE FROM users WHERE id = 1;
Joins:
sql
-- INNER JOIN (only matching records)
SELECT [Link], orders.order_date
FROM users
INNER JOIN orders ON [Link] = orders.user_id;
-- LEFT JOIN (all from left table)
SELECT [Link], orders.order_date
FROM users
LEFT JOIN orders ON [Link] = orders.user_id;
-- RIGHT JOIN (all from right table)
SELECT [Link], orders.order_date
FROM users
RIGHT JOIN orders ON [Link] = orders.user_id;
Indexes:
sql
CREATE INDEX idx_email ON users(email);
CREATE UNIQUE INDEX idx_username ON users(username);
Transactions:
sql
BEGIN TRANSACTION;
UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;
COMMIT;
ACID Properties:
Atomicity: All or nothing
Consistency: Database remains in valid state
Isolation: Transactions don't interfere
Durability: Committed data persists
NoSQL (MongoDB)
Basic Operations:
javascript
// Insert
[Link]({ name: "John", age: 30 });
[Link]([{ name: "Jane" }, { name: "Bob" }]);
// Find
[Link]({ age: { $gte: 18 } });
[Link]({ _id: ObjectId("...") });
// Update
[Link](
{ _id: ObjectId("...") },
{ $set: { age: 31 } }
);
// Delete
[Link]({ _id: ObjectId("...") });
// Aggregation
[Link]([
{ $match: { status: "completed" } },
{ $group: { _id: "$userId", total: { $sum: "$amount" } } },
{ $sort: { total: -1 } }
]);
Mongoose (ODM):
javascript
const mongoose = require('mongoose');
const userSchema = new [Link]({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
age: { type: Number, min: 0 },
createdAt: { type: Date, default: [Link] }
});
const User = [Link]('User', userSchema);
// Create
const user = new User({ name: 'John', email: 'john@[Link]' });
await [Link]();
// Find
const users = await [Link]({ age: { $gte: 18 } });
SQL vs NoSQL:
SQL: Structured, ACID, relational, vertical scaling
NoSQL: Flexible schema, BASE, horizontal scaling, eventual consistency
4. SYSTEM DESIGN
Key Concepts
Scalability:
Vertical: Add more power to existing machine
Horizontal: Add more machines
Load Balancing:
Distribute traffic across multiple servers
Algorithms: Round Robin, Least Connections, IP Hash
Caching:
Client-side: Browser cache
CDN: Static assets
Server-side: Redis, Memcached
Database: Query results
Database Optimization:
Indexing
Query optimization
Partitioning/Sharding
Replication (Master-Slave)
Microservices vs Monolith:
Monolith: Single codebase, easier to develop, harder to scale
Microservices: Independent services, complex deployment, easier to scale
Message Queues:
RabbitMQ, Apache Kafka
Asynchronous processing
Decoupling services
CAP Theorem:
Consistency: All nodes see same data
Availability: System always responds
Partition Tolerance: System works despite network failures
Can only have 2 of 3
Common System Design Questions
Design a URL Shortener:
Generate unique short code (base62 encoding)
Store mapping in database (hash table)
Redirect service
Analytics tracking
Design Instagram:
Image storage (S3/CDN)
Feed generation (fan-out on write vs read)
Database schema (users, posts, follows, likes)
Caching layer
Design Twitter:
Timeline generation
Tweet storage
Fan-out service
Trending topics
5. DEVOPS & DEPLOYMENT
Git
Basic Commands:
bash
git init
git add .
git commit -m "message"
git push origin main
git pull origin main
git branch feature-name
git checkout feature-name
git merge feature-name
git rebase main
Git Workflow:
Feature branches
Pull requests
Code reviews
CI/CD integration
Docker
Dockerfile:
dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
Docker Compose:
yaml
version: '3.8'
services:
app:
build: .
ports:
- "3000:3000"
environment:
- DB_HOST=db
db:
image: postgres:14
environment:
- POSTGRES_PASSWORD=secret
CI/CD
GitHub Actions:
yaml
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Run tests
run: npm test
- name: Build
run: npm run build
6. GENERAL PROGRAMMING CONCEPTS
Data Structures
Arrays:
Access: O(1)
Search: O(n)
Insert/Delete: O(n)
Linked Lists:
Access: O(n)
Search: O(n)
Insert/Delete: O(1) at head
Hash Tables:
Access: O(1) average
Insert/Delete: O(1) average
Trees:
Binary Search Tree
Balanced Trees (AVL, Red-Black)
Graphs:
BFS, DFS traversal
Algorithms
Sorting:
Bubble Sort: O(n²)
Quick Sort: O(n log n)
Merge Sort: O(n log n)
Searching:
Linear Search: O(n)
Binary Search: O(log n)
Big O Notation:
O(1): Constant
O(log n): Logarithmic
O(n): Linear
O(n log n): Linearithmic
O(n²): Quadratic
O(2ⁿ): Exponential
Design Patterns
Singleton:
javascript
class Singleton {
static instance;
constructor() {
if ([Link]) {
return [Link];
}
[Link] = this;
}
}
Factory:
javascript
class UserFactory {
createUser(type) {
switch(type) {
case 'admin': return new Admin();
case 'guest': return new Guest();
default: return new User();
}
}
}
Observer:
javascript
class EventEmitter {
constructor() {
[Link] = {};
}
on(event, listener) {
if (![Link][event]) {
[Link][event] = [];
}
[Link][event].push(listener);
}
emit(event, data) {
if ([Link][event]) {
[Link][event].forEach(listener => listener(data));
}
}
}
7. BEHAVIORAL QUESTIONS
STAR Method
Situation: Context
Task: What needed to be done
Action: What you did
Result: Outcome
Common Questions
"Tell me about yourself"
Brief background
Relevant experience
Why you're interested in this role
"Why do you want this job?"
Company mission alignment
Growth opportunities
Technical challenges
"Tell me about a challenging project"
Complex problem
Your approach
Lessons learned
"How do you handle tight deadlines?"
Prioritization
Communication
Time management
"Describe a conflict with a team member"
Situation
How you resolved it
Outcome
INTERVIEW PREPARATION TIPS
1. Practice Coding: LeetCode, HackerRank
2. Build Projects: Portfolio with real applications
3. Study Fundamentals: Don't just memorize, understand concepts
4. Mock Interviews: Practice with peers
5. Ask Questions: Show interest in company and role
6. Know Your Resume: Be ready to discuss every project
7. Research Company: Products, tech stack, culture
Questions to Ask Interviewer
What does a typical day look like?
What's the team structure?
What technologies does the team use?
How do you handle code reviews?
What's the deployment process?
What are the biggest challenges facing the team?
Quick Reference Cheat Sheet
JavaScript
javascript
// Destructuring
const { name, age } = user;
const [first, second] = array;
// Spread
const newArray = [...oldArray, newItem];
const newObject = { ...oldObject, newKey: value };
// Optional Chaining
const value = obj?.prop?.nestedProp;
// Nullish Coalescing
const result = value ?? defaultValue;
React Hooks Rules
1. Only call at top level
2. Only call from React functions
3. Custom hooks start with "use"
HTTP Status Codes
2xx: Success
3xx: Redirection
4xx: Client Error
5xx: Server Error
Database Normalization
1NF: Atomic values
2NF: No partial dependencies
3NF: No transitive dependencies
Good luck with your interview! 🚀