Zahid | Portfolio

Blog

My blog posts about web development, programming, and other topics.

fullstackBy Zahid

Modular Monolith

Imagine: React Application │ ├── Expenses ├── Loans ├── Reports ├── Dashboard └── Users Each feature has boundaries. Expenses ├── components ├── hooks ├── api └── types Loans ├── components ├── hooks ├── api └── types But everything still builds and deploys together. That's essentially a: modular Monolith And this is often a very good default architecture . because clear boundaries feature ownership easier testing easier development simpler deployment less infrastructure complexity without immediately introducing Micro Frontends.

#reactjs#nextjs

fullstackBy Zahid

Monolithic Frontend

React App │ ┌───────────────┼───────────────┐ ↓ ↓ ↓ Dashboard Expenses Loans │ │ │ └───────────────┼───────────────┘ ↓ Build ↓ Single Deployment A frontend monolith means the application is deployed as one application. Everything belongs to the same application.

#reactjs#nextjs

fullstackBy Zahid

Why do we need architecture?

When designing architecture, we usually want: Maintainability : Can another developer understand and modify the code? Scalability : Can the application grow without becoming unmanageable? Reusability: Can common functionality be reused without creating tight coupling? Testability: Can individual parts be tested independently? Reliability: Can failures be isolated? Performance: Can we optimize different parts independently? Developer Experience: Can multiple developers work simultaneously without constantly conflicting? Evolvability: Can we change technologies or requirements without rewriting everything? The most important concept: Trade-offs There is no architecture that is universally "best." I would choose the architecture based on the application's size, domain complexity, team structure, deployment requirements, and expected growth.

#other#reactjs#nextjs#nodejs

frontendBy MARK ZUCKERBURG

React Router: The Complete Guide to Client-Side Routing in React Applications

