Scribd
Upload
19 views30 pages

Raj Questions

The document provides a comprehensive overview of HTML, CSS, and JavaScript concepts, including definitions, differences between versions, and various elements and their functionalities. It covers topics such as HTML tags, semantic elements, CSS box model, responsive design, and JavaScript event loop. Additionally, it discusses best practices for SEO, accessibility, and performance optimization in web development.

Uploaded by

rajashreesabale4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views30 pages

Raj Questions

The document provides a comprehensive overview of HTML, CSS, and JavaScript concepts, including definitions, differences between versions, and various elements and their functionalities. It covers topics such as HTML tags, semantic elements, CSS box model, responsive design, and JavaScript event loop. Additionally, it discusses best practices for SEO, accessibility, and performance optimization in web development.

Uploaded by

rajashreesabale4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1) What is HTML?

HTML stands for Hyper Text Markup Language. It is a language of the World Wide
Web. It is a standard text formatting language used to create and display web pages.
It makes the text more Interactive and dynamic.

2) What is formatting in HTML?


The HTML Formatting is a process of formatting the text for a better look and feel. It
uses different tags to make text bold, italicised, and underlined.

3) What are HTML Tags?


We use HTML tags to place the elements in the proper and appropriate format. Tags
use the symbols to set them apart from the HTML Content. The HTML tags need not
always be closed. For example, you can define an attribute for a tag such as a text
field, a checkbox, radio button.

4) What is an Anchor tag in HTML?


An anchor tag is used to link 2 sections, a web pаgе or a website template in HTML,
<a href = “#” target = “link”> </a>, where href is an attribute of the anchor tag used to
identify the sections in the document, the link is defined in the target attribute, which
is to be linked.

5) What are lists in HTML?


HTML lists are used to group a set of related items in lists. It is defined with an
<li> tag. Some commonly used lists are
1) Ordered List <ol>
2) Unordered List <ul>
3) Description list <d1>
4) menu list <menu>
5) Directory List <dir>

6) What is an Image Map?


An image map lets you. link different web pages with a single image. It is represented
with the <map> tag. Every employer expects the applicant.

7) What is the difference between HTML and HTML5?


HTML is the standard markup language used to create web pages.
HTML5 is the latest version of HTML that introduced new features, semantic
elements, multimedia support, and better APIs for modern web development.

HTML5
HTML

It didn't support audio and video It supports audio and video


without the use of Flash player controls with the use of <audio>
support. and <video> tags.
HTML5
HTML

It uses SQL databases and


It uses cookies to store temporary application cache to store offline
data. data.

Allows JavaScript to run in the


Does not allow JavaScript to run in background. This is possible due
the browser. to the JS Web Worker API in
HTML5.

Vector graphics are possible in Vector graphics are additionally an


HTML with the help of various integral part of HTML5, like SVG
technologies such as VML, and Canvas.
Silverlight, Flash, etc.

It does not allow drag and drop It allows drag and drop effects.
effects.

Not possible to draw shapes like HTML5 allows drawing shapes like
circles, rectangles, triangles, etc. circles, rectangles, triangles, etc.

It is supported by all new browsers


It works with all old browsers. like Firefox, Mozilla, Chrome,
Safari, etc.

<HTML>,<Body> , and <Head> tags These tags can be omitted while


are mandatory while writing a HTML writing HTML code.
code.

Older versions of HTML are less HTML5 is more mobile-friendly.


mobile-friendly.

The doctype declaration is too long The doctype declaration is quite


and complicated. simple and easy.

Elements like nav and header were New elements for web structure,
not present. like nav, header, footer, etc.
HTML5
HTML

Character encoding is long and Character encoding is simple and


complicated. easy.

It is almost impossible to get the One can track the GeoLocation of


true GeoLocation of a user with the a user easily by using the JS
help of a browser. GeoLocation API.

It is capable of handling inaccurate


It can’t handle inaccurate syntax. syntax.

Being an older version, it is not as It is efficient, flexible and faster in


fast, flexible, and efficient as comparison to HTML.
HTML5.

Attributes like charset, async and Attributes of charset, async and


ping are absent in HTML. ping are a part of HTML5.

8) What is the difference between inline elements and block elements?


Block elements take up the full width available and always start on a new line. Inline
elements only take up as much width as their content and do not start on a new line.
🔹 Block Elements
Examples:
 <div>
 <p>
 <section>
 <article>
