Madddd
BASIC DEFINITIONS
Static Website
Fixed content, same for all users, no server processing
Dynamic Website
Content changes based on user/data, uses backend
Web Application
Interactive software running in browser (like Gmail)
Frontend vs Backend
Frontend → UI (HTML, CSS, JS)
Backend → Server, database, logic
Full Stack Development
Working on both frontend + backend
SPA (Single Page Application)
Loads one page, updates content dynamically
Advantages of SPA
Fast, smooth UX, less reload, better performance
🔹 NODE.JS + BACKEND
Node.Js
Runtime to run JavaScript on server
Why Popular
Fast, non-blocking, same language (JS), scalable
Asynchronous Programming
Tasks run without waiting (non-blocking)
Event-Driven Architecture
Actions triggered by events (click, request)
Express.Js
Framework for Node.Js to build servers easily
Why Express over Node
Simpler, routing + middleware support
Routing
Define URL → function mapping
Middleware
Function between request & response
Body-Parser
Reads request body data
Morgan
Logs HTTP requests
🔹 SERVER + HTTP
Server
System that handles requests & sends responses
HTTP Request-Response Cycle
Client sends request
Server processes
Server sends response
HTTP Methods
GET, POST, PUT, PATCH, DELETE
CRUD Mapping
Create → POST
Read → GET
Update → PUT/PATCH
Delete → DELETE
🔹 API CONCEPTS
API
Interface to communicate between systems
REST API
Uses HTTP methods + URLs
Endpoint
Specific API URL
Query Parameters
Extra data in URL (?Id=1)
Path Parameters
Part of URL (/user/1)
JSON
Data format (key-value pairs)
JSON vs JS Object
JSON → string format
JS Object → actual object
Serialization
Object → JSON
Parsing
JSON → Object
API Authentication
Verifies user identity
🔹 REACT BASICS
React
Library for building UI
Why React
Fast, reusable components, Virtual DOM
JSX
HTML-like syntax in JS
Babel
Converts JSX → JS
Virtual DOM
Copy of real DOM for fast updates
React Component
Reusable UI block
Props
Read-only data passed to component
State
Internal data of component
Props vs State
Props → external, read-only
State → internal, changeable
Reusability
Use components multiple times
Declarative Programming
Describe UI, React handles updates
🔹 REACT HOOKS & EVENTS
useState Hook
Manages state in functional components
Controlled Components
Form inputs controlled by state
Event Handling
Handling user actions (click, input)
onClick
Runs function on click
Form Handling
Manage input + submit
preventDefault()
Stops page reload
🔹 RENDERING
Conditional Rendering
Show UI based on condition
List Rendering (map)
Render list of items
Key
Unique identifier for list items
SSR vs CSR
SSR → server renders page
CSR → browser renders page
🔹 ADVANCED
Middleware Chaining
Multiple middleware run in sequence
React Re-render
Triggered when state/props change
Separation of Concerns
Divide app into parts (UI, logic, data)
🧠 LONG ANSWER KEY POINTS (ULTRA SHORT)
Web App Architecture
Client → API → Server → Database
Frontend-Backend Communication
Uses APIs (HTTP requests)
Data Flow
UI → API → Backend → DB → Response → UI
Static vs Dynamic vs SPA
Static → fixed
Dynamic → server-based
SPA → client-based
Node.Js Architecture
Single-thread + event loop
Event Loop
Handles async tasks
Express Flow
Request → Middleware → Route → Response
REST Principles
Stateless, resource-based, HTTP methods
API Request Structure
URL + Method + Headers + Body
API Response
Data + status code (200, 404, 500)
Auth Types
Basic, Token (JWT), API Key
Rate Limiting
Limits number of requests
Axios
HTTP client
Async/Await vs Then
Async → cleaner
Then → chaining
React Architecture
Component-based
Virtual DOM Working
Compare → update only changes
Props vs State Use
Props → pass data
State → manage data
Controlled Forms
Inputs linked with state
Conditional Rendering
if / ternary
List + Keys
Map + unique key
Monolithic vs Microservices
Mono → single system
Micro → multiple small services
API Lifecycle
Request → Server → DB → Response
React State Update
Batched, async updates