React Router: The Complete Guide to Client-Side Routing in React Applications Introduction Modern web applications are expected to provide seamless navigation experiences without requiring full page reloads. Users want websites that feel fast, responsive, and similar to native applications. This is where React Router comes into play. React Router is the standard routing library for React applications, enabling developers to build Single Page Applications (SPAs) with dynamic navigation and URL management. It allows users to move between different pages while maintaining a smooth user experience. In this guide, we'll explore React Router, its benefits, core concepts, and how to implement routing effectively in modern React applications. What is React Router? React Router is a routing library for React that enables navigation between different components based on the URL. Unlike traditional websites where each page request loads a new HTML document from the server, React Router updates the UI dynamically without refreshing the entire page. This approach provides: Faster navigation Better user experience Reduced server requests Improved application performance Why Use React Router? Without React Router, a React application would typically render everything from a single component, making navigation difficult and inefficient. React Router helps by: 1. Enabling Single Page Applications (SPAs) Users can navigate between pages without full page reloads. 2. Managing URLs Efficiently Each page gets its own unique URL, making applications shareable and bookmark-friendly. 3. Improving User Experience Page transitions feel instant because only components are updated. 4. Supporting Nested Navigation Complex applications can organize routes hierarchically. 5. Enhancing SEO Possibilities When combined with server-side rendering frameworks, routing improves discoverability. Installing React Router To get started, install React Router using npm: npm install react-router-dom For modern React applications, react-router-dom provides all the routing functionality needed for web projects. Setting Up React Router The first step is wrapping your application with BrowserRouter . import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> ); This enables routing capabilities throughout the application. Creating Routes React Router uses the Routes and Route components to define navigation paths. import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Contact from './pages/Contact'; function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> ); } export default App; In this example: / displays the Home page /about displays the About page /contact displays the Contact page Navigation with Link Instead of using traditional anchor tags, React Router provides the Link component. import { Link } from 'react-router-dom'; function Navbar() { return ( <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/contact">Contact</Link> </nav> ); } Benefits of using Link : Prevents page refreshes Preserves application state Improves performance Dynamic Routes Many applications need routes based on dynamic values. For example: <Route path="/users/:id" element={<UserProfile />} /> Access the parameter: import { useParams } from 'react-router-dom'; function UserProfile() { const { id } = useParams(); return <h1>User ID: {id}</h1>; } Example URLs: /users/1 /users/25 /users/100 Each route loads the same component with different data. Nested Routes Large applications often require layouts with nested pages. Example: <Route path="/dashboard" element={<Dashboard />}> <Route path="profile" element={<Profile />} /> <Route path="settings" element={<Settings />} /> </Route> This structure keeps routes organized and maintainable. Programmatic Navigation Sometimes navigation needs to occur after an action such as form submission. React Router provides the useNavigate hook. import { useNavigate } from 'react-router-dom'; function Login() { const navigate = useNavigate(); const handleLogin = () => { navigate('/dashboard'); }; return <button onClick={handleLogin}>Login</button>; } This allows developers to redirect users programmatically. Protected Routes Many applications require authentication before accessing certain pages. Example: import { Navigate } from 'react-router-dom'; function ProtectedRoute({ user, children }) { if (!user) { return <Navigate to="/login" />; } return children; } Usage: <Route path="/dashboard" element={ <ProtectedRoute user={currentUser}> <Dashboard /> </ProtectedRoute> } /> This ensures only authenticated users can access protected pages. Handling 404 Pages Every application should handle unknown routes gracefully. <Route path="*" element={<NotFound />} /> This route catches URLs that do not match any defined path. Example message: function NotFound() { return <h1>404 - Page Not Found</h1>; } React Router Best Practices Keep Routes Organized Store route definitions in a dedicated file for larger projects. Use Lazy Loading Load components only when needed. const Dashboard = React.lazy(() => import('./Dashboard')); This improves application performance. Protect Sensitive Routes Always secure pages containing user or business data. Create Reusable Layouts Use nested routes for dashboards, admin panels, and account sections. Implement Error Handling Always provide fallback routes and error boundaries. Real-World Applications of React Router React Router is commonly used in: SaaS platforms E-commerce websites Social media applications Learning management systems CRM software Admin dashboards Portfolio websites Virtually every modern React application benefits from routing capabilities. React Router vs Traditional Navigation FeatureReact RouterTraditional WebsitesPage ReloadsNoYesSpeedFastSlowerUser ExperienceSmoothInterruptedState PreservationYesLimitedPerformanceHighModerate React Router delivers a significantly better user experience for modern web applications. Conclusion React Router is an essential tool for building modern React applications. It enables developers to create intuitive navigation systems, manage URLs effectively, protect routes, and deliver seamless user experiences. Whether you're building a simple portfolio website or a complex enterprise dashboard, React Router provides the flexibility and power needed to create scalable and maintainable applications. As React continues to dominate frontend development, mastering React Router remains one of the most valuable skills for modern web developers.

#reactjs

cloudBy ELON MUSK

Docker: The Complete Guide to Modern Application Deployment