🔹 Inline Elements
Examples:
 <span>
 <a>
 <strong>
 <em>

9) What are semantic tags? Why are they important?


Semantic tags are HTML elements that clearly describe their meaning and role in the
webpage structure to both browsers and developers.
Examples include <header>, <footer>, <article>, <section>, <nav>, and <aside>.
They are important because:
 They improve SEO by helping search engines understand page structure.
 They improve accessibility for screen readers.
 They make code more readable and maintainable.
10) What is the DOM?
DOM stands for Document Object Model.
When a web page loads, the browser converts the HTML document into a tree-like
structure called the DOM tree.
Each HTML element becomes a node in this tree.
The root node is the <html> element, which contains child nodes like <head> and
<body>, and they further contain their own child elements.
JavaScript can access and manipulate these nodes dynamically using the DOM.
The DOM allows JavaScript to dynamically update the content, structure, and
styles of a webpage without reloading it.

11) What is the role of <meta> tags?


[Meta tags provide metadata about an HTML document. They are placed inside the
head tag and help define charset, viewport settings, SEO descriptions, and other
browser-related configurations.]
The <meta> tag is placed inside the <head> section of an HTML document.
It provides metadata about the webpage, such as character encoding, viewport
settings, author information, and SEO-related details.
It does not display content on the page but helps browsers and search engines
understand the page better.
e.g.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full Stack Developer Portfolio">
Why is it important?
Controls responsiveness
Improves SEO
Defines encoding
Helps social media sharing (Open Graph tags)

12) What is accessibility in HTML?


Accessibility means making websites usable for everyone, including people with
disabilities.
It can be implemented using semantic HTML, proper alt attributes, form labels,
keyboard navigation support, and ARIA roles when necessary.

13) What is ARIA in HTML?


ARIA stands for Accessible Rich Internet Applications
ARIA should be used only when semantic HTML cannot achieve the desired
accessibility.
ARIA provides additional attributes to improve accessibility, especially for:
 Screen readers
 Assistive technologies
 Dynamic content (like modals, dropdowns, sliders)
It helps when semantic HTML is not enough.
e.g.
<div role="button" aria-label="Close menu">X</div>
role="button" tells screen readers this div behaves like a button.
aria-label gives description.
14) Explain forms and input validation in HTML.
[A form is used to collect user input and send it to the server using GET or
POST method.
HTML5 provides built-in client-side validation using attributes like required,
pattern, and type.
However, server-side validation is also necessary for security.]
The <form> tag is used to collect user input and send it to the server for processing.
It contains input elements like <input>, <textarea>, <select>, and buttons.
When the user submits the form, the data is sent to the server using HTTP methods
like GET or POST.
e.g.
<form action="/login" method="POST">
<label for="email">Email</label>
<input type="email" id="email" required>

<input type="submit" value="Login">


</form>
Client-Side Validation
HTML5 provides built-in validation using:
 required
 minlength
 maxlength
 pattern
 type="email"
 type="number"
e.g. <input type="email" required>

15) What is the difference between: Cookies, Local Storage and Session Storage
Cookies, localStorage, and sessionStorage are browser storage mechanisms.
Cookies are small data stored and sent to the server with every request.
localStorage stores data permanently in the browser.
sessionStorage stores data only for the current session and clears when the tab closes.

16) What is the purpose of iframes?


An <iframe> (Inline Frame) is used to embed another HTML page inside the current
webpage.
[An iframe is used to embed another webpage within the current webpage. It is
commonly used for embedding videos, maps, or third-party content.]
Purpose of iframe
It allows you to:
 Embed YouTube videos
 Embed Google Maps
 Display external websites
 Show ads or third-party content

17) What are SEO-friendly HTML practices?


SEO-friendly HTML involves using semantic tags, proper heading structure,
descriptive meta tags, alt attributes for images, clean URLs, and optimized page
loading to help search engines understand and rank the page better.
18) How does browser rendering work?
When a webpage loads, the browser parses HTML to build the DOM tree and CSS to
build the CSSOM. These are combined into a render tree. The browser then calculates
the layout and paints the elements on the screen.
JavaScript can block rendering if it’s not handled properly.

19) How do you handle accessibility in HTML?


Accessibility in HTML is handled by using semantic elements, proper alt attributes
for images, form labels, keyboard navigation support, and ARIA roles when necessary
to support screen readers.

