Retrieval Augmented Generation (RAG) – AI Engineering

What is Retrieval Augmented Generation (RAG) ?

Retrieval Augmented Generation (RAG) is an AI technique that improve Large Language Model (LLM) responses by fetching facts from external knowledge bases.

What happens without RAG ?

Sometimes AI give Wrong Answers confidently and those answers look convincing as well. This happens because of AI Hallucination.

How RAG Solves this Problem ?

Instead of relying only on its trained data, the AI searches a custom database, retrieves relevant information, and uses it to generate accurate, upto-date, and verifiable answers. Simply AI doesn’t answer immediately. It first searches for relevant information.

How RAG Works ?

RAG acts as an Open Book Exam.

Without RAG: Answer directly comes from memory.

With RAG: Search Documents, Read relevant Documents and then gives answer. Which is much more reliable.

RAG accomplishes this through following stages :

STEP 1 : Collect Documents

Authorized external data like company documents, PDF’s, or Databases will become the knowledge source

STEP 2 : Chunking

LLMs cannot efficiently process huge documents.

Therefore, Large documents are broken down into small chunks. Instead of storing an entire PDF / Document, We store smaller pieces.

will continue …

Build a Business Landing Page with React, Tailwind CSS and Framer Motion

A landing page is often the first thing visitors see when they discover your business.

A good landing page should:

Look professional
Work perfectly on mobile devices
Load quickly
Clearly explain your services
Build trust
Encourage users to take action

In this tutorial, we’ll build a modern landing page using:

React
Tailwind CSS
Framer Motion
Responsive Design
SEO-friendly HTML

The page will include:

✅ Hero Section

✅ Features / Services Section

✅ About Section

✅ Testimonials Section

✅ Call To Action Section

✅ Smooth Scrolling

✅ Framer Motion Animations

✅ Mobile Responsive Design

Project Structure

			
src/
 ├── components/
 │    ├── Hero.jsx
 │    ├── Features.jsx
 │    ├── About.jsx
 │    ├── Testimonials.jsx
 │    └── CTA.jsx
 │
 ├── App.jsx
 └── index.css

		

Step 1: Create React Project

			
npx create-react-app landing-page
cd landing-page

Install dependencies:

			
npm install framer-motion
npm install -D tailwindcss

			
package.json
{
  "name": "landing-page",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.1",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^12.40.0",
    "react": "^19.2.3",
    "react-dom": "^19.2.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.4.19",
    "autoprefixer": "^10.5.0"
  }
}

		

Step 2: Configure Tailwind