Introduction In today's fast-paced software development world, developers need a reliable way to build, test, and deploy applications across different environments. One of the most revolutionary technologies that has transformed software deployment is Docker . Docker allows developers to package applications along with all their dependencies into lightweight, portable containers that can run consistently on any machine. Whether you're developing a small web application or managing large-scale cloud infrastructure, Docker simplifies the deployment process and eliminates the infamous "it works on my machine" problem. What is Docker? Docker is an open-source containerization platform that enables developers to package applications and their dependencies into isolated environments called containers . A Docker container includes: Application code Runtime environment System libraries Dependencies Configuration files This ensures that the application behaves the same way regardless of where it is deployed. Why Docker Matters Before Docker, developers often faced compatibility issues when moving applications between development, testing, and production environments. For example: The application works on the developer's computer. It fails on the testing server. It behaves differently in production. Docker solves this by creating standardized environments that can run anywhere. Key Benefits 1. Consistency Across Environments Docker containers ensure that applications run exactly the same way in development, staging, and production. 2. Faster Deployment Containers start within seconds, making deployments significantly faster compared to traditional virtual machines. 3. Resource Efficiency Unlike virtual machines, containers share the host operating system kernel, reducing memory and CPU usage. 4. Scalability Docker makes it easy to scale applications horizontally by running multiple container instances. 5. Simplified Dependency Management All dependencies are packaged inside the container, eliminating version conflicts. Docker Architecture Docker consists of several core components: Docker Engine The main runtime responsible for creating and managing containers. Docker Images Read-only templates used to create containers. Docker Containers Running instances of Docker images. Docker Registry A centralized repository for storing and sharing Docker images. Popular registries include: Docker Hub GitHub Container Registry Amazon Elastic Container Registry (ECR) Understanding Docker Images A Docker image is essentially a blueprint for creating containers. Images are built using a file called a Dockerfile . Example: FROM node:20 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "start"] This Dockerfile: Uses Node.js as the base image. Creates a working directory. Installs dependencies. Copies application files. Starts the application. What are Docker Containers? A container is a running instance of a Docker image. You can create multiple containers from the same image. Example: docker run -d -p 3000:3000 my-app This command: Runs the container in detached mode. Maps port 3000. Starts the application. Docker vs Virtual Machines FeatureDocker ContainersVirtual MachinesStartup TimeSecondsMinutesResource UsageLowHighOperating SystemShared KernelSeparate OSPerformanceNear NativeSlowerPortabilityExcellentGood Docker containers are significantly lighter and more efficient than traditional virtual machines. Common Docker Commands Pull an Image docker pull nginx Run a Container docker run -d nginx List Running Containers docker ps Stop a Container docker stop <container-id> Remove a Container docker rm <container-id> View Images docker images Docker Compose Managing multiple containers individually can become difficult. Docker Compose allows you to define and run multi-container applications using a YAML file. Example: version: '3' services: frontend: build: . ports: - "3000:3000" database: image: postgres:16 environment: POSTGRES_PASSWORD: secret Start everything with: docker-compose up This is especially useful for full-stack applications that include: Frontend Backend Database Cache Message queues Docker in Cloud Environments Docker has become a standard technology across cloud platforms such as: AWS Google Cloud Microsoft Azure DigitalOcean Containerized applications can be deployed seamlessly across cloud infrastructure, reducing deployment complexity and improving scalability. Best Practices for Docker Use Lightweight Base Images Choose smaller images like Alpine Linux whenever possible. Minimize Layers Combine commands to reduce image size. Use Environment Variables Avoid hardcoding sensitive information. Keep Images Updated Regularly update dependencies and security patches. Scan for Vulnerabilities Use security scanning tools before deployment. Real-World Use Cases Docker is widely used for: Web application deployment Microservices architecture Continuous Integration/Continuous Deployment (CI/CD) Development environments Testing automation Cloud-native applications AI and Machine Learning workloads Companies ranging from startups to large enterprises rely on Docker to streamline their software delivery processes. Conclusion Docker has revolutionized the way applications are built, shipped, and deployed. By packaging applications into portable containers, developers can ensure consistency, improve scalability, reduce deployment issues, and accelerate software delivery. Whether you're a beginner learning modern development practices or an experienced engineer building cloud-native applications, Docker is an essential tool that can dramatically improve your development workflow. As organizations continue adopting DevOps and cloud technologies, Docker remains one of the most valuable skills for developers and IT professionals in the modern software industry.

#aws#nextjs#other

frontendBy Zahid

What is CSP (Content Security Policy)

A CSP can be used to control the resources that a document is allowed to load. This is primarily used for protection against cross-site scripting (XSS) attacks.

#reactjs#nextjs

frontendBy Zahid

XSS( Cross-site-scripting)

Cross-site scripting (XSS) is a web vulnerability where attackers inject malicious client-side scripts (usually JavaScript) into trusted websites. XSS can be prevented by escaping user input and avoiding direct HTML injection. Prevention: React JSX auto-escape content. Avoid dangerouslySetInnerHTML input sanitize/validate Use CSP

#reactjs#nextjs

frontendBy Zahid

What is Dependency vulnerabilities?

Dependency vulnerabilities come from third-party libraries, so we regularly audit and update packages to keep the application secure. Comes from npm packages / external libraries Even if your code is safe → dependency can be unsafe Common in outdated packa How to detect npm audit yarn audit

#reactjs

frontendBy Zahid Khan

What is polling?