20) How do you optimise HTML for SEO?


HTML can be optimised for SEO by using semantic tags, proper heading structure,
descriptive meta tags, alt attributes for images, clean URLs, and optimising page load
speed.

21) What is progressive rendering?


Progressive rendering is a technique where content is displayed step by step as it
loads, instead of waiting for the full page to load, which improves user experience and
perceived performance.

22) What is Shadow DOM?


Shadow DOM allows encapsulation of a part of the DOM so that its styles and
structure are isolated from the main document. It is mainly used in Web Components
to prevent style and DOM conflicts.

23) What are custom data attributes in HTML? How are they used?
Custom data attributes allow us to store extra information in HTML elements using
the data- prefix. They can be accessed in JavaScript using the dataset property and are
commonly used for dynamic behaviour.

24) What are web components?


Web Components are a set of browser APIs that allow developers to create reusable
and encapsulated custom HTML elements using Custom Elements, Shadow DOM,
and HTML Templates.

CSS
1) Explain the Box Model.
The CSS box model describes how elements are structured and spaced.
It consists of:
 Content
 Padding
 Border
 Margin
Total width = content + padding + border + margin
box-sizing: border-box; makes width include padding and border.

2) Margin vs Padding
Margin Padding

Space outside the element Space inside the element

Separates elements Adds space within the border

e.g. div {
margin: 20px;
padding: 10px;
}

3) Position Types in CSS


static → default
relative → positioned relative to itself
absolute → positioned relative to nearest positioned parent
fixed → fixed to viewport
sticky → toggles between relative & fixed

4) Flexbox Basics
Flexbox is used for one-dimensional layout (row or column).
Important properties:
 display: flex
 justify-content
 align-items
 flex-direction
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}

5) Grid Basics
CSS Grid is used for two-dimensional layout (rows + columns).
Important properties:
 display: grid
 grid-template-columns
 grid-template-rows
 gap
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}

6) What is Specificity?
Specificity determines which CSS rule is applied when multiple rules target
the same element.
Priority:
1. Inline styles
2. ID selectors
3. Class selectors
4. Element selectors
Higher specificity wins.

6) Inline vs Internal vs External CSS


 Inline → inside element (style="")
 Internal → inside <style> tag
 External → separate .css file (best practice)
External CSS is preferred for maintainability.

7) Media queries usage


Used for responsive design.
e.g. @media (max-width: 768px) {
body {
background-color: lightgray;
}
}

8) What is Responsive Design?


Designing websites to work on different screen sizes (mobile, tablet, desktop).
Uses:
 Flexible layouts
 Media queries
 Relative units (rem, %)

9) How Do You Include External Resources in HTML?


e.g. <link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>

10) Explain z-index


 z-index controls stacking order of positioned elements.
 Higher z-index → appears on top.
 Works only when position is not static.

11) CSS variables and benefits


Declared using:
:root {
--main-color: blue;
}
Used as:
color: var(--main-color);
Benefits:

 Reusable
 Easy theme changes
 Cleaner code

12) Animations vs Transitions


Transition:
 Smooth change between two states
 Triggered by event (hover)
Animation:
 Multiple keyframes
 More complex movement
Example:
transition: all 0.3s ease;

13) How to Optimise CSS Performance?


 Remove unused CSS
 Minify files
 Use external CSS
 Avoid deep nesting
 Reduce large animations
14) What is overflow: hidden used for?
Hides content that exceeds container boundaries.
Example:
overflow: hidden;
Used for:
 Preventing scrollbars
 Clearing floats
 Image cropping

15) rem vs em vs px
 px → fixed size
 em → relative to parent
 rem → relative to root (html)
rem is preferred for responsive design.
16) Include External Resources (Repeat Question)
Same as before:
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>

JavaScript
1) Explain the event loop in your own words.
JavaScript is single-threaded, meaning it executes code in a single call stack.
Asynchronous operations like setTimeout or API calls are handled by Web
APIs.
When they complete, their callbacks go into a queue.
The event loop continuously checks if the call stack is empty and pushes
queued callbacks into the stack for execution.
e.g.
[Link]("Start");

setTimeout(() => {
[Link]("Timeout");
}, 0);

[Link]("End");
o/p: Start
End
Timeout

2) var / let / const