tailwind.config.js

			
module.exports = {
    content: [
        "./src/**/*.{js,jsx}"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

		

postcss.config.js

			
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

		

src/index.css

			
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  scroll-behavior: smooth;
}

		

Step 3: Hero Section

components/Hero.jsx

			
import { motion } from 'framer-motion';
export default function Hero() {
    return (
        <section id="hero" className='min-h-screen flex items-center justify-center bg-slate-900 text-white'>
            <div className='text-center px-6'>
                <motion.h1 
                initial={{ opacity: 0, y: -40 }}
                animate={{ opacity: 1, y: 0}}
                transition={{ duration: 0.8 }}
                className="text-5xl font-bold">
                    Grow Your Business Faster
                </motion.h1>
                <motion.p
                initial={{ opacity: 0 }}
                animate={{ opacity: 1}}
                transition={{ delay: 0.3 }}
                className='mt-6 text-xl'>
                    Modern digital solutions for growing companies.
                </motion.p>
                <a href='#cta' className='inline-block mt-8 bg-blue-600 px-8 py-3 rounded-lg'>
                    Get Started
                </a>
            </div>
        </section>
    )
}

		

Step 4: Features Section

components/Features.jsx

			
import { motion } from 'framer-motion';
const features = [
    "Web Development",
    "Mobile Apps",
    "SEO Optimization",
    "Cloud Solutions"
];
export default function Features () {
    return (
        <section id="features" className='py-20 bg-gray-100'>
            <div className='max-w-6xl mx-auto px-6'>
                <h2 className='text-4xl font-bold text-center'>
                    Services
                </h2>
                <div className='grid md:grid-cols-2 gap-8 mt-12'>
                    {
                        features.map((item) => (
                            <motion.div 
                            whileHover={{ scale: 1.05 }}
                            key={item}
                            className='bg-white p-6 rounded-xl shadow'>
                                <h3 className='text-xl font-semibold'>{item}</h3>
                            </motion.div>
                        ))
                    }
                </div>
            </div>
        </section>
    )
}

		

Step 5: About Section

components/About.jsx

			
export default function About() {
    return (
        <section id='about' className="py-20">
            <div className="max-w-4xl mx-auto px-6 text-center">
                <h2 className="text-4xl font-bold">
                    About Us
                </h2>
                <p className="mt-6 text-lg">
                    We help business build modern
                    digital products that increase
                    growth and customer engagement.
                </p>
            </div>
        </section>
    )
}

		

Step 6: Testimonials Section

components/Testimonials.jsx

			
export default function Testimonials() {
    const testimonials = [
        {
            name: "John",
            text: "Amazing service and support."
        },
        {
            name: "Sarah",
            text: "Helped our company grow rapidly."
        }
    ];
    return (
        <section id='testimonials' className="bg-gray-100 py-20">
            <div className="max-w-6xl mx-auto px-6">
                <h2 className="text-4xl font-bold text-center">
                    Testimonials
                </h2>
                <div className="grid md:grid-cols-2 gap-8 mt-12">
                    {testimonials.map((item) => (
                        <div 
                        key={item.name} 
                        className="bg-white p-6 rounded-xl shadow">
                            <p>{item.text}</p>
                            <h4 className="mt-4 font-bold">{item.name}</h4>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}

		

Step 7: CTA Section

components/CTA.jsx

			
export default function CTA() {
  return (
    <section id="cta" className="py-20 bg-blue-600 text-white">
      <div className="text-center px-6">
        <h2 className="text-4xl font-bold">Ready To Grow?</h2>
        <p className="mt-4">Let's discuss your next project.</p>
        <button className="mt-8 bg-white text-blue-600 px-8 py-3 rounded-lg">
          Contact Us
        </button>
      </div>
    </section>
  );
}

		

Step 8: Main App Component

App.jsx

			
import Hero from './components/Hero';
import Features from './components/Features';
import About from './components/About';
import Testimonials from './components/Testimonials';
import CTA from './components/CTA';
function App() {
  
  return (
    <>
      <Hero />
      <Features />
      <About />
      <Testimonials />
      <CTA />
    </>
  );
}
export default App;

		

Step 9: SEO Optimization

public/index.html

			
<title>
Modern Business Landing Page
</title>
<meta
  name="description"
  content="Professional business landing page built using React and Tailwind CSS."
/>
<meta
  name="keywords"
  content="React, Tailwind CSS, Landing Page"
/>

		

Use semantic tags:

			
<header>
<section>
<main>
<footer>

instead of unnecessary divs.

Step 10: Deploy to Vercel

Install:

npm install -g vercel

Build project:

npm run build

Deploy:

vercel

Follow prompts.

You will receive:

https://your-project.vercel.app

Performance Tips

Lazy Load Components

			
const Hero = React.lazy(() =>
  import("./Hero")
);

Optimize Images

Use:

			
WebP
AVIF

formats whenever possible.

Reduce Bundle Size

Remove unused libraries.

Use Tailwind Utility Classes

Avoid large custom CSS files.

What Makes a Landing Page Convert Better?

A high-converting landing page should:

✅ Clear headline

✅ Strong value proposition

✅ Social proof

✅ Testimonials

✅ Mobile-friendly layout

✅ Fast loading speed

✅ Clear call-to-action

Final Result

After completing this tutorial, you’ll have:

Fully Responsive Landing Page
Mobile-First Design
Smooth Scrolling
Framer Motion Animations
SEO-Friendly Structure
Production Deployment on Vercel
Clean React Component Architecture

This foundation can be used for:

Agency Websites
Startup Landing Pages
SaaS Products
Consulting Businesses
Portfolio Websites
Marketing Campaigns

💡 Found this tutorial helpful? Please Subscribe, If this content is helpful to You. Happy Coding! 🚀

Why Use app.disable(‘x-powered-by’) in Express.js? Security Explained for Beginners

If you’ve worked with Express.js applications, you may have seen the following code:

			
const express = require('express');
const app = express();
app.disable('x-powered-by');

Many developers copy this line into their projects without understanding what it actually does.

In this article, we’ll understand:

What x-powered-by is
Why Express adds it by default
Why many developers disable it
Whether disabling it improves security
Best practices for production applications

What is `X-Powered-By`?

When a browser sends a request to your Express application, the server responds with data and some HTTP headers.

By default, Express adds the following response header:

X-Powered-By: Express

Example response:

			
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json

This header tells anyone making a request that your application is running on Express.js.

How Can We See This Header?

Open your browser’s Developer Tools:

Open a website
Press F12
Go to the Network tab
Select a request
Check the Response Headers

You may see:

X-Powered-By: Express

Why Does Express Add This Header?

Express adds it automatically to identify the technology being used by the server.

Think of it like putting a sticker on your laptop that says:

Powered by Express.js

While this information seems harmless, it can reveal unnecessary details about your application.

Why Do Developers Disable It?

Using:

app.disable('x-powered-by');

removes the header from all responses.

Example:

Before

			
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json

After

			
HTTP/1.1 200 OK
Content-Type: application/json

The Express information is no longer exposed.

Does It Improve Security?

Yes, but only slightly.

Let’s understand why.

Imagine a thief walking around a neighborhood looking for houses with a known security weakness.

If every house has a sign saying:

This house uses Security System Version 1.0

the thief immediately knows what type of system is installed.

Similarly, the X-Powered-By header tells attackers:

This application is running on Express.js

Attackers can then search for known vulnerabilities related to Express or Node.js.

Security Through Reduced Information Exposure

Disabling the header follows a security principle called:

Minimize information disclosure.

The less information you reveal about your system, the harder it becomes for attackers to gather intelligence.

Is Disabling It Enough?

No.

Many beginners think:

app.disable('x-powered-by');

makes the application secure.

That’s not true.

This only hides one piece of information.

You still need:

Input validation
Authentication
Authorization
HTTPS
Secure cookies
Rate limiting
Proper error handling
Dependency updates

Think of this as locking one window, not securing the entire building.

Real-World Example

Without disabling:

X-Powered-By: Express

An attacker immediately knows:

Node.js is being used
Express is being used
Certain attack patterns may apply

With disabling:

(no header)

The attacker gets less information about your technology stack.

How to Disable It

Simply add:

			
const express = require('express');
const app = express();
app.disable('x-powered-by');

That’s it.

When Should You Use It?

For almost every production Express application.

Whether you are building:

REST APIs
Microservices
Admin dashboards
E-commerce platforms
Enterprise applications

it’s considered a good security practice.

How Does It Work Internally?

When Express starts, it enables several settings by default.

One of them is:

x-powered-by = true

When you call:

app.disable('x-powered-by');

Express changes that setting to:

x-powered-by = false

As a result, the framework stops sending the header in responses.

Best Practice

Many developers combine this with the Helmet security package:

npm install helmet

Then:

			
const helmet = require('helmet');
app.use(helmet());
app.disable('x-powered-by');

Helmet adds several additional security headers that help protect your application.

Summary

The X-Powered-By header tells users that your application is running on Express.js.

By default:

X-Powered-By: Express

Using:

app.disable('x-powered-by');

removes this header.

Benefits:

✅ Reduces information exposure
✅ Follows security best practices
✅ Makes reconnaissance slightly harder for attackers
✅ Recommended for production applications

However, it should be considered a small security improvement, not a complete security solution.

A secure application requires proper authentication, authorization, validation, HTTPS, and other security measures in addition to hiding framework information.

Quick Interview Answer

What is the use of app.disable('x-powered-by') in Express.js?

app.disable('x-powered-by') removes the X-Powered-By: Express HTTP response header. This prevents exposing the Express framework information to clients and is considered a small but useful security best practice in production applications.

💡 Found this article helpful? Subscribe for beginner-friendly Node.js, Express.js, System Design, and Web Security tutorials. Happy Coding!

Load Balancing in System Design Explained with Real-World Examples

Load Balancing is one of the most important concepts in System Design interviews and real-world applications.

If you’ve ever wondered:

What is a Load Balancer?
Why do we need Load Balancing?
What problem does it solve?
What happens without it?

This guide will explain everything in simple language.

Imagine a Restaurant

Suppose there is only one cashier at a restaurant.

			
Customer 1 → Cashier
Customer 2 → Waiting
Customer 3 → Waiting
Customer 4 → Waiting

As more customers arrive:

Queue becomes longer
Waiting time increases
Cashier becomes overloaded

Now imagine the restaurant adds 5 cashiers.

			
Customer 1 → Cashier 1
Customer 2 → Cashier 2
Customer 3 → Cashier 3
Customer 4 → Cashier 4
Customer 5 → Cashier 5

		

Everyone gets served faster.

This is exactly what Load Balancing does.

What is Load Balancing?

Load Balancing is:

The process of distributing incoming traffic across multiple servers instead of sending everything to a single server.

Instead of:

			
Users  
  ↓
Server 1

We do:

   Users  
     ↓
Load Balancer
     ↓ 
┌─────────┐ 
↓    ↓    ↓
S1   S2   S3

The Load Balancer decides which server should handle each request.

Why Do We Need Load Balancing?

Imagine your website gets:

10 users per day

One server may be enough.

But suddenly:

100,000 users visit

One server might:

Become slow
Crash
Stop responding

Load balancing prevents this problem.

What Happens Without Load Balancing?

Without load balancing:

			
Users   
  ↓
Server 1

Problems:

❌ Server Overload

Too many requests hit one server.

❌ Slow Response Time

Users wait longer.

❌ Single Point of Failure

If server crashes:

Server Down = Application Down

Entire application becomes unavailable.

❌ Poor Scalability

Cannot handle traffic growth efficiently.

Benefits of Load Balancing

1. Better Performance

Traffic is distributed evenly.

			
Requests
→ Server 1
→ Server 2
→ Server 3

No single server becomes overloaded.

2. High Availability

If one server fails:

			
Server 1 ❌
Load Balancer    
    ↓
Server 2
Server 3

		

Users are automatically redirected.

Application remains available.

3. Scalability

Need more capacity?

Simply add more servers.

			
S1
S2
S3
S4
S5

		

Load balancer starts using them automatically.

4. Better User Experience

Users get:

Faster pages
Better reliability
Less downtime

Real-World Example

Imagine:

Amazon Sale

Millions of users visit simultaneously.

Without load balancing:

			
One Server
  ↓
Crash

With load balancing:

  Users  
    ↓
Load Balancer
    ↓
100+ Servers

Traffic is distributed safely.

How Does a Load Balancer Work?

Step-by-step:

Step 1

User opens:

www.example.com

Step 2

Request reaches:

Load Balancer

Step 3

Load Balancer checks:

Which server is free?
Which server is healthy?
Which server has fewer requests?

Step 4

Request is forwarded.

  User 
   ↓
Load Balancer 
   ↓
Server 2

Step 5

Server responds.

			
Server 2 
    ↓
Load Balancer
    ↓
  User

		

Load Balancing Algorithms

A Load Balancer needs rules to decide where traffic goes.

1. Round Robin

Most common.

Requests are distributed one by one.

			
Request 1 → S1
Request 2 → S2
Request 3 → S3
Request 4 → S1
Request 5 → S2

		

2. Least Connections

Send traffic to the server with fewer active users.

Example:

			
S1 → 200 users
S2 → 50 users
S3 → 100 users

Next request goes to:

S2

because it has fewer connections.

3. Weighted Round Robin

Powerful servers get more traffic.

Example:

			
S1 = Weight 5
S2 = Weight 2

S1 receives more requests.

4. IP Hash

Same user always goes to the same server.

Useful for:

Shopping carts
User sessions

Types of Load Balancers

Hardware Load Balancer

Physical device.

Examples:

F5 BIG-IP

Usually expensive.

Software Load Balancer

Runs as software.

Examples:

NGINX
HAProxy
Traefik

Most companies use these today.

Cloud Load Balancer

Managed by cloud providers.

Examples:

AWS Elastic Load Balancer (ELB)
Azure Load Balancer
Google Cloud Load Balancer

Very popular.

Where Is Load Balancing Used?

Almost everywhere.

Websites

			
Google
Facebook
Amazon
Netflix

Banking Applications

To handle millions of transactions.

E-commerce Platforms

For handling traffic spikes during sales.

APIs

To distribute API requests.

Load Balancing in Kubernetes

In Kubernetes:

			
Ingress
  ↓
Service
  ↓
Pods

		

Load balancing happens between Pods.

Example:

			
Pod 1
Pod 2
Pod 3

Traffic gets distributed among all pods.

Real System Design Architecture

                       Users 
                        ↓          
                  Load Balancer                   
                        ↓     
              ┌────────┬────────┬────────┐ 
              ↓        ↓        ↓ 
          Server1   Server2   Server3     
              ↓        ↓        ↓          
                    Database

This architecture is commonly used in production systems.

Interview Definition

If asked in an interview:

Load Balancing is a technique used to distribute incoming requests across multiple servers to improve performance, scalability, availability, and fault tolerance.

🏁 Final Summary

Load Balancing is like having multiple cashiers in a supermarket instead of one.

Without Load Balancing:

❌ Slow system
❌ Server crashes
❌ Downtime
❌ Poor user experience

With Load Balancing:

✅ Faster response times
✅ Better availability
✅ Easy scalability
✅ Improved reliability

💡 Simple One-Line Definition

A Load Balancer acts like a traffic police officer that intelligently distributes user requests across multiple servers so that no single server becomes overloaded.

What is the use of index.ts file (barrel file or barrel export) ?

An index.ts file in a folder is used to re-export modules from that folder.
When you import from the folder, you automatically get what is exported from index.ts.

Benefits and Uses:

1. Simplifies Imports

Without barrel :

import GameCard from '../Components/GameCard/GameCard';

With barrel:

import GameCard from '../Components/GameCard';

This makes your imports shorter and cleaner.

2. Centralizes Exports

You can export multiple components, functions, or types from one place.

Example:

			
export { default as GameCard } from './GameCard';
export { helperFunction } from './helpers';

Now you can import both from the folder directly.

3. Easier Refactoring

If you rename or move files, you only need to update the index.ts file, not every import in your project.

4. Improves Code Organization

Encourages grouping related files and exports together.
Makes it easier for new developers to see what a folder provides.

What do we call this process?

Barrel export
Barrel file
Sometimes just called an index file pattern

Summary

Using an index.ts as a barrel file:

Makes imports cleaner and easier to manage.
Centralizes exports for better organization.
Is a common best practice in TypeScript and JavaScript projects.

💡 Found this helpful? Subscribe for simple React and TypeScript guides with real-world examples. Happy Coding!

What is Retrieval Augmented Generation (RAG) ?

What happens without RAG ?

How RAG Solves this Problem ?

How RAG Works ?

Project Structure

Step 1: Create React Project

Step 2: Configure Tailwind

Step 3: Hero Section

Step 4: Features Section

Step 5: About Section

Step 6: Testimonials Section

Step 7: CTA Section

Step 8: Main App Component

Step 9: SEO Optimization

Step 10: Deploy to Vercel

Performance Tips

Lazy Load Components

Optimize Images

Reduce Bundle Size

Use Tailwind Utility Classes

What Makes a Landing Page Convert Better?

Final Result

What is X-Powered-By?

How Can We See This Header?

Why Does Express Add This Header?

Why Do Developers Disable It?

Before

After

Does It Improve Security?

Security Through Reduced Information Exposure

Is Disabling It Enough?

Real-World Example

How to Disable It

When Should You Use It?

How Does It Work Internally?

Best Practice

Summary

Quick Interview Answer

Imagine a Restaurant

What is Load Balancing?

Why Do We Need Load Balancing?

What Happens Without Load Balancing?

❌ Server Overload

❌ Slow Response Time

❌ Single Point of Failure

❌ Poor Scalability

Benefits of Load Balancing

1. Better Performance

2. High Availability

3. Scalability

4. Better User Experience

Real-World Example

Amazon Sale

How Does a Load Balancer Work?

Step 1

Step 2

Step 3

Step 4

Step 5

Load Balancing Algorithms

1. Round Robin

2. Least Connections

3. Weighted Round Robin

4. IP Hash

Types of Load Balancers

Hardware Load Balancer

Software Load Balancer

Cloud Load Balancer

Where Is Load Balancing Used?

Websites

Banking Applications

E-commerce Platforms

APIs

Load Balancing in Kubernetes

Real System Design Architecture

Interview Definition

🏁 Final Summary

💡 Simple One-Line Definition

2. Centralizes Exports

Summary

What is `X-Powered-By`?