Polling involves a client repeatedly sending requests to a server at regular to check for new updates or new data. It operates on the standard HTTP request-response model. Types of polling? Short Polling Long Polling What is Short Polling? Short polling: In Short polling it means the client sends request to the server at fixed intervals, regarding whether data has changed. How Short polling works? Client send http request Server immediately responds with current data. Client waits for a fixewd time (e.g 5 seconds). Cycle repeat endlessly. Use Cases of Short Polling? Simple dashboard. Periodic status checks. Low-priority data refresh. Legacy system. Backup/fallback mechanism. Drawbacks of Short Polling Requests even when nothing changes. High server and network load and request. Delayed updates. Battery drain on mobile. Poor scalability with many clients. What is Long Polling? The server holds the client's request open until new data is available or timeout is reached. Once data is sent, the connection closes, and the client immediately send a new request. How Long polling works? Client sends an HTTP req. Server does not respond immediately. Server waits for new data or timeout. When data changes ---> server reponds. Then Client send new request. Use Cases of Long Polling? Notification systems (older) Chat apps (older) Real-time feed(legacy) Environment where web socket is blocked. Drawbacks of Long Polling? Holds server connection open. More complex server logic. Still not true real time. Difficult to scale. Can overload.

#javascript#reactjs

frontendBy Zahid

There is an issue on production then how do you debug and fix it ?

Flow - Understand → Reproduce → Identify → Fix → Test → Deploy → Prevent If an issue occurs in production, first I try to understand the problem by checking logs, monitoring tools like Sentry, and browser console errors. Then I check recent deployments or commits because production issues are often caused by recent changes. After that I try to reproduce the issue locally or in staging. Once reproduced, I debug using tools like Chrome DevTools, checking network requests, API responses, and component states. After identifying the root cause, I implement the fix and test it locally and in staging. If it’s a critical issue, we deploy a hotfix. Finally, I ensure proper tests, logging, and error handling are added to prevent similar issues in the future.

#javascript#reactjs#nextjs

backendBy Zahid Khan

What is Aggregation in MongoDB?

Aggregation is used to process and transform data and return computed results (like sum, count, average, grouping). Why We Use Aggregation: We use aggregation when we need: Grouping data Calculations (sum, avg, count) Filtering large datasets Data transformation Analytics / reports Example use cases: Total sales per customer Average salary per department Count users by city //orders { "customer": "Zahid", "amount": 100 } { "customer": "Ali", "amount": 200 } { "customer": "Zahid", "amount": 300 } db.orders.aggregate([ { $group: { _id: "$customer", totalAmount: { $sum: "$amount" } } } ]); //output [ { "_id": "Zahid", "totalAmount": 400 }, { "_id": "Ali", "totalAmount": 200 } ]

#mongo

backendBy Zahid Khan

What is MongoDB?

MongoDB is a NoSQL document database that stores data in JSON-like BSON documents instead of tables. SQL: Tables-> Rows -> Fixed Schema -> JOIN MongoDB: Collections -> Collections -> Documents -> Flexible Schema -> $lookup A document is a JSON-like object stored inside a collection. A collection is a group of documents (similar to a table in SQL). Every MongoDB document has a unique _id field automatically generated. BSON is Binary JSON , the format MongoDB uses internally to store data. MongoDB Queries : db.users.find() -> Find all users db.users.find({ age: 25 }) -> Find user by age db.users.insertOne({ name: "Zahid",age: 28}) -> Insert document db.users.updateOne({ name: "Zahid" }, { $set: { age: 29 } }) -> Update user db.users.deleteOne({ name: "Zahid" }) -> Delete User

#mongo

frontendBy Zahid

LCP and FID / INP & CLS

LCP(large content paint) measures how fast the main content of the page becomes visible to the user. we can compress images Preload critical images/assets and Reduce JS bundle size using SSR / SSG / edge caching. Good score: ≤ 2.5 seconds FID / INP (First Input Delay / Interaction to Next Paint) : It measure how fast the page responds when a user interacts (click, tap, input). Reduce main-thread work by splitting JS bundles and deferring non-critical scripts. Good score: ≤ 100 ms CLS( cumulative layout shift): It meassure how much the layout shifts unexpectedly. CLS Always define image dimensions Reserve space for dynamic content Use skeleton loaders Avoid inserting content above existing content good score: ≤ 0.1