Featur const
var let
e
Block Block
Function- - -
Scope scope
scoped scope
d d

Yes Yes Yes


Hoisted (undefine (TDZ (TDZ
d) ) )

Reassig No
Yes Yes
n
var is function-scoped and can be reassigned.
let is block-scoped and can be reassigned.
const is block-scoped and cannot be reassigned.
let and const were introduced in ES6 to fix var-related issues.

3) Hoisting
Hoisting is JavaScript’s behavior where variable and function declarations are
moved to the top of their scope before execution.
 var → initialized as undefined
 let & const → hoisted but not initialized (Temporal Dead Zone)
 Function declarations → fully hoisted

4) Scope
Scope determines where variables can be accessed.
Types:
 Global scope
 Function scope
 Block scope
Example:
Variables declared with let or const inside {} are block-scoped.

5) Closures
A closure is when an inner function remembers variables from its outer
function even after the outer function has finished executing.
Used for:
 Data privacy
 Counters
 Event handlers
Simple Example:
function outer() {
let count = 0;
return function inner() {
count++;
[Link](count);
};
}

6) == vs ===
 == → compares value only (type coercion happens)
 === → compares value and type (strict comparison)

Always prefer ===.

7) Function Declaration vs Expression


Function Declaration:
function greet() {}
 Hoisted
Function Expression:
const greet = function() {};
Not hoisted

8) Promises
A Promise represents a future value of an asynchronous operation.
States:
 Pending
 Fulfilled
 Rejected
Example:
fetch(url)
.then(res => [Link]())
.catch(err => [Link](err));

9) Async/Await
Async/await is a cleaner way to handle promises.
 async makes function return a promise
 await pauses execution until promise resolves
 Use try/catch for error handling

10) call / apply / bind


Used to control this.
 call() → calls immediately, arguments separately
 apply() → calls immediately, arguments as array
 bind() → returns new function with fixed this
11) Debounce vs Throttle
 Debounce:
 Delays execution until user stops triggering event.
 Used in:
Search input.
 Throttle:
 Limits execution to once per specific time interval.
 Used in:
Scroll events.

12) Shallow vs Deep Copy


Shallow Copy:

 Copies only top-level properties


 Nested objects share reference
Deep Copy:
 Copies entire object including nested objects
13) Prototype Basics
JavaScript uses prototypal inheritance.
Objects inherit properties and methods from another object through the prototype chain.

If property not found:


JS looks up in prototype chain until null.

React
1. What is React?
React is a JavaScript library developed by Meta for building user interfaces,
especially single-page applications.
It uses a component-based architecture and a Virtual DOM for efficient rendering.

2. What is Virtual DOM?


Virtual DOM is a lightweight copy of the real DOM.
React updates the Virtual DOM first, compares it with the previous version (diffing),
and updates only the changed parts in the real DOM.

3. Props vs State
Props State
Passed from parent Managed inside component
Immutable Mutable
Props State
Used for configuration Used for dynamic data

4. Functional vs Class Components


Functional Class
Simpler More boilerplate
Use hooks Use lifecycle methods
Preferred in modern React Older approach
Today, functional components + hooks are preferred.

5. What are Hooks?


Hooks allow functional components to use state and lifecycle features.
Common hooks:
 useState
 useEffect
 useContext
 useMemo
 useCallback

6. useState Usage
const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>


{count}
</button>
It creates a state variable and a function to update it.

7. useEffect Lifecycle
useEffect is used for:
 API calls
 Subscriptions
 Timers
 Side effects
useEffect(() => {
[Link]("Component Mounted");
}, []);
Dependency array behavior:
 [] → runs once (mount)
 [value] → runs when value changes
 No array → runs on every render

8. Controlled Components
In controlled components, form data is controlled by React state.
<input
value={name}
onChange={(e) => setName([Link])}
/>
React becomes the single source of truth.

9. Keys in Lists
Keys help React identify which items changed, added, or removed.
{[Link](item => (
<li key={[Link]}>{[Link]}</li>
))}
👉 Keys must be unique and stable.

10. Component Reusability


React promotes reusable components.
Example:
 Button component
 Card component
 Modal component
This improves:
 Maintainability
 Scalability
 Code readability

React (Advanced)

1. useMemo vs useCallback

useMemo useCallback

Memoizes a value Memoizes a function

Returns computed value Returns memoized function