#reactjs#nextjs

frontendBy Zahid Khan

What is CLS (Cumulative Layout Shift)?

CLS measures unexpected layout shifts while the page is loading. We prevent it by defining : Image dimensions Reserving layout space Avoiding dynamic content shifts. Good: <0.1

#reactjs#nextjs

frontendBy Zahid Khan

Diff Between Reconciliation and React Fiber?

Reconciliation is the process where React compares the old and new Virtual DOM to determine what needs to change in the real DOM. React Fiber is the new architecture introduced in React 16 that implements reconciliation in a more efficient way. Fiber enables incremental rendering, priority scheduling, and interruptible updates. So reconciliation is the concept, and Fiber is the engine that powers it.

#reactjs#nextjs

backendBy Zahid Khan

What is PM2?

PM2 is a production process manager that can run applications in cluster mode while also providing features like automatic restarts, monitoring, logging, and zero-downtime deployment.

#nodejs

backendBy Zahid Khan

What is cluster in node js?

Node js is single thread it allow us to create multiple worker processes to utilize CPU cores. It helps to improve the performance and handle more concurrent requests by running multiple instance of the application on same machine.

#nodejs

frontendBy Zahid Khan

What is FID (First input delay)?

It is measure delay between user first interaction and browser responds. It mainly happened due to js main thread block by heavy js. We improve it by reducing JS execution time and using code splitting. Good: < 100ms

#reactjs#nextjs

fullstackBy Zahid Khan

What is CDN?

A CDN is a geographically distributed network of servers that delivers static content from the nearest location to the user. We use it to reduce latency, improve performance, handle traffic spikes, and enhance security with features like DDoS protection and caching.

#nextjs#javascript#reactjs#nodejs

frontendBy Zahid Khan

What is LCP?

LCP measures how fast main content becomes visible to user. We can improve LCP optimize hero image reduce bundle js size and pre load critical assets. In next js we can use SSG/ISR technique to fast load.

#reactjs#nextjs

fullstackBy Zahid Khan

how to prevent brute force attacks.

A brute force attack is when an attacker repeatedly tries multiple password combinations to gain unauthorized access. To prevent this, I implement rate limiting on login endpoints, account lock mechanisms, and CAPTCHA verification. I also enforce strong password policies and use two-factor authentication for extra security.

#javascript#reactjs#nodejs

fullstackBy Zahid Khan

What is difference between REST API and WebSocket?

REST APIs follow a stateless request-response model and are ideal for CRUD operations. Each request is independent and connection closes after response. WebSockets create a persistent bidirectional connection between client and server. They are suitable for real-time features like chat and live notifications. REST is better for structured data fetching, while WebSockets are used when instant updates are required.

#nodejs#reactjs

frontendBy Zahid

What is Reconciliation process?

Reconciliation is the process where React compares the new Virtual DOM with the previous Virtual DOM to determine the minimal changes needed in the real DOM. React uses a diffing algorithm that: Compares elements of the same type Uses keys to track list items Updates only the parts of the DOM that changed

#reactjs

frontendBy Zahid

React Rendering Lifecycle

React rendering lifecycle has two major phases: Render Phase and Commit Phase. Render Phase: React calls the component function to compute the JSX. It builds a new Virtual DOM and compares it with the previous one. Commit Phase: React applies the minimal changes to the real DOM.

#reactjs

frontendBy Zahid

What new update in React 19v?

Stable Server Components (RSC): Allows components to run on the server by default. New use() API: Allows directly awaiting promises inside components. React 19 introduces Server Actions: Forms can call server functions without creating separate API routes. useFormStatus() – track pending form submissions useFormState() – manage form state easily Better Hydration & Streaming: Smarter hydration error handling, Better streaming performance, More efficient rendering of async content

#reactjs

frontendBy Zahid

How SSR Worked Before React 19

Before React-19 version we can use ssr in react with the help of manual setup of node+reactDOM server. import ReactDOMServer from 'react-dom/server' const html = ReactDOMServer.renderToString( ) following: Render React components to HTML on the server Send the HTML to the browser Hydrate it using ReactDOM.hydrate() From React 18, we could also use: renderToPipeableStream() (streaming SSR) renderToReadableStream() (for edge runtimes)