const memoizedValue = useMemo(() => compute(data), [data]);


const memoizedFunction = useCallback(() => doSomething(), []);
Used for performance optimization.

2. Context API

Context API allows data sharing without prop drilling.


const ThemeContext = createContext();
Best for:
 Theme
 Auth
 Language settings

3. Redux vs Context

Redux Context

External library Built-in

Good for large apps Good for small-medium apps

Middleware support Limited

Complex setup Simple setup

Redux is better when state logic becomes complex.

4. Lazy Loading in React


Lazy loading loads components only when needed.
const Home = [Link](() => import('./Home'));
Used with Suspense.
Improves initial load time.

5. Code Splitting
Code splitting breaks bundle into smaller chunks.
Methods:
 [Link]
 Dynamic imports
 Route-based splitting
Helps improve performance.

6. React Reconciliation
Reconciliation is the process React uses to compare the new Virtual DOM with the
old one and update only changed elements.
It uses:
 Diffing algorithm
 Keys for list optimization

7. SSR vs CSR
SSR CSR

Server Side Rendering Client Side Rendering

Better SEO Slower first load


SSR CSR

Faster initial paint Better for interactive apps

Framework like [Link] supports SSR.

8. Hydration Concept
Hydration is the process where React attaches event listeners to HTML rendered by
the server.
Used in SSR frameworks like [Link].

9. React Performance Optimization


 [Link]
 useMemo
 useCallback
 Code splitting
 Lazy loading
 Proper keys
 Avoid unnecessary re-renders

10. Error Boundaries


Error Boundaries catch JavaScript errors in child components.
Only available in class components.
componentDidCatch(error, info) {
[Link](error);
}
Prevents the entire app from crashing.

Backend Fundamentals (APIs + REST +


Middleware)

1. Difference between REST and SOAP


REST SOAP

Architectural style Protocol

Uses JSON (mostly) Uses XML only

Lightweight & fast Heavy & strict standards

Easier to use More secure (enterprise use)

Common in modern apps Used in banking/enterprise systems

REST is more popular in modern web development.


2. What is an API?
API (Application Programming Interface) allows two systems to communicate.
Example:
 Frontend sends request
 Backend sends response (JSON data)
APIs define:
 URL
 Method
 Request format
 Response format

3. HTTP Methods
Method Purpose

GET Fetch data

POST Create data

PUT Update entire resource

PATCH Update partial resource

DELETE Remove data

Example:
GET /users
POST /users

4. Explain CRUD Operations


CRUD stands for:
Operation HTTP Method

Create POST

Read GET

Update PUT / PATCH

Delete DELETE

Every backend system mainly performs CRUD operations.

5. What is an Endpoint?
An endpoint is a specific URL where API requests are sent.
Example:
[Link]
Here /users is the endpoint.

6. Role of Middleware
Middleware is a function that runs between request and response.
Used for:
 Authentication
 Logging
 Validation
 Error handling
 CORS
In [Link]:
[Link]((req, res, next) => {
[Link]("Request received");
next();
});
It modifies request/response before reaching controller.

7. Status Codes
✅ 2xx – Success
 200 → OK
 201 → Created
❌ 4xx – Client Error
 400 → Bad Request
 401 → Unauthorized
 403 → Forbidden
 404 → Not Found
💥 5xx – Server Error
 500 → Internal Server Error
 503 → Service Unavailable

8. RESTful vs GraphQL
REST GraphQL

Multiple endpoints Single endpoint

Overfetching possible Client controls data

Simple structure More flexible

Easy caching More complex caching

GraphQL is developed by Meta.


REST is simpler for beginners.

9. CORS Policy
CORS (Cross-Origin Resource Sharing) controls which domains can access your
API.
Example:
Frontend: localhost:3000
Backend: localhost:5000
Browser blocks request unless CORS is enabled.
In Express:
const cors = require('cors');
[Link](cors());

10. What is JWT?


JWT (JSON Web Token) is used for authentication.
Structure:
[Link]
Flow:
1. User logs in
2. Server generates token
3. Client stores token
4. Token sent in headers for protected routes
Used for stateless authentication.

11. Error Handling in Backend


Good error handling includes:
 Proper status codes
 Meaningful error messages
 Try-catch blocks
 Centralized error middleware
Example:
[Link]((err, req, res, next) => {
[Link](500).json( message: [Link] });
});
Best practices:
 Don’t expose internal errors
 Log errors properly
 Validate input data

Authentication & Security (Core)


1. Password Hashing
Password hashing converts a plain password into a secure, irreversible string.
Why?
 We should never store plain passwords in DB.
 Even if DB is leaked, passwords remain protected.
Common library in [Link]:
 bcrypt
const bcrypt = require('bcrypt');
const hashed = await [Link](password, 10);
👉 Hashing is one-way.
👉 During login, we compare using [Link]().

2. JWT Usage
JWT (JSON Web Token) is used for stateless authentication.
Structure:
[Link]
Flow:
1. User logs in
2. Server validates credentials
3. Server generates JWT
4. Client stores token (usually in HttpOnly cookie or localStorage)
5. Client sends token in Authorization header
Authorization: Bearer <token>
Used for protecting private routes.

3. OAuth 2.0 Overview


OAuth 2.0 is an authorization framework that allows third-party login.
Example:
 Login with Google
 Login with GitHub
Instead of sharing password, user grants access via provider.
Common providers:
 Google
 GitHub
Flow:
1. Redirect to provider
2. User grants permission
3. Provider sends access token
4. App verifies and logs in user

4. What is CSRF?
CSRF (Cross-Site Request Forgery) is when an attacker tricks a user into performing
unwanted actions while logged in.
Example:
User logged into banking site → attacker triggers money transfer.
Prevention:
 CSRF tokens
 SameSite cookies
 Proper authentication checks

5. Handling CORS
CORS (Cross-Origin Resource Sharing) controls which domains can access your
API.
Example:
Frontend: localhost:3000
Backend: localhost:5000
Enable CORS safely:
[Link](cors({
origin: "[Link]
credentials: true
}));
👉 Never allow * in production for sensitive APIs.

6. What is API Rate Limiting?


Rate limiting restricts the number of requests a user can make in a time period.
Why?
 Prevent brute force attacks
 Prevent DDoS
 Protect server resources
Example:
100 requests per 15 minutes per IP
In Express:
express-rate-limit middleware
7. Protection Against SQL Injection
SQL Injection happens when malicious SQL is injected into queries.
Bad:
SELECT * FROM users WHERE email = '${email}'
Safe methods:
 Parameterized queries
 ORM (like Prisma, Sequelize)
 Input validation
Example:
[Link]("SELECT * FROM users WHERE email = ?", [email]);

8. HTTPS vs HTTP
HTTP HTTPS

Not encrypted Encrypted

Port 80 Port 443

Vulnerable to attacks Secure

HTTPS uses SSL/TLS certificates.


👉 Always use HTTPS in production.

9. Types of Authentication
1. Session-based authentication
2. Token-based authentication (JWT)
3. OAuth authentication
4. Multi-factor authentication (MFA)
5. Biometric authentication
Modern apps mostly use JWT or OAuth.

10. Security Best Practices

✅ Hash passwords
✅ Use HTTPS
✅ Validate user input
✅ Use environment variables for secrets
✅ Implement rate limiting
✅ Use proper status codes
✅ Store tokens securely (HttpOnly cookies preferred)
✅ Keep dependencies updated
✅ Implement role-based access control (RBAC)
✅ Log suspicious activities

System Design Basics (Core)


1. What is System Design?
System design is the process of defining the architecture, components, and data flow
of a software system.
It focuses on scalability, reliability, maintainability, and performance.
Key aspects:
 Architecture (monolithic vs microservices)
 Database design
 Caching
 APIs and communication
 High availability

2. Load Balancing
Load balancing distributes incoming network traffic across multiple servers to ensure:
 Better performance
 High availability
 No single server overload
Types:
 Round-robin
 Least connections
 IP hash
Common tools:
 Nginx
 HAProxy
 AWS ELB

3. Database Scaling
Scaling a database ensures it can handle increased traffic.
Types:
1. Vertical scaling – increase server resources (CPU, RAM)
2. Horizontal scaling – add more servers (sharding, partitioning)
Horizontal scaling is preferred for large apps.

4. Microservices Concept
Microservices architecture splits a monolithic app into small, independent services.
Benefits:
 Independent development & deployment
 Better scalability
 Fault isolation
Challenges:
 Inter-service communication
 Distributed transactions
 Monitoring complexity