#reactjs#javascript

frontendBy Zahid

Why Next.js Uses Hydration?

It pre-render the page and sends HTML for SEO and fast first paint. Hydration enables the event handling, client side routing and state update. Without hydration, Next.js pages would be static like plain HTML.

#nextjs#javascript

frontendBy Zahid

Hydration Error?

Hydration mismatch error happens while server generated html content does not match with client render output. This usually occurs due to non-deterministic values like Math.random(), timestamps, locale differences, or conditional rendering based on window or browser-only APIs.

#reactjs#nextjs#javascript

frontendBy Zahid

is it safe to use dangerouslySetInnerHTML?

SAFE: It’s safe when the value you pass to dangerouslySetInnerHTML is fully static. UNSAFE: It’s not safe when that value includes unsanitized user input or other untrusted data, because someone could inject HTML/script (e.g. ...) and run code in the page.

#javascript#reactjs#nextjs

frontendBy Zahid Khan

what event loop?

The Event Loop is a mechanism that allows Node.js to perform non-blocking I/O operations. It continuously checks the call stack and callback queue, executing callbacks once the stack is empty.

#javascript

frontendBy Zahid

What is sitemap?

The sitemap is used so search engines can discover and index your site; product pages are added so those important, public URLs are explicitly included and get better crawling and SEO.

#nextjs#reactjs

frontendBy Zahid Khan

What is caching?

Caching is a technique to store the previously computed or fetched data so we do not need to re-computed or refetch it again. In JavaScript, we cache data using objects, Maps, closures, or browser storage. In React, caching is commonly done using memoization hooks like useMemo, useCallback, API cache libraries like React Query, or browser storage.”

#javascript#reactjs

frontendBy Zahid

LCP and FID / INP and CLS

LCP measures how fast the main content of the page becomes visible to the user. “To improve LCP, I optimize hero images, preload critical assets, and reduce render-blocking scripts.” Common causes of poor LCP Large unoptimized images Slow server response Render-blocking CSS/JS Client-side heavy rendering How to improve LCP Optimize & compress images Preload critical images/assets Reduce JS bundle size Use SSR / SSG / edge caching FID / INP (First Input Delay / Interaction to Next Paint) What it is Measures how fast the page responds when a user interacts (click, tap, input). “To improve FID/INP, I reduce main-thread work by splitting JS bundles and deferring non-critical scripts.” Common causes of poor FID / INP Heavy JavaScript execution Long main-thread tasks Large synchronous scripts CLS: Measures visual stability — how much the layout shifts unexpectedly. “To prevent CLS, I reserve layout space and ensure all images have fixed dimensions.” Common causes of poor CLS Images without width/height Dynamically injected content Ads, banners, fonts loading late How to improve CLS Always define image dimensions Reserve space for dynamic content Use skeleton loaders Avoid inserting content above existing content

#javascript#reactjs#nextjs

fullstackBy Zahid Khan

What is typescript and why it used?

TypeScript is a superset of JavaScript that adds static typing. \n It helps catch errors at compile time, improves code readability, and makes large-scale applications easier to maintain. \n It improves code quality, reduces runtime bugs, and enhances developer productivity. \n TypeScript also provides better IntelliSense, refactoring, and documentation.

#typescript

fullstackBy Zahid Khan

Difference b/w SSG+ISR vs SSR?

SSR renders the page on every request. SSG + ISR serves pre-built static pages and updates them periodically or on demand. 1️⃣ SSR – Server-Side Rendering How it works User requests a page Server runs code (DB/API calls) HTML is generated at request time HTML is sent to the browser Key characteristics Page is rendered on every request Database/API is called every time HTML is always fresh Pros Always up-to-date data Good for personalized or auth-based pages Cons Slower than SSG Higher server and DB load Limited CDN caching Best use cases Dashboards Admin panels User-specific pages Real-time data 2️⃣ SSG + ISR – Static Site Generation with Incremental Static Regeneration How it works Pages are generated at build time HTML is stored and served from CDN After a defined time (revalidate), the page is regenerated in the background New users get updated HTML without rebuilding the whole app Key characteristics Pages are static Extremely fast (CDN-served) Database is not called on every request Pros Very fast performance Excellent SEO Low server cost Scales easily Cons Data is not real-time Slight delay before updates appear Best use cases Blogs Marketing pages Documentation Portfolio websites