5. Caching Strategies
Caching improves performance by storing frequently accessed data.
Types:
 Client-side caching – browser cache
 Server-side caching – Redis, Memcached
 CDN caching – static assets (images, JS, CSS)
Strategies:
 Cache Aside
 Read Through
 Write Through

6. CAP Theorem
CAP theorem states that a distributed system can only have 2 out of 3:
1. Consistency – all nodes see the same data
2. Availability – system responds to every request
3. Partition Tolerance – system works despite network failures
Example:
 NoSQL DBs like Cassandra → AP system (Availability + Partition Tolerance)
 Traditional SQL → CP system (Consistency + Partition Tolerance)

7. Event-Driven Architecture
In event-driven systems, components communicate through events rather than direct
calls.
 Useful for decoupled systems
 Example: Order service emits “order_created” → Inventory service listens and
updates stock
Tools:
 Kafka
 RabbitMQ
 AWS SNS/SQS

8. CDNs (Content Delivery Network)


CDNs are distributed servers that deliver static content quickly to users based on
their location.
Benefits:
 Reduced latency
 High availability
 Offloads origin server
Popular CDNs:
 Cloudflare
 AWS CloudFront
 Akamai

9. Message Queues
Message queues allow asynchronous communication between services.
Benefits:
 Decoupling services
 Handling spikes in traffic
 Reliable processing
Examples:
 RabbitMQ
 Kafka
 AWS SQS
Flow:
Producer → Queue → Consumer

10. Database Replication


Replication creates copies of the database for:
 High availability
 Load distribution
 Disaster recovery
Types:
 Master-Slave (Primary-Replica)
 Master-Master (Bidirectional)
Replication ensures read-heavy apps can scale horizontally.

Popular System Design Interview


Problems
1. Design a URL Shortener (like [Link])
Requirements:
 Shorten long URLs
 Redirect to original URL
 Track analytics (optional)
Key Components:
 API: /shorten and /expand
 Database: Store short_code -> original_url
 Short code generation: Hash, Base62, or sequence
 Caching: Use Redis for fast redirect
 Optional: Analytics table for clicks
Challenges:
 Handle collisions
 Scalability for billions of URLs

2. Design a Social Media Platform


Requirements:
 Users, posts, likes, comments
 Follow/unfollow system
 Newsfeed
Key Components:
 Database: Users table, Posts table, Followers table
 Feed generation: Pull vs Push
 Caching: Redis/Memcached for hot posts
 Media storage: S3 or CDN for images/videos
Challenges:
 Newsfeed generation at scale
 Handling large number of followers
 Real-time notifications

3. Design a Message Queue Service


Requirements:
 Asynchronous communication
 Publish/subscribe model
Key Components:
 Producer sends messages
 Queue stores messages
 Consumer processes messages
 Persistence: Optionally store messages to disk
 Ordering & delivery guarantees: At-least-once / at-most-once / exactly-once
Tools/Tech: Kafka, RabbitMQ, SQS

4. Design an E-commerce Website


Requirements:
 Product catalog, cart, orders, payments
Key Components:
 Frontend: Product listing, search, checkout
 Backend: APIs for product, cart, payment
 Database: Products table, Orders table, Users table
 Caching: Popular products, inventory counts
 Payment integration: Stripe/PayPal
 Scalability: Microservices per domain (catalog, order, payment)
Challenges:
 Inventory consistency
 High traffic during sales
 Handling payments securely

5. Design a Web Crawler


Requirements:
 Crawl websites
 Index pages
 Avoid duplicate crawling
Key Components:
 Scheduler: Track URLs to crawl
 Crawler workers: Fetch pages
 Parser: Extract links & content
 Storage: Database/Elasticsearch for content
 Queue: URLs to crawl next
Challenges:
 Respect [Link]
 Handle large-scale crawling
 Avoid loops and duplicates

6. Design a File Sharing System


Requirements:
 Upload, download, share files
 Support large files
Key Components:
 Storage: Cloud storage (S3) or distributed file system
 Metadata DB: File info, user permissions
 Authentication: Who can access files
 Caching: Frequently accessed files
 Security: File encryption
Challenges:
 Large file uploads
 File versioning
 Access control

7. Rate Limiting Service


Requirements:
 Limit number of requests per user/IP per time window
Key Components:
 In-memory store: Redis for counters
 Algorithms: Token bucket, Leaky bucket
 Integration: API gateway or backend service
 Distributed setup: Handle multiple backend nodes
Challenges:
 Avoid race conditions
 Distributed consistency

8. Design a Newsfeed like Facebook


Requirements:
 Display posts from friends
 Likes/comments
 Sorting by relevance
Key Components:
 Feed generation: Push model (precompute) vs Pull model (compute on read)
 Database: Posts, Users, Likes, Comments
 Caching: Hot posts in Redis/Memcached
 Ranking algorithm: Most relevant posts on top
Challenges:
 Scaling to millions of users
 Personalized ranking
 Real-time updates

9. Design a Cab Booking Service (like Uber)


Requirements:
 Find nearby drivers
 Book rides
 Track location in real-time
Key Components:
 Drivers & Riders DB
 Matching service: Find nearest driver
 Geolocation: Store coordinates, calculate distance
 Real-time tracking: WebSocket or push notifications
 Pricing & payment service
Challenges:
 Real-time location updates
 High availability
 Surge pricing & dynamic matching

DevOps & Deployment (Core)

1. What is DevOps?
DevOps is a culture and set of practices that combine development and operations
to deliver software faster and more reliably.
Goals:
 Continuous integration and delivery
 Automation of deployment & testing
 Collaboration between dev and ops teams
Key practices:
 CI/CD pipelines
 Infrastructure as code (IaC)
 Monitoring & logging
 Containerization

2. CI/CD Pipelines
CI/CD stands for Continuous Integration and Continuous Deployment/Delivery.
Flow:
1. CI – Developers push code → automatic build & tests run
2. CD – Code deployed automatically (or approved for deployment)
Tools:
 CI: Jenkins, GitHub Actions, GitLab CI, CircleCI
 CD: Jenkins, ArgoCD, Spinnaker, GitHub Actions
Benefits:
 Faster feedback
 Reduced manual errors
 Faster delivery

3. Docker Basics
Docker allows packaging an application with its dependencies into a container.
Key concepts:
 Image: Read-only template
 Container: Running instance of an image
 Dockerfile: Instructions to build an image
Example:
FROM node:20
WORKDIR /app
COPY [Link] .
RUN npm install
COPY . .
CMD ["node", "[Link]"]

4. Container Orchestration
Container orchestration manages multiple containers across servers.
Key tasks:
 Scaling
 Load balancing
 Health checks
 Auto-recovery
Tools:
 Kubernetes
 Docker Swarm
 AWS ECS / EKS

5. Load Balancing
Load balancers distribute traffic to multiple servers.
 Ensures high availability
 Prevents server overload
 Common algorithms: Round-robin, least connections, IP hash
Tools:
 Nginx, HAProxy, AWS ELB

6. Monitoring and Logging


Monitoring & logging are critical for detecting issues in production.
Monitoring: Track CPU, memory, disk usage, uptime
 Tools: Prometheus, Grafana, New Relic
Logging: Capture application events/errors
 Tools: ELK stack (Elasticsearch, Logstash, Kibana), Loki, CloudWatch
Benefits:
 Quick troubleshooting
 Detect anomalies
 Improve reliability

7. Kubernetes Overview
Kubernetes (K8s) is a container orchestration platform.
Key concepts:
 Pod: Smallest deployable unit (1 or more containers)
 Deployment: Manages pod replicas
 Service: Exposes pods to network
 Ingress: Manages external access
 ConfigMap/Secret: Stores configuration and secrets
Benefits:
 Auto-scaling
 Self-healing
 Rolling updates

8. Rate Limiting Service


DevOps relevance:
 Protects APIs from abuse
 Manages traffic spikes
 Can be implemented at API gateway or server level
Example tools:
 Nginx rate limit
 Redis token bucket
 Cloudflare or AWS API Gateway built-in

9. Design a Newsfeed like Facebook


DevOps considerations:
 Microservices deployment: Posts, Likes, Comments as separate services
 Caching layer: Redis/Memcached for hot posts
 Scaling: Autoscale based on load using Kubernetes HPA
 Monitoring: Track feed latency & errors

10. Design a Cab Booking Service


DevOps considerations:
 Real-time tracking: WebSocket or MQTT for driver updates
 Load balancing: Multiple API servers for high traffic
 Scaling: Horizontal scaling for matching service
 CI/CD: Automatic deployment of microservices
 Monitoring: Track ride matching latency, API errors

You might also like