#reactjs#nextjs

frontendBy Zahid

What is web vitals?

It is google performance metrics. which is measure user real experience specially page load speed, interactivity and layout stability.

#javascript#reactjs#nextjs

fullstackBy Zahid

Difference b/w Interface and Record

Interface : when modeling real objects or entities that may be extended. eg: interface User { id: string; name: string; isActive: boolean; } // extendable interface Admin extends User { permissions: string[]; } Records : when creating a strict key-value mapping where keys come from a union type and all keys must be present. eg: type Status = "loading" | "success" | "error"; const statusText: Record = { loading: "Loading", success: "Done", error: "Failed", };

#typescript

frontendBy Zahid khan

Differences between CSR and SSR

Server-Side Rendering (SSR) generates full HTML on the server for every request, offering superior SEO and fast initial loads, making it ideal for content-heavy sites. Client-Side Rendering (CSR) sends a blank page to the browser, which renders content using JavaScript, providing higher interactivity for dynamic web apps but slower initial performance. Rendering Location: SSR renders on the server; CSR renders in the browser (client). SEO Performance: SSR is superior for SEO because search engines receive fully rendered HTML, whereas CSR requires additional effort to ensure proper indexing. Initial Page Load: SSR provides faster initial load times, beneficial for users on slower connections, while CSR often has a slower initial load due to JavaScript execution. Interactivity: CSR is superior for rich, interactive user experiences (e.g., social media feeds, SPAs) as updates occur without reloading the page. Server/Client Load: SSR increases the load on the server, while CSR shifts the rendering load to the client's browser.

#reactjs#nextjs

fullstackBy Zahid Khan

AWS S3 Explained: Scalable and Secure Object Storage in the Cloud

Amazon S3 (Simple Storage Service) is a highly scalable, durable, and secure object storage service used to store and retrieve any amount of data, making it ideal for backups, media storage, and cloud-native applications.

#mongodb#javascript#nodejs

fullstackBy Zahid Khan

Understanding the JavaScript Event Loop

JavaScript is often described as a single-threaded language, yet it can handle asynchronous operations like API calls, timers, and user interactions without blocking the UI. The secret behind this behavior is the JavaScript Event Loop. What Does “Single-Threaded” Mean? Being single-threaded means JavaScript can execute only one task at a time in the call stack. If a long-running task blocked the stack, the entire application would freeze. To avoid this, JavaScript uses asynchronous mechanisms powered by the event loop. Key Components of the Event Loop To understand the event loop, you need to know these core parts: 1. Call Stack Executes synchronous JavaScript code Follows Last In, First Out (LIFO) Functions are pushed when called and popped when finished 2. Web APIs Provided by the browser (or Node.js) Handle async tasks like: setTimeout DOM events fetch These APIs run outside the call stack 3. Callback Queue (Macrotask Queue) Stores callbacks from: setTimeout setInterval UI events 4. Microtask Queue Higher-priority queue Includes: Promises (.then, .catch, .finally) queueMicrotask MutationObserver 5. Event Loop Continuously checks: Is the call stack empty? Are there microtasks to execute? Are there macrotasks waiting?

#javascript

backendBy Ravi

Understanding Node.js: How JavaScript Runs on the Server

Node.js allows JavaScript to run outside the browser using an event-driven, non-blocking I/O model, making it highly efficient for building fast and scalable backend services.

#nodejs#javascript#backend#api

fullstackBy Yasir

Next.js Explained: From SSR to Full-Stack React Framework

Next.js enhances React by providing server-side rendering, file-based routing, API routes, and performance optimizations, making it ideal for SEO-friendly and production-ready applications.

#nextjs#react#ssr#seo

frontendBy Zahid Khan

Why React is Still the Best Choice for Modern Frontend Development

React simplifies UI development with its component-based architecture, virtual DOM, and powerful ecosystem, making it the go-to library for building scalable and maintainable user interfaces.

#react#javascript#frontend#spa