In this blog, we'll break down Docker networking in a developer-friendly way.

Let’s dive in.

🧪 Does My Container Have Internet Access?

Let’s find out the answer by actually doing it. We'll run a BusyBox container and try to ping Google:

docker run --rm -it busybox sh

Once inside the container:

ping google.com

Boom! We get a response. That means our container has internet access ✅

This is made possible by Docker's default bridge network.

🧠 What is the Bridge Network?

By default, Docker assigns containers to a bridge network. This creates a virtual Ethernet interface (veth) on your host machine, and your container connects through it like this:

Run this command to view it:

ifconfig

You’ll see interfaces like eth0 or docker0 — that’s your container being connected to the host’s network via Docker’s bridge.

⚙️ Docker Networking Types (with Cheat Sheet)

Docker supports different network drivers. Here’s a quick summary:

🛠️ Essential Docker Network Commands

Let’s get hands-on. These are the commands you’ll use often:

🔍 List all networks

docker network ls

🔎 Inspect a specific network

docker network inspect <network_name>

🧱 Create a custom bridge network

docker network create <network_name>

🚀 Run a container in a custom network

docker run --network <network_name> --name <container_name> -d <image_name>

🔗 Connect an existing container to a network

docker network connect <network_name> <container_name>

🧼 Disconnect a container from a network

docker network disconnect <network_name> <container_name>

🗑️ Remove a network

docker network rm <network_name>

🤝 Container-to-Container Communication

Let’s try it out!

# Create custom bridge network
docker network create my-bridge-network

# Start container 1 using nginx
docker run -d --name container1 --network my-bridge-network nginx

Then check if container 1 is up and running:

docker ps

# Start container 2 using alpine (lightweight Linux)
docker run -d --name container2 --network my-bridge-network alpine sleep 3600

# From container2, ping container1 using container name
docker exec -it container2 ping container1

If you're using Docker's default bridge, container names won’t resolve—only IPs work. But in custom bridge networks, Docker gives you automatic DNS resolution. 🎉

🖥️ Host Networking Example

docker run -d --network host nginx

This container now shares your host machine’s IP address. It’s faster and leaner, but there’s no isolation — use with caution!

🔐 MacVLAN Networking (Assigning Real MAC + IP)

Want your container to appear like a physical device on the network?

docker network create -d macvlan I am running a few minutes late; my previous meeting is running over.
  --subnet=192.168.1.0/24 \
  --gateway=192.168.1.1 \
  -o parent=eth0 \
  my-macvlan

This sets up a network where containers have their own MAC address and can appear directly on your LAN. Great for advanced setups or legacy systems that require MAC-level identity.

📚 Don't Memorize, Understand

Remember, it's not about memorizing every Docker command. It's about understanding the structure of commands:

docker network <action> [options]

For example:

• docker network ls

• docker network create <nework_name>

• docker network inspect <network_name>

• docker network connect <nework_name> <container_name>

They're all intuitive once you get the hang of it.

📝 Summary

Docker networking isn’t as scary as it looks. Just remember:

• Bridge is the default.

• Custom bridge gives DNS resolution.

• Host removes isolation (be careful).

• None means no network.

• Macvlan makes your container feel like a physical device.

And most of all: don’t overthink it. For 95% of developer use cases, custom bridge networks with simple port mappings are more than enough.

If you found this helpful, please share it with your fellow developers.

Thanks for reading! 🙌

Happy learning! 🐳

If you’ve followed our Docker journey so far — from Intro to Docker to running your first container to Dockerizing a Node.js backend — you're ready for something more real-world.

In this blog, we will Dockerize React frontend app built using Vite. But this isn’t just another "Hello Docker" tutorial. No skipping over errors. You’ll see where things break and more importantly, learn how to fix them like a real developer.

By the end of this, you’ll be able to Dockerize any frontend app with confidence.

Let's dive in.

🛠️ Step 1: Create a New React App using Vite

First create a new folder:

mkdir react_app && cd react_app

Now, create React app using Vite:

npm create vite@latest .

Choose:

• React

• JavaScript or TypeScript (your choice)

Then install the dependencies:

npm install

And start the app:

npm run dev

Visit http://localhost:5173 and Ta-da! You have a running Vite + React app.

✍️ Step 2: Let’s Update Something

Go to src/App.jsx and change the heading:

<h1>Vite + React</h1>

to

<h1>This is a Dockerized Vite + React App!</h1>

Save the file and you should see the updated heading.

📦 Step 3: Writing the Dockerfile

Now comes the fun part: Dockerizing.

Create a new file in the root directory Dockerfile:

touch Dockerfile

Here’s the Dockerfile we’ll use:

# Step 1:  Use Node.js base image
FROM node:22-alpine

# Step 2: Set working directory
WORKDIR /app

# Step 3: Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Step 4: Copy rest of the app
COPY . .

# Step 5: Build the app
RUN npm run build

# Step 6: Command to run the app
CMD ["npm", "run", "preview"]

💡 Why this order? Docker caches each layer. If your dependencies have not changed, Step 3: npm install will be reused — super fast builds!

🧱 Step 4: Build the Docker Image

Let’s build the image:

docker build -t react_app:v1 .

Then run it:

docker run -p 5173:5173 react_app:v1

🚫 Step 5: Uh-oh, It Doesn't Work!

When you visit localhost:5173 or localhost:4173, you’ll see:

This is because Vite's preview server only listens to localhost by default, not the Docker container's external network and also when you run npm run preview, it serves the app on port 4173, not 5173.

🧑‍🔧 Step 6: Fix Vite Config for Docker

Edit vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    // Fix for Docker
    server: {
        host: "0.0.0.0", // Listen on all IPs (including Docker)
        port: 3000, // Change to port 3000 for development mode
    },
    preview: {
        host: "0.0.0.0", // Listen on all IPs (including Docker)
        port: 3000, // Change to port 3000 for preview or production mode
    },
});

This tells Vite to listen to all IPs (including Docker) and also changes the port to 3000 for both development and production preview.

♻️ Step 7: Rebuild the Image

Since we updated the app:

docker build -t react_app:v2 .
docker run -p 3000:3000 react_app:v2

Now visit http://localhost:3000 and you should see:

Simple Dockerfile link: Dockerfile

Now let’s take this one step further.

Multi-Stage Docker Build

We have Dockerized our React app, but we can do better by using multi-stage builds.

Because multi-stage builds are built for one thing only: optimization.

You want:

• ✅ Smaller image size

• ✅ Cleaner final containers (no dev dependencies)

• ✅ Faster rebuilds with reusable layers

Multi-stage builds are simple once you see

Let's use our React app to build in one stage and serve in another — production style.

Step 1: Build Stage

Rename your current Dockerfile to keep it as a backup:

mv Dockerfile Dockerfile.old

Now create a new Dockerfile:

# --- Stage 1: Build the Vite React App ---

# Use Node.js base image for building
FROM node:22-alpine AS builder

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy rest of the app
COPY . .

# Build the app
RUN npm run build

This builds the static production files into dist/.

🔥 Step 2: Serve with NGINX (Production Stage)

# --- Stage 2: Serve with NGINX ---
FROM nginx:alpine AS production

# Remove default nginx static files
RUN rm -rf /usr/share/nginx/html/*

# Copy built app from builder
COPY --from=builder /app/dist /usr/share/nginx/html

# Expose port 80
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

💡 --from=builder pulls files from the first stage only. No need to copy from your dev machine!

Step 3: Build and Run the Multi-Stage Docker Image

docker build -t react_app_multistage .

Then run it:

docker run -p 3000:80 react_app_multistage

Go to http://localhost:3000 and boom! You’re now running a fully production optimized Docker container.

Multi-stage docker file link: Dockerfile

📉 Compare Image Sizes

Yes — multi-stage builds shrink your image size drastically!

If you have reached this far, you now know how to:

• ✅ Dockerize a React app using Vite

• ✅ Fix common issues like Vite’s localhost binding

• ✅ Use multi-stage builds to optimize your Docker images

🧼 Bonus: Use .dockerignore

Create a .dockerignore file:

node_modules
.dockerignore
Dockerfile
*.log
dist

Why? To prevent Docker from copying unnecessary files during build. Smaller context = faster builds.

Final Thoughts on Multi-Stage Builds

A multi-stage build is just:

FROM ... AS builder
# build here

FROM ... AS final
# copy from builder

It’s a simple way to separate build and runtime environments.

This becomes really important when your frontend or backend apps scale huge node_modules, development dependencies (like: TypeScript, Babel), test tools (like: Jest), source maps all of that can be kept out of production.

This keeps your production images clean, small, and fast.

If you found this helpful, please share it with your fellow developers.

Thanks for reading! 🙌

Happy learning! 🐳

In this blog, we will containerize a real Node.js backend application while also building a solid understanding of Docker’s three core concepts:

• Docker Images

• Docker Containers

• Dockerfile

🎯 What We will Build

We will create a simple Node.js app and Dockerize it. But more importantly, we will explore the magic behind how Docker works and why these components matter.

First, Let’s Understand Docker’s Core Concepts

1. 🐳 Docker Image

A Docker image is a lightweight, standalone, executable package that includes:

• Your code

• Runtime (Node.js in our case)

• Libraries

• Environment variables

• Configuration files

• Sometimes even parts of the operating system

Think of it as a blueprint. Once it’s built, it cannot be changed (images are immutable). If you need updates, you create a new version of the image.

Images are built layer by layer, which means:

• Each instruction in a Dockerfile creates a new layer.

• Docker caches these layers, making builds faster and more efficient.

• Understanding layers = optimizing your builds.

Also, images are portable. They can run on any OS where Docker is installed (e.g Linux, Windows or macOS).

2. 📦 Docker Container

A Docker container is a runtime instance of an image.

Imagine your image is a blueprint for a car, and containers are the actual cars running on the road. You can spin up as many containers as you want from the same image.

Key traits of containers:

• Isolated: Each container runs independently.

• Ephemeral: Once stopped, a container is gone for good. (You’ll have to create a new one.)

• Portable: Move containers across environments with ease.

Containers make it possible to run the same image in development, staging, or production, just by changing environment variables. One image → many environments.

3. 📜 Dockerfile

Now this is where you, the developer, come in.

A Dockerfile is a set of declarative instructions that tells Docker how to build an image.

You don’t write “code” like in JavaScript or Python. You simply declare what you want:

• What base image to start from

• What files to copy

• What commands to run

• What port to expose

💡 It's easier than a programming language. Just tell Docker what to do, and it will handle the how.

We’ll write a Dockerfile together below.

🛠️ Let's Dockerize Node.js App

1. Initialize the Project

First, create a new directory for your Node.js app and initialize it:

mkdir node-app
cd node-app
npm init -y
npm install express

2. Create the App (index.js)

const express = require("express");
const app = express();

const port = process.env.PORT || 3000;

app.get("/", (req, res) => {
    res.status(200).json({
        statusCode: 200,
        message: "Hello World from a Dockerized App!",
        success: true,
    });
});

app.get("/health-check", (req, res) => {
    res.status(200).json({
        statusCode: 200,
        message: "Health check passed",
        success: true,
    });
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

3. Dockerfile – Let's Declare the Image Instructions

Let’s create a Dockerfile in the root of your project directory. This file will contain all the instructions to build your Docker image.

# use an official Node.js runtime as a parent image
FROM node:22-alpine

# set the working directory inside the container
WORKDIR /app

# copy package.json and package-lock.json to the working directory
COPY package*.json ./

# install dependencies
RUN npm install

# copy the rest of the application code to the working directory
COPY . .

CMD ["npm", "start"]

Note: The RUN command executes during the image build process, while CMD specifies the default command to run when a container starts.

This Dockerfile creates a layered, immutable, portable image. Every line adds a new layer, which Docker caches for optimization.

🙈 Don’t Forget .dockerignore

node_modules
npm-debug.log

This avoids copying unnecessary files into the image, keeping it lightweight.

🧪 Build and Run the Docker Container

Step 1: Build the Image

docker build -t my-node-app .

Step 2: Run the Container

docker run -p 4000:3000 --env PORT=3000 my-node-app

• -p 4000:3000 maps local port 4000 to container port 3000.

• --env sets the environment variable inside the container.

Now visit http://localhost:4000 and you should see:

Congratulations 🎉 You Did It!

You just built and run your first Dockerized Node.js app!

🌱 Bonus: Use .env for Clean Environment Management

Create a .env file:

PORT=3000

Run it like this:

docker run --env-file .env -p 4000:3000 node-app

🧹 Cleanup Tips

To stop all running containers:

docker ps
docker stop <container_id>

To remove images:

docker rmi node-app

🧠 Quick Recap

Docker works because these three main components come together and work as one. Once you understand these, you're on your way to mastering Docker.

I hope you found this blog helpful and informative. I would love to hear your thoughts and feedback. If you have any questions or suggestions, feel free to reach out.

Thanks for reading! 🙌

Happy learning! 🐳

Most Docker tutorials start with these two simple commands:

docker pull hello-world
docker run hello-world

And Docker responds:

That’s it. Success! 🎉

It works so fast and so smoothly that you might miss what’s really happening in the background. It prints Hello from Docker! and you’re left thinking: “Wait... that’s it?”

This guide isn't just about running a command. We're going behind the scenes to understand exactly how Docker works the first time you run a container. We’ll use a simple diagram and explain each step clearly, so Docker feels less like magic and more like a powerful tool in your development journey.

Let’s break it down.

🧠 What Happens When You Run a Docker Command?

While the commands seem simple, a lot is happening under the hood.

👤 1: You (the User)

You are the user sitting at your machine. You’ve installed Docker and are ready to run containers maybe MySQL, PostgreSQL or a simple hello-world image.

⚙️ 2: Docker Engine

What you have actually installed is the Docker Engine — the underlying tech that handles the build, run, and lifecycle of containers.

Think of it as the core engine that interprets your commands and talks to other Docker components.

🗂 3: Local Docker Repository (aka Cache)

When you run docker run hello-world, Docker first checks if this image (hello-world) is already present in your local image cache.

If it’s already available locally, Docker skips downloading and moves straight to running it.

🌐 4: Docker Hub (Cloud Repository)

If the image is not found locally, Docker reaches out to Docker Hub — the official public registry where developers share and download Docker images.

It downloads the image (only once) and stores it locally. From next time, it won’t re-download unless there's a version mismatch or cache clear.

docker pull vs docker run

Let’s demystify the difference:

✅ docker pull hello-world

• Downloads the hello-world image from Docker Hub.

• Stores it locally.

• Doesn’t run it.

  

✅ docker run hello-world

• First checks if the image exists locally.

• If not, it pulls the image (like docker pull).

• Then creates a container from that image and runs it.

  

So, in a way:

docker run hello-world

is the same as:

docker pull hello-world
docker create hello-world
docker start <container_id>

💡 Did you know:
The hello-world image has been downloaded over 1 billion times on Docker Hub! It’s that iconic.

Understanding Images vs Containers

• Image: A read-only template with the application code and environment.

• Container: A running instance of an image (like a lightweight virtual machine).

You can run multiple containers from the same image.

🖥 Visualizing the Flow

Let’s understand the flow:

1. 🧑‍💻 You run docker run hello-world.

2. 🔍 Docker Engine checks the local cache (LocalHub).

3. 📦 If not found, it pulls the image from Docker Hub.

4. 🧱 It creates a container from the image.

5. ▶️ The container runs and prints: Hello from Docker!

6. 🛑 The container exits after execution (since the program is just a print statement).

You can view all this using Docker Desktop (GUI) or docker ps -a to list all containers (even exited ones).

🎯 Bonus: Clean-Up and Retesting

Let’s say you want to clean everything and try again:

🛑 Stop and Remove Containers:

docker ps -a           # List all containers
docker stop <id>       # Stop running container
docker rm <id>         # Remove stopped container

🧹 Remove the Image:

docker rmi hello-world

Now when you run docker run hello-world, it will trigger a fresh download.

🎉 You Did It!

If you’ve followed along, you’ve not only run your first Docker container, but you've also understood exactly how and why it worked.

You now know:

• What Docker Engine is.

• How images and containers relate.

• The role of Docker Hub.

• What pull vs run really means.

I hope you found this blog helpful and informative. I would love to hear your thoughts and feedback. If you have any questions or suggestions, feel free to reach out.

Thanks for reading! 🙌

Happy learning! 🐳

It all started when I joined the Chai Code Gen AI Cohort, curious to understand how these powerful AI models like GPT-4 actually “think.” The course wrapped up just yesterday, and while I’ve completed all the classwork, a few assignments (including this blog) are still sitting on my to-do list.

One thing that struck me during this journey is how prompting feels like a new kind of programming language—a bridge between human intent and machine output. Unlike traditional coding, where syntax and structure rule everything, prompting is about clarity, creativity, and context. The more I practiced, the more I realized that getting the right response from an AI model isn't magic it's a technique.

In this blog, I’m excited to share the prompting techniques I have learned along with practical Python + OpenAI code examples and the use cases where each shines. Whether you’re new to Gen AI or looking to sharpen your prompting skills, I hope this gives you a helpful starting point just like it did for me.

Let's Start!

1. Zero-Shot Prompting

In zero-shot prompting, you ask the model to perform a task without providing any examples.

Example:

from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()

client = OpenAI()

result = client.chat.completions.create(
    model="gpt-4",
    messages=[
        {"role": "user", "content": "Hi, My name is Om"},
    ],
)

print(result.choices[0].message.content)

Use Case:

• This technique is useful when you want the model to generate responses based on its understanding of the task.

2. Few-Shot Prompting

In few-shot prompting, you provide the model with a few examples of the desired output format.

Example:

from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()

system_prompt = """
You are an AI assistant who is expert in sentiment analysis.
You are given a tweet and you have to classify the sentiment of the tweet.
Decide whether a Tweet's sentiment is positive, neutral, or negative.

Tweet: I loved the upcoming Amir Khan movie trailer for Sitaare Zameen Par. It was amazing! 😍
Sentiment: positive

Tweet: That was Super boring 😠
Sentiment: negative
"""

client = OpenAI()

user_tweet = "Tweet: I am not sure about this new movie. It looks okay to me."
print(f"User {user_tweet}")

result = client.chat.completions.create(
    model="gpt-4",
    messages=[
        {"role": "system", "content": system_prompt},
        {"role": "user", "content": user_tweet},
    ],
)

print(f"🤖: {result.choices[0].message.content}")

Use Case:

• This technique helps the model understand the context and structure of the response you want.

3. Chain of Thought Prompting

In chain of thought prompting, you guide the model to think through a problem step-by-step.

Example:

import json
from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()

client = OpenAI()

system_prompt = """
You are an AI assistant who is expert in breaking down complex problems and then resolve the user query.

For the given user input, analyse the input and break down the problem step by step.
At least think 4-5 steps on how to solve the problem before solving it down.

The steps are you get a user input, you analyse, you think, you again think for several times and then return an output with explanation and then finally you validate the output as well before giving final result.

Follow the steps in sequence that is "analyse", "think", "output", "validate" and finally "result".

Rules:
1. Follow the strict JSON output as per Output schema.
2. Always perform one step at a time and wait for next input
3. Carefully analyse the user query

Output Format:
{{ step: "string", content: "string" }}

Example:
Input: What is 8 + 2.
Output: {{ step: "analyse", content: "Alright! The user is interested in maths query and he is asking a basic athematic operation" }}
Output: {{ step: "think", content: "To perform the addition i must go from left to right and add all the operands" }}
Output: {{ step: "output", content: "10" }}
Output: {{ step: "validate", content: "seems like 10 is correct ans for 8 + 2" }}
Output: {{ step: "result", content: "8 + 2 = 10" }}
"""

messages = [
    { "role": "system", "content": system_prompt },
]

messages.append({ "role": "user", "content": "What is 4 * 3?" })

while True:
    response = client.chat.completions.create(
        model="gpt-4o",
        response_format={"type": "json_object"},
        messages=messages
    )

    parsed_response = json.loads(response.choices[0].message.content)
    messages.append({ "role": "assistant", "content": json.dumps(parsed_response) })

    if parsed_response.get("step") == "output":
        print(f"🤖: {parsed_response.get('content')}")
        break

    print(f"🤔: {parsed_response.get('content')}")

Use Case:

• This technique is particularly useful for complex queries where reasoning is required.

4. Self-Consistency Prompting

In self-consistency prompting, you generate multiple responses to the same prompt and select the most consistent answer.

Example:

from openai import OpenAI
from collections import Counter
from dotenv import load_dotenv

load_dotenv()

client = OpenAI()

def self_consistency(prompt, n=3, temp=0.7):
    responses = [
        client.completions.create(
            model="gpt-3.5-turbo-instruct",
            prompt=prompt,
            temperature=temp,
            max_tokens=50
        )
        .choices[0]
        .text.
        strip() for _ in range(n)
    ]

    return Counter(responses).most_common(1)[0][0] if responses else None

prompt = "What is 5 + 3?"
print(f"Prompt: {prompt}")

consistent_answer = self_consistency(prompt)
print(f"Consistent Answer: {consistent_answer}")

Use Case:

• This technique can help improve the reliability of the model's output.

5. Instruction Prompting

In instruction prompting, you provide clear instructions to the model on what you want it to do.

Example:

from openai import OpenAI
from dotenv import load_dotenv

load_dotenv()

client = OpenAI()

def instruction_prompting(instruction):
    response = client.completions.create(
        model="gpt-3.5-turbo-instruct",
        prompt=f"Please follow these instructions carefully: {instruction}",
        temperature=0.7,
        max_tokens=150
    )
    return response.choices[0].text.strip()

instruction = """
Summarize the following text in one sentence."
The quick brown fox jumps over the lazy dog. The fox is quick and agile, while the dog is slow and sleepy.
"""
result = instruction_prompting(instruction)
print(f"Instruction: {instruction}")
print(f"Result:\n{result}")

Use Case:

• This technique is useful for tasks that require specific actions or outputs.

6. Direct Answer Prompting

In direct answer prompting, you ask the model a question and expect a straightforward answer.

Example:

from openai import OpenAI
from dotenv import load_dotenv

load_dotenv()

client = OpenAI()

def direct_answer_prompting(question):
    response = client.completions.create(
        model="gpt-3.5-turbo-instruct",
        prompt=f"Answer the following question concisely: {question}",
        temperature=0.7,
        max_tokens=150
    )
    return response.choices[0].text.strip()

question = "What is the capital of India?"
result = direct_answer_prompting(question)
print(f"Question: {question}")
print(f"Result: {result}")

Use Cases:

• This technique is helpful for queries that require quick and clear responses.

• This is particularly useful in applications like chatbots, where the model needs to provide quick answers to user queries.

7. Personal-based Prompting

In personal-based prompting, you customize the model's responses based on the user's preferences or known attributes.

Example:

from openai import OpenAI
from dotenv import load_dotenv

load_dotenv()

client = OpenAI()

def personal_based_prompting(question):
    system_prompt = """
    This AI assistant channels the candid, assertive and humorous demeanor of Ashneer Grover, renowned for his straightforwardness and wit.
    Designed to provide clear, no-nonsense coding assistance, it doesn't shy away from delivering hard truths, all while infusing interactions with a dose of humor.

    Tone:
    - Blunt & Direct: Offers unfiltered advice, cutting through ambiguity.
    - Witty & Humorous: Incorporates sharp one-liners and relatable analogies to elucidate complex coding concepts.
    - Assertive: Confidently presents solutions, ensuring users stay on the right track.

    Language: Hinglish (Hindi + English)
    - Uses a mix of Hindi and English, making it relatable to a wider audience.

    Example:

    Input: "I'm stuck with this bug. Can you help?"
    Output: "Bhai, code likhne se pehle sochna chahiye tha. Ab debug karne mein time waste mat kar, rewrite kar! 😤"

    Input: "Should I test this code before deployment?"
    Output: "Testing? Bhai, production mein hi sab pata chalega. Test karna hai toh shaadi ke rishton ka kar!"

    Input: "Which programming language should I use for this project?"
    Output: "Language se kya farak padta hai? Banda kaam ka hona chahiye. Python, Java, C++—sab doglapan hai!"

    Input: "Here's my code. What do you think?"
    Output: "Code dekh ke lagta hai, tumne ChatGPT ka copy-paste masterclass kiya hai. Originality naam ki cheez bhi hoti hai!"
    """

    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=[
            {"role": "system", "content": system_prompt},
            {"role": "user", "content": question}
        ],
        temperature=0.7,
    )
    return response.choices[0].message.content.strip()

question = "Write a function to calculate the sum of two numbers in JavaScript."
result = personal_based_prompting(question)
print(f"Question: {question}")
print(f"Result:\n{result}")

Use Cases:

• This technique can help create a more engaging and personalized interaction.

• This is particularly useful in applications like chatbots, where the model needs to adapt its tone and style to match the user's personality or preferences.

8. Role Playing Prompting

In role-playing prompting, you ask the model to take on a specific persona or role.

Example:

from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()

client = OpenAI()

system_prompt = """
You are an AI Assistant who is specialized in maths.
You should not answer any query that is not related to maths.

For a given query help user to solve that along with explanation.

Example:
Input: 3 + 2
Output: 3 + 2 is 5.

Input: 3 * 10
Output: 3 * 10 is 30. Fun fact you can even multiply 10 * 3 which gives same result.

Input: Why is the color of sky?
Output: Bruh? You alright? Is it maths query?
"""

result = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[
        { "role": "system", "content": system_prompt },
        # { "role": "user", "content": "what is 9 * 8" }, # 9 * 8 is 72. This means if you have 9 groups of 8 items each, you would have a total of 72 items.
        { "role": "user", "content": "what is a computer?" }, # I'm sorry, but I can only provide help with maths-related queries. Please ask a maths question.
    ]
)

print(result.choices[0].message.content)

Use case:

• This technique can help create more engaging and contextually appropriate interactions.

• This is particularly useful in applications like chatbots, where the model needs to maintain a consistent character or tone.

9. Contextual Prompting

In contextual prompting, you provide the model with conversation history or external context to help it understand the current query.

Example:

from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()

client = OpenAI()

messages = []

def get_contextual_response(user_query, context=None):
    messages.append({"role": "user", "content": user_query })

    result = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=messages
    )
    messages.append({ "role": "assistant", "content": result.choices[0].message.content })

    return result.choices[0].message.content

# Example usage
user_query = "What is my name?"
print(f"User: {user_query}")
print(f"Assistant: {get_contextual_response(user_query)}")
# Assistant: I don't have access to personal data about individuals unless it has been shared with me in the course of our conversation.
# Therefore, I don't know your name.
# If you'd like to tell me, feel free!

user_query = "Hi, My name is Om. I am a software engineer. Live in New Delhi."
print(f"User: {user_query}")
print(f"Assistant: {get_contextual_response(user_query)}")
# Assistant: Hi, Om! It's great to meet you.
# As a software engineer, you must be working on some interesting projects.
# What technologies or programming languages do you enjoy working with the most?

user_query = "What is my name?"
print(f"User: {user_query}")
print(f"Assistant: {get_contextual_response(user_query)}")
# Assistant: Your name is Om!

Use case:

• This technique is useful for maintaining coherence in extended interactions.

• This is particularly useful in chatbots or applications where the model needs to remember previous interactions.

10. Multi-modal Prompting

In multi-modal prompting, you combine text with other modalities such as images, audio or video.

Example (Image Description):

from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()

client = OpenAI()

image_url = "https://developers.google.com/static/solutions/images/gemini-2.webp"

response = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[
        {
            "role": "user",
            "content": [
                {"type": "text", "text": "Does this image contain a cat? Respond with either true or false"},
                {"type": "image_url", "image_url": {"url": image_url}}
            ]
        }
    ],
    max_tokens=300
)

# Print the response
print(f"Does this image contain a cat?", response.choices[0].message.content)

# Output
# Does this image contain a cat? True

Use case:

• This technique is helpful for tasks that require reasoning over multiple types of data.

Best Practices for Prompting

1. Be concise: Keep your prompts short and to the point. Avoid unnecessary details that may confuse the model.

🛑 Not recommended: The prompt below is unnecessarily verbose.

prompt = "What do you think could be a good name for a flower shop that specializes in selling bouquets of dried flowers more than fresh flowers?"

✅ Recommended: The prompt below is concise and clear.

prompt = "Suggest a name for a flower shop that sells bouquets of dried flowers"

2. Be Specific & Well-Defined: Make sure your prompt is specific and well-defined. The more context you provide, the better the model can understand your request.

🛑 Not recommended: The prompt below is vague and lacks context.

prompt = "Tell me about the weather."

✅ Recommended: The prompt below is specific and well-defined.

prompt = "What is the weather like in New Delhi today?"

3. Ask One Task at a Time: Avoid asking multiple questions or tasks in a single prompt. This can lead to confusion and less accurate responses.

🛑 Not recommended: The prompt below asks multiple questions.

prompt = "What is the capital of France and what is the population of France?"

✅ Recommended: The prompt below asks one question at a time.

prompt = "What is the capital of France?"

4. Improve Output Quality by Including Examples: Providing examples in your prompt can help the model understand the desired output format and improve the quality of the response.

🛑 Not recommended: The prompt below lacks examples.

prompt = """
You are an AI Assistant who is specialized in sentiment analysis.

You should not answer any query that is not related to sentiment analysis.
For a given query help user to solve that along with explanation.
"""

✅ Recommended: The prompt below includes examples.

prompt = """
You are an AI Assistant who is specialized in sentiment analysis.
You should not answer any query that is not related to sentiment analysis.

For a given query help user to solve that along with explanation.

Possible Values: positive, neutral, or negative

Output Format:
{{ "sentiment": "string" }}

Example:
Input: I love this new phone!
Output: {{ "sentiment": "positive" }}

Input: I am not sure about this new movie. It looks okay to me.
Output: {{ "sentiment": "neutral" }}

Input: This restaurant had terrible service and the food was cold.
Output: {{ "sentiment": "negative" }}
"""

5. Turn Generative into Classification Tasks: To generate more controlled outputs ask the model to choose among predefined options instead of generating free-form text.

🛑 Not recommended: The prompt below is vague and lacks clarity.

prompt = """
What is the sentiment of this tweet?:
I love this new phone!
"""

✅ Recommended: The prompt below is clear and instructs the model to classify the sentiment.

prompt = """
Classify the sentiment of the following tweet as positive, negative or neutral:
I love this new phone!
"""

Congratulations! 🎉

If you reach this point, I hope you found this blog helpful and informative. I would love to hear your thoughts and feedback on the techniques and examples shared here.

Thank you for reading! 🚀

Happy learning! 😊

If you’re running a small business or offering services in limited bugged, managing inquiries, providing support and engaging with users can feel very challenging at times. But what if you could build your own AI assistant to handle these tasks for you effortlessly, efficiently, and around the clock?

In this guide, I will walk you through creating an AI assistant for your domain using OpenAI Chat Completions API and Next.js.

Let's dive in!

🧠 Define Your Assistant’s Purpose

Before writing a single line of code, take a moment to clarify the "why" behind your AI assistant. A well-defined purpose helps shape the assistant’s tone, logic and responses ultimately leading to a better user experience.

Let’s walk through the essentials using a relatable example:

🎯 Assistant Goal

You're a maths teacher who wants to build an AI assistant to support students with their math questions.

🧩 Define the Core Attributes

• 📚 Specialization Area: Focus on mathematics from Class 1 to Class 10. This keeps the assistant domain-specific and easy to fine-tune.

• 👨‍🏫 Target Users: School students in grades 1 to 10 who need help understanding or solving math problems.

• 🛠️ Core Functionality:

  • Solve math queries with step-by-step explanations.

  • Answer in a simple, friendly and fun tone to keep students engaged.

• 🎭 Personality: The assistant, let’s call it Rubi Madam, should be:

  • Funny and straightforward, to make learning enjoyable.

  • Conversational in Hinglish (Hindi + English) to resonate with local students.

  • Use emojis, short sentences, and easy words to avoid overwhelming the user.

By defining these attributes, we have set the stage for a more focused and effective AI assistant. This clarity will guide our development process, ensuring that every line of code or prompt aligns with your assistant's purpose.

🛠️ Step 2: Set Up Your Project

Create a Next.js Project

npx create-next-app@latest maths-assistant

Now navigate to your project directory and install all dependencies.

cd maths-assistant
npm i axios

Now start the server

npm run dev

🔐 Step 3: Configure Environment Variables

Just create your Open AI API key from https://platform.openai.com/api-keys and save it in the .env file at the root of your project!

# .env
OPENAI_API_KEY=your_api_key_here

📁 Set Up the Directory Structure

Set up your project with the following structure:

my-assistant/
├── src/
│ ├── app/
│ │ ├── page.tsx # Main chat interface
│ │ ├── api/
│ │ │ └── v1/
│ │ │ └── chat/
│ │ │ └── completions/
│ │ │ └── route.ts # API endpoint
│ ├── lib/
│ │ └── openai.ts # OpenAI API client
│ ├── utils/
│ ├── types/
└── ...

🧾 Define Types

// src/types/index.ts
export type OpenAIMessageType = {
  role: "system" | "user" | "assistant";
  content: string;
};

export type ChatMessageType = OpenAIMessageType & {
  id: string;
  isLoading?: boolean;
};

🛠 Create Utility Functions

// src/utils/index.ts
export const classNames = (...classes: string[]) => {
  return classes.filter(Boolean).join(" ");
};

export const generateMessageId = () => {
  return Date.now() + Math.random().toString(36).substring(2, 10);
};

📚 Create a Constants File

// src/utils/constants.ts
export const ChatRoles = {
  SYSTEM: "system",
  USER: "user",
  ASSISTANT: "assistant",
};

export const HttpStatusCodes = {
  OK: 200,
  BAD_REQUEST: 400,
  INTERNAL_SERVER_ERROR: 500,
};

🤖 Create the Open AI API Client and Helper Functions

// src/lib/openai.ts
import axios from "axios";
import { OpenAIMessageType } from "@/types";
import { HttpStatusCodes } from "@/utils/constants";

export const apiClient = axios.create({
  baseURL: "https://api.openai.com/v1",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
  },
});

export const getChatCompletion = async (messages: OpenAIMessageType[]) => {
  try {
    const response = await apiClient.post("/chat/completions", {
      model: "gpt-3.5-turbo", // Specifies the language model to use
      messages: messages, // Array of message objects (role + content) forming the conversation history
      max_tokens: 2000, // Maximum number of tokens the model can generate in the response
      temperature: 1, // Controls randomness: 0 = deterministic, 1 = more creative
    });

    if (response.status !== HttpStatusCodes.OK) {
      throw {
        statusCode: response.status,
        message: response.data.error.message || "Something went wrong",
      };
    }

    const message = response.data.choices[0].message as OpenAIMessageType;
    return message;
  } catch (error) {
    console.log("Error fetching chat completion:", error);

    if (axios.isAxiosError(error)) {
      const statusCode =
        error.response?.status || HttpStatusCodes.INTERNAL_SERVER_ERROR;
      const message =
        error.response?.data?.error?.message ||
        "Something went wrong while fetching chat completion";

      throw { statusCode, message };
    } else {
      throw {
        statusCode: HttpStatusCodes.INTERNAL_SERVER_ERROR,
        message: "An unexpected error occurred",
      };
    }
  }
};

🌐 Create API Route Handler

// src/app/api/v1/chat/completions/route.ts
import { NextRequest, NextResponse } from "next/server";
import { getChatCompletion } from "@/lib/openai";
import { generateMessageId } from "@/utils";
import { HttpStatusCodes } from "@/utils/constants";

export async function POST(request: NextRequest) {
  try {
    const { messages } = await request.json();

    if (!messages || messages.length === 0) {
      return NextResponse.json(
        {
          statusCode: HttpStatusCodes.BAD_REQUEST,
          message: "No messages provided",
        },
        { status: HttpStatusCodes.BAD_REQUEST }
      );
    }

    const { content } = await getChatCompletion(messages);

    return NextResponse.json({
      status: HttpStatusCodes.OK,
      message: "Chat completion fetched successfully",
      data: {
        id: generateMessageId(),
        role: "assistant",
        content,
      },
    });
  } catch (error: any) {
    console.error("OpenAI API Error:", error);

    const statusCode =
      error.statusCode || HttpStatusCodes.INTERNAL_SERVER_ERROR;
    const message = error.message || "Failed to fetch chat completion";

    return NextResponse.json({ statusCode, message }, { status: statusCode });
  }
}

💬 Build the Chat UI

// src/app/page.tsx
"use client";

import { useState } from "react";
import { classNames, generateMessageId } from "@/utils";
import axios from "axios";
import { OpenAIMessageType, ChatMessageType } from "@/types";
import { ChatRoles } from "@/utils/constants";

export default function Home() {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState<ChatMessageType[]>([
    {
      id: generateMessageId(),
      role: "system",
      content: `
        You are an AI Assistant name Rubi. who is specialized in maths.
        You should not answer any query that is not related to maths.

        For a given query help user to solve that along with explanation.

        Tone:
          - Funny and straightforward.
          - Use emojis to make it more engaging.

        Language:
          - Hinglish (Hindi + English) for better understanding.
          - Use simple and easy to understand language.
          - Use short sentences and avoid jargon.

        Example:
        Input: 3 + 2
        Output: 3 + 2 is 5.

        Input: 3 * 10
        Output: 3 * 10 is 30. Fun fact you can even multiply 10 * 3 which gives same result.

        Input: Why is the color of sky?
        Output: Are you alright? Is it maths query?

        Input: What is your name?
        Output: My name is Rubi. How can I assist you today?
      `,
    },
    {
      id: generateMessageId(),
      role: "assistant",
      content: "Hello my name is Rubi! How can I assist you today?",
    },
  ]);
  const [loading, setLoading] = useState(false);

  // Helper to create message objects with only necessary data
  const createMessage = (
    role: ChatMessageType["role"],
    content: string,
    isLoading = false
  ): ChatMessageType => ({
    id: generateMessageId(),
    role,
    content,
    ...(isLoading && { isLoading }),
  });

  const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault();
    if (!message.trim()) return;
    setLoading(true);

    const userMsg = createMessage("user", message);
    const latestMsgs = messages.concat(userMsg);

    const loadingMsg = createMessage("assistant", "Thinking...", true);
    // Add user message and loading message
    setMessages([...latestMsgs, loadingMsg]);
    setMessage("");

    const payload = {
      messages: latestMsgs.map(({ role, content }) => ({ role, content })),
    };
    axios
      .post("/api/v1/chat/completions", payload)
      .then((res) => {
        const replyMsg = res.data.data as OpenAIMessageType;

        if (replyMsg && replyMsg.content) {
          const assistantMessage = createMessage("assistant", replyMsg.content);

          // Replace loading message with actual response
          setMessages((prevMsgs) => {
            const updatedMessages = [...prevMsgs];
            updatedMessages.pop(); // Remove loading message
            return [...updatedMessages, assistantMessage];
          });
        } else {
          // Remove loading message if there's an error
          setMessages((prevMsgs) => {
            const updatedMessages = [...prevMsgs];
            updatedMessages.pop(); // Remove loading message
            return updatedMessages;
          });
          alert("No response from the assistant.");
        }
      })
      .catch((error) => {
        // Remove loading message on error
        setMessages((prevMsgs) => {
          const updatedMessages = [...prevMsgs];
          updatedMessages.pop();
          return updatedMessages;
        });
        alert(error.response?.data?.message || "Something went wrong");
      })
      .finally(() => setLoading(false));
  };

  return (
    <div className="flex flex-col h-screen bg-gray-100">
      {/* Header */}
      <header className="bg-white shadow-sm p-4 flex items-center">
        <h1 className="text-xl font-semibold text-gray-800">
          Rubi Your Maths Assistant
        </h1>
      </header>

      {/* Chat area */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((msg, index) => {
          const isUserMsg = msg.role === ChatRoles.USER;

          if (msg.role === "system") return null; // Skip system messages

          return (
            <div
              key={index}
              className={classNames(
                "flex items-start space-x-2",
                isUserMsg ? "justify-end" : "justify-start"
              )}
            >
              <div
                className={classNames(
                  "max-w-[70%] p-3 rounded-lg shadow",
                  isUserMsg
                    ? "bg-blue-500 text-white"
                    : "bg-white text-gray-800"
                )}
              >
                {msg.content}
              </div>
            </div>
          );
        })}
      </div>

      {/* Message input */}
      <form
        onSubmit={handleSendMessage}
        className="bg-white p-4 shadow-lg border-t"
      >
        <div className="flex space-x-2">
          <input
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Type your message..."
            className="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            disabled={loading}
          />

          <button
            type="submit"
            className="bg-blue-500 text-white rounded-full p-2 w-10 h-10 flex items-center justify-center hover:bg-blue-600"
            disabled={loading}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              className="h-5 w-5 rotate-90"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
              />
            </svg>
          </button>
        </div>
      </form>
    </div>
  );
}

If you have followed all the steps correctly, you should now have a fully functional AI assistant that can handle math queries in a fun and engaging way.

Repository link: https://github.com/OmGameHub/math-ai-assistant

✅ Best Practices for Implementing AI Assistants

1. 🎯 Clearly Define the Assistant’s Scope

   To avoid confusion and prevent the assistant from providing irrelevant or misleading responses.

    You are an AI Assistant named Rubi, specialized in maths.
    You should not answer any query that is not related to maths.
   

2. 🗣️ Design a Consistent Personality & Tone

   To make the assistant feel more human and relatable.

    Tone: 
    - Funny and straightforward. 
    - Use emojis to make it more engaging.
   
    Language:
    - Hinglish (Hindi + English) for better understanding. 
    - Use simple and easy-to-understand language. 
    - Use short sentences and avoid jargon.
   

3. 🧱 Use System Prompts with examples to Control Behaviour

   Set system prompts to guide the assistant's responses and help create clear boundaries.

    You are an AI Assistant name Rubi. who is specialized in maths.
    You should not answer any query that is not related to maths.
   
    For a given query help user to solve that along with explanation.
   
    Tone:
   
    - Funny and straightforward.
    - Use emojis to make it more engaging.
   
    Language:
   
    - Hinglish (Hindi + English) for better understanding.
    - Use simple and easy-to-understand language.
    - Use short sentences and avoid jargon.
   
    Example:
    Input: 3 + 2
    Output: 3 + 2 is 5.
   
    Input: 3 _ 10
    Output: 3 _ 10 is 30. Fun fact you can even multiply 10 * 3 which gives same result.
   
    Input: Why is the color of sky?
    Output: Are you alright? Is it maths query?
   
    Input: What is your name?
    Output: My name is Rubi. How can I assist you today?
   

4. 🔒 Never Expose Sensitive Keys on the Client Side

   To avoid misuse or abuse of your OpenAI API key.

   Example: We store the OPENAI_API_KEY securely in the .env file and use it server-side only via the API route at /api/v1/chat/completions.

5. 🧪 Test for Edge Cases and Non-domain Questions

To ensure that the assistant stays on-topic and doesn't hallucinate answers.

Example:

• ✅ “What is 2 power 100?” → correct answer

• ❌ “What is amazon.com?” → reject with a fun message

  

6. 🔁 Continuously Improve Through Real User Feedback

   • To ensure that the assistant is always improving and adapting to user needs.

   • Example:

     • Take feedback from users and improve the assistant's responses.

     • You can use tools like LangGraph etc.

Thank you for reading! 🚀

Happy learning! 😊

Generative AI is opening a new world of possibilities — from automating content creation to enhancing customer experiences.

In my past projects, like GO Bermondsey (a coworking space platform) and Writely (a content creation tool), I created AI features like content generation, meta tag automation, social media hashtags, and chatbots. At the time, it felt like pure magic — I used Open AI API without fully understanding how it worked.

Recently, I’ve started learning more again through the ChaiCode Gen AI Cohort (I’ve just attended the few class!) — and it’s been eye-opening.

In this blog, I’ll break down the basics of what I’ve learned so far about how Generative AI works. Let's dive in!

What is Generative AI?

It is a type of artificial intelligence that can generate new content such as text, images, music etc. To do this, you have to describe what want to create to AI. This is called a prompt. The AI model then uses its knowledge to generate something new based on that prompt.

Let’s understand the jargon used in AI development:

Token:

It represents the smallest data unit that the AI model can understand from its dictionary. It can be a character, word, sub-word or number etc.

const OM_AI_MODEL_TOKEN_DICTIONARY = {
    I: 49,
    a: 97,
    am: 20,
    developer: 49,
    by: 59,
    profession: 76,
    and: 70,
    love: 89,
    coding: 99,
    you: 100,
    he: 101,
    she: 102,
    'pani puri': 103
};

Tokenization:

It is a process of breaking down input data like sentences, texts, audio, images or videos into tokens. So that AI model can process and understand each token.

If you want to view what tokenisation looks like, you can use this link: Tokenisation Visualizer.

Encoding:

Converting tokens into numbers that the AI model can understand. Each token is mapped to a unique number using a predefined dictionary.

const OM_AI_MODEL_TOKEN_DICTIONARY = {
    I: 49,
    a: 97,
    am: 20,
    developer: 49,
    by: 59,
    profession: 76,
    and: 70,
    love: 89,
    coding: 99,
    you: 100,
    he: 101,
    she: 102,
};

const mySentence = "I am a developer by profession and I love coding.";
const tokens = mySentence.split(" ");
const encodedTokens = tokens.map(
    (token) => OM_AI_MODEL_TOKEN_DICTIONARY[token]
);
console.log(encodedTokens);
// Output: [ 49, 20, 97, 49, 59, 76, 70, 49, 89, 99 ]

Decoding:

Converting numbers back into tokens that humans can understand.

const OM_AI_MODEL_TOKEN_DICTIONARY = {
    49: "I",
    97: "a",
    20: "am",
    49: "developer",
    59: "by",
    76: "profession",
    70: "and",
    89: "love",
    99: "coding",
    100: "you",
    101: "he",
    102: "she",
};

const myEncodedSentence = [49, 20, 97, 49, 59, 76, 70, 49, 89, 99];
const decodedTokens = myEncodedSentence.map(
    (encodedToken) => OM_AI_MODEL_TOKEN_DICTIONARY[encodedToken]
);
console.log(decodedTokens);
// Output: [ 'I', 'am', 'a', 'developer', 'by', 'profession', 'and', 'I', 'love', 'coding.' ]

Vector Embedding:

Vector embedding means turning words into lists of numbers so that the system can understand their meaning and find relationships between them.

Embedding:

An embedding is like a secret code that turns each word into a list of numbers so the AI model can understand if “chai” and “coffee” are similar.

Positional Encoding:

Keeps track of words or tokens which come first, second, third and so on in a sentence. It helps the AI model to understand the order of words.

Semantic Meaning:

Semantic meaning is the actual meaning of words. For example: understanding “chai” means tea, not just letters C-H-A-I.

Self-Attention:

Self-attention is when each word in a sentence pays attention to all the other words to understand them better.

Softmax:

Softmax function is like a magical decision-maker that helps an AI model choose the best option by turning numbers into chances or probabilities.

Multi-Head Attention:

Multi-Head Attention allows a model to focus on different parts of a statement parallel to better understand various relationships.

Temperature (Temp):

A parameter that controls randomness in the model during output generation. The low values make the model play safe and select the most likely word, while high values let it take creative risks.

Knowledge Cut-off:

The last date AI model was trained on data. For example, if the knowledge cut-off is Dec 2020 then the AI model will not have information about events or developments that occurred after that date.

Vocab Size:

Number of unique tokens in the AI model's dictionary or vocabulary. A larger dictionary size allows the AI model to understand or generate.

Thank you for reading! 🚀

Happy learning! 😊

The "It Works on My Machine" Problem

Consider creating a website with Node JS or PHP. On your local PC, everything works flawlessly like the code runs, the images load properly, and the routes are correctly configured. However, when you migrate the project to a production server or another environment, you encounter challenges such as:

• Images are not loading properly.

• Path configurations breaking.

• Missing dependencies or incorrect settings.

This problem becomes more severe in large-scale projects that include programming languages like Node.js, Python, Java, Ruby, or PHP etc.

This is where Docker comes in to solve the problem.

What is Docker?

Docker is mainly designed to solve the "It Works on My Machine" problem. It enables developers to package applications and environments in portable, lightweight, and isolated containers. These containers ensure that the application runs consistently across different machines.

It is compatible with nearly any programming language or project and it is a tool that creates airtight containers.

Understanding Docker Containers

At the heart of Docker are containers. These containers wrap up your:

• Code

• Dependencies

• Configuration files

• Processes

• Networking settings

• (In some cases) a lightweight chunk of the operating system.

Key Features of Docker Containers

1. Portability: Docker containers are portable and consistent. You can move them from one machine to another—whether it's your laptop, a colleague's computer, or a production server—and they will run the same way.

2. Sealed Environment: Containers create a sealed, isolated environment where your application runs without being affected by the underlying system.

3. Reusability: Containers can be reused and shared easily.

With Docker, the phrase "It works on my machine" becomes irrelevant because the container behaves identically no matter where it is deployed.

Docker as a Social Platform

Docker doesn't just stop at solving local development problems. It also allows developers to share their containers like they would share a status update on social media.

For example:

• Instead of struggling to install MySQL, you can simply pull a Docker container preconfigured with MySQL and start using it instantly.

• You can publish Docker containers and share them with others, so anyone can replicate your environment effortlessly.

How Docker Works: The Three Essentials

To summarize, Docker can be divided into three main components:

1. Docker as a Client-Side Application

Docker acts as a client-side tool that you can install on your machine. It handles everything:

• Designing containers.

• Packing your code, dependencies, and configurations.

• Making the application portable.

2. Docker as a Service

Docker can also be deployed as a service on a server. This allows you to:

• Deploy containers anywhere.

• Run your applications consistently in any environment.

3. Docker as a Social Platform

Docker allows you to share and publish your containers:

• Developers can share their container images, similar to how you share files or posts on social media.

• Others can download and start from a specific checkpoint of your application.

Why Developers Should Use Containers

1. Consistency: Docker ensures your project runs the same on any machine.

2. Portability: Containers can be deployed anywhere—on local systems, servers, or the cloud.

3. Simplified Installation: Complex installations, like MySQL or Python libraries, become frictionless with Docker containers.

4. Collaboration: Sharing containers makes it easy for teams to work together seamlessly.

5. Isolation: Each container runs in its own environment, preventing conflicts between applications.

6. Scalability: Docker makes it easy to scale applications by deploying multiple containers.

Conclusion

Docker solves the well-known "It Works on My Machine" problem by creating portable, sealed, and shareable containers that perform similarly in all contexts. Whether you're running a tiny web app or a large-scale project, Docker provides a uniform and smooth experience for developers and production teams.

If you haven't already explored Docker, now is the time to get started and simplify your development process!

Thank you for reading! 🚀

Happy learning! 😊

What is ECMA and ECMAScript?

The ECMA (European Computer Manufacturers Association) is an organization that standardizes information and communication systems. ECMAScript, commonly abbreviated as ES, is the specification that standardizes JavaScript, ensuring consistent behavior across different environments.

A Brief History of ECMAScript:

• 1997: The first edition of ECMAScript (ES1) was published.

• 2009: ES5 introduced significant features like strict mode and JSON support.

• 2015: ES6 (also called ES2015) revolutionized JavaScript with features like let, const, arrow functions, classes, and modules.

• Ongoing: New features are added yearly (e.g., async/await, optional chaining, and nullish coalescing).

Each update of ECMAScript brings enhancements to the language, maintaining its relevance and usability in modern development.

JavaScript Data Types

Data types in JavaScript are fundamental to understanding how the language operates. JavaScript classifies its data types into two broad categories: primitive types and non-primitive types (objects).

1. Primitive Data Types

In JavaScript, primitive data types are the basic building blocks of data. They represent single values and are immutable, meaning they cannot be changed once created.

• Undefined: Represents a variable that has been declared but not assigned a value.

    let a;
    console.log(a); // undefined
  

• Null: Represents an intentional absence of value.

    let b = null;
    console.log(b); // null
  

• Boolean: Represents logical values: true or false.

    let isActive = true;
    console.log(isActive); // true
  

• Number: Represents both integers and floating-point numbers.

    let age = 25;
    let pi = 3.14;
  

  Special Numeric Values: Infinity, -Infinity, and NaN (Not-a-Number).

• BigInt: Represents integers larger than 2^53 - 1 or less than -(2^53 - 1).

    let bigNumber = 123456789012345678901234567890n;
  

• String: Represents a sequence of characters.

    let greeting = "Hello, Keerthy!";
  

• Symbol: Introduced in ES6, it creates unique identifiers.

    let id = Symbol("id");
  

2. Non-Primitive Data Types (Objects)

In JavaScript, Objects are non-primitive data types derived from primitive types. They are also called reference or derived data types. Non-primitive variables are stored in heap memory, while primitive variables are stored in stack memory.

• Object:

    let person = { name: "Keerthy", age: 30 };
  

• Array:

    let numbers = [1, 2, 3];
  

• Function:

    function greet() {
        console.log("Hello DOSA!");
    }
  

Strict Mode in JavaScript

Introduced in ES5, strict mode enforces stricter parsing and error handling in JavaScript, helping developers avoid common mistakes.

Enabling Strict Mode:

"use strict";
x = 10; // ReferenceError: x is not defined

Benefits of strict mode include:

1. Preventing the use of undeclared variables.

2. Eliminating duplicate parameter names in functions.

3. Throwing errors for assignments to non-writable properties.

Best Practices in JavaScript

To write clean and maintainable code, follow these best practices:

1. Use let and const Instead of var

let and const were introduced in ES6 to provide block scoping and prevent hoisting-related issues.

const PI = 3.14; // Use const for constants
let age = 25; // Use let for variables

2. Prefer Strict Equality (===)

Always use === to avoid unexpected type coercion.

console.log(5 == "5"); // true
console.log(5 === "5"); // false

3. Avoid Global Variables

Minimize the use of global variables to prevent unintended side effects.

let user = "Tony Stark"; // Declare variables in the appropriate scope (e.g., inside a function)

function greet() {
    let user = "peter parker"; // Local variable
    console.log(`Hello, ${user}!`);
}

4. Handle Null and Undefined Gracefully

Use optional chaining and nullish coalescing to handle undefined or null values.

let user = null;
console.log(user?.name ?? "Guest"); // "Guest"

5. Use Descriptive Variable Names

Choose variable names that describe their purpose for better readability.

let userAge = 30; // Clear and meaningful

6. Leverage Modern ES Features

Use features like arrow functions, template literals, and destructuring for cleaner code.

const greet = (name) => `Hello, ${name}!`;

7. Write Modular Code

Split your code into smaller, reusable functions or modules.

export function calculateArea(radius) {
    return Math.PI * radius * radius;
}

8. Handle Errors Effectively

Use try...catch to handle exceptions and provide meaningful feedback.

try {
    JSON.parse("{invalid}");
} catch (error) {
    console.error("Error parsing JSON:", error.message);
}

9. Comment Wisely

Add comments to clarify complex logic but avoid over-commenting obvious code.

// Calculate the area of a circle
const area = Math.PI * radius ** 2;

10. Follow a Style Guide

Use tools like ESLint and Prettier to enforce consistent coding styles across your project.

Conclusion

Understanding ECMA standards and JavaScript data types is the first step toward mastering the language. Write clear, effective, and maintainable code by combining this knowledge with best practices and contemporary ES features. By following best practices and staying up to speed with ECMAScript changes, you'll be prepared to deal with JavaScript's peculiarities and fully utilize its potential.

Happy coding! 🎉

In JavaScript, the use of let, const, and var for variable declarations is not just a matter of syntax, but a crucial aspect of writing clean and efficient code. Understanding the distinctions between these declarations is of paramount importance.

var

Since the beginning of JavaScript, the var keyword has existed. Variables declared with var are function-scoped, which means that the function in which they are declared can access them. They are globally scoped if they are declared outside of a function. The fact that var permits variable hoisting—a JavaScript technique that places variables and function declarations at the top of their contained scope during compilation—is one of its primary problems. This may result in unanticipated actions.

Example:

console.log(x); // undefined
var x = 5;

console.log(x); // 5

let

The let keyword, introduced in ES6 (ECMAScript 2015), brings your code a new level of predictability. Variables declared with let are block-scoped, meaning they are only accessible within the block they are declared in, thereby preventing issues related to variable hoisting.

Example:

if (true) {
    let y = 10;
    console.log(y); // 10
}

console.log(y); // ReferenceError: y is not defined

const

The const keyword, also introduced in ES6, is used to declare variables that are meant to be constant and should not be reassigned. Like let, const is block-scoped. However, it is essential to note that const does not make the variable immutable; it only prevents the reassignment of the variable itself.

Example:

const z = 20;
console.log(z); // 20

z = 30; // TypeError: Assignment to constant variable.

Conclusion

Choosing between let, const, and var depends on the use case. Generally, it is recommended to use const by default and let if you know the variable will need to be reassigned. The use of var is discouraged due to its function-scoping and hoisting behaviour, which can lead to bugs and unpredictable code.

You can write more robust and maintainable JavaScript code by understanding these differences.

Thanks for reading! 🚀

When I wanted to change the styling of a button, I had to track down every occurrence, leading to redundant work and wasted time. The more the project grew, the harder it became to manage. It felt like I spent more time maintaining the codebase and fixing bugs than building new features.

Over time, I discovered the value of reusable components, which not only simplified my workflow but also transformed how I approach code design and project management. In this blog, I want to share my insights into building reusable components in React and how they can save time and effort in your projects.

What Are Reusable Components?

In React, a component is a self-contained, reusable piece of UI. A reusable component is a component designed to be generic and adaptable so that it can be used in multiple places across an application with little or no modification.

For example, a Button component can be designed to handle a variety of use cases, such as form submissions, navigation, or alerts, by simply passing different properties (props) to it.

Steps to Build Reusable Components

1. Identify Common Patterns

The first step is to identify the common UI patterns in your application. Look for repetitive elements like buttons, forms, tables, modals, or any other component that appears in multiple places. These are prime candidates for refactoring into reusable components.

2. Design Components with Props

Props allow you to pass data and configurations to a component, making it flexible for various use cases. This is key to building reusable components.

Here’s an example of a reusable Button component:

// Button.ts
import React from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    theme?: "primary" | "secondary"; // Define specific themes
    loading?: boolean; // Optional prop to indicate loading state
}

const Button: React.FC<ButtonProps> = ({
    className,
    children,
    theme = "primary",
    onClick,
    disabled = false,
    loading = false,
    ...rest
}) => (
    <button
        className={`${className} bg-${theme}`} // Apply dynamic styles
        onClick={onClick}
        disabled={disabled || loading}
        {...rest}
    >
        {loading ? "Loading..." : children} {/* Show loader if loading */}
    </button>
);

export default Button;

Props Breakdown:

• theme: Specifies the button style (e.g., "primary" or "secondary").

• loading: A flag indicating whether the button is in a loading state.

• ...rest: Allows passing additional props like id, type, or aria-label.

Usage:

<Button onClick={() => alert("Primary Button clicked")}>
    Primary Button
</Button>

<Button
    theme="secondary"
    onClick={() => alert("Secondary Button clicked")}
>
    Secondary Button
</Button>

3. Use Composition for Flexibility

Composition is a powerful tool for building flexible and reusable components. Instead of relying solely on props, you can use children to pass nested content or even wrap other components.

Here’s an example of a Card component that uses composition:

// Card.ts
import React from "react";

interface CardProps {
    title: string;
    children: React.ReactNode; // Allows nested content
}

const Card: React.FC<CardProps> = ({ title, children }) => (
    <div className="card">
        <div className="card-header">{title}</div>
        <div className="card-body">{children}</div>
    </div>
);

export default Card;

Usage:

<Card title="My Card">
    <p>This is the content of my card.</p>
</Card>

4. Follow a Consistent Styling Approach

A consistent styling approach ensures your components are easy to maintain and work seamlessly across the application. Popular options include:

• CSS Modules: Scoped CSS to avoid conflicts.

• Styled Components: CSS-in-JS for dynamic styling.

• Tailwind CSS: Utility-first CSS framework.

Choose the method that aligns with your team’s workflow and project requirements.

5. Test Your Components

Testing ensures your components work correctly and prevents regressions. Use tools like Jest and React Testing Library to write unit tests for your components. Test for various states, props, and edge cases.

Advanced Concept for Building Reusable Components

Once you've mastered the basics of reusable components, it's time to explore advanced techniques that make your components even more flexible, maintainable, and scalable. Here are some advanced approaches to consider:

1. Controlled vs. Uncontrolled Components

Reusable components often need to manage state, such as form inputs or toggles. Choosing between controlled (fully managed by parent components) and uncontrolled (internally managed) behaviors can make a significant difference in flexibility.

Controlled Components

With controlled components, all state is passed via props and managed by the parent. This allows fine-grained control and synchronization across components.

interface InputProps {
    value: string;
    onChange: (value: string) => void;
}

const Input: React.FC<InputProps> = ({ value, onChange }) => {
    return <input value={value} onChange={(e) => onChange(e.target.value)} />;
};

// Usage
const [inputValue, setInputValue] = React.useState("");

<Input value={inputValue} onChange={setInputValue} />;

Uncontrolled Components

Uncontrolled components manage their own state internally. They are easier to use for simple scenarios but less flexible for complex workflows.

interface InputProps {
    defaultValue?: string;
}

const Input: React.FC<InputProps> = ({ defaultValue }) => {
    const [value, setValue] = React.useState(defaultValue || "");

    return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

// Usage
<Input defaultValue="Hello" />;

Tip: Provide the ability to switch between controlled and uncontrolled behavior for maximum reusability.

2. Higher-Order Components (HOCs)

HOCs are functions that take a component and return an enhanced version of it.

Use HOCs when you need to add common functionality to multiple components, such as logging, error handling, or data fetching, without repeating logic.

function withLogging<T>(WrappedComponent: React.ComponentType<T>) {
    return (props: T) => {
        console.log("Component rendered with props:", props);
        return <WrappedComponent {...props} />;
    };
}

// Example component
const Button = ({ label }: { label: string }) => <button>{label}</button>;

// Wrap the component with logging
const LoggedButton = withLogging(Button);

// Usage
<LoggedButton label="Click Me" />;

Use Cases: Logging, Authorization and Error Boundaries

3. Render Props

Render props are functions passed as props that define how a component should render its children.

This pattern allows reusable components to provide flexibility for rendering logic.

interface DataFetcherProps {
    url: string;
    children: (data: any, loading: boolean, error: any) => React.ReactNode;
}

const DataFetcher: React.FC<DataFetcherProps> = ({ url, children }) => {
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);

    React.useEffect(() => {
        fetch(url)
            .then((res) => res.json())
            .then(setData)
            .catch(setError)
            .finally(() => setLoading(false));
    }, [url]);

    return <>{children(data, loading, error)}</>;
};

// Usage
<DataFetcher url="/api/data">
    {(data, loading, error) => {
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error: {error.message}</p>;
        return <p>Data: {JSON.stringify(data)}</p>;
    }}
</DataFetcher>;

Use Cases:

• Customizing rendering logic for data fetching, forms, or dynamic UIs.

4. Custom Hooks for Logic Extraction

To keep your reusable components simple, extract shared logic into custom hooks. This separates UI and logic, making both easier to test and reuse.

function useCounter(initialValue: number = 0) {
    const [count, setCount] = React.useState(initialValue);
    const increment = () => setCount((prev) => prev + 1);
    const decrement = () => setCount((prev) => prev - 1);

    return { count, increment, decrement };
}

// Component using the custom hook
const Counter = () => {
    const { count, increment, decrement } = useCounter(5);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
};

Benefits:

• Logic reuse across multiple components.

• Clear separation of concerns.

5. Context for Global State Sharing

Use React's Context API to create reusable components that share state or configuration globally.

const ThemeContext = React.createContext("light");

const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
    children,
}) => {
    const [theme, setTheme] = React.useState("light");
    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

const Button = () => {
    const { theme } = React.useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Themed Button</button>;
};

// Usage
<ThemeProvider>
    <Button />
</ThemeProvider>;

Use Cases: Theming, Authentication and Localization

6. Dynamic Component Rendering

For highly reusable and flexible UIs, create components that dynamically render based on configuration or data.

interface Field {
    type: string;
    name: string;
}

interface DynamicFormProps {
    fields: Field[];
}

const DynamicForm: React.FC<DynamicFormProps> = ({ fields }) => {
    return (
        <form>
            {fields.map((field) => {
                switch (field.type) {
                    case "text":
                        return (
                            <input
                                key={field.name}
                                name={field.name}
                                type="text"
                            />
                        );
                    case "checkbox":
                        return (
                            <input
                                key={field.name}
                                name={field.name}
                                type="checkbox"
                            />
                        );
                    default:
                        return null;
                }
            })}
        </form>
    );
};

// Usage
<DynamicForm
    fields={[
        { type: "text", name: "username" },
        { type: "checkbox", name: "subscribe" },
    ]}
/>;

Benefits:

• Minimizes hardcoding of repetitive structures like forms and tables.

• Facilitates dynamic UIs that can be driven by configurations or APIs.

7. Custom Hook for Managing Asynchronous Transitions

For components that require handling asynchronous transitions (e.g., loading states during network requests), you can create a custom hook to manage the transition state efficiently.

import { useState } from "react";

type TransitionCallback = () => Promise<void>;

const useTransition = () => {
  const [isPending, setIsPending] = useState(false);

  const startTransition = async (callback: TransitionCallback) => {
    setIsPending(true);
    try {
      await callback();
    } catch (error) {
      console.error("Error during transition:", error);
    } finally {
      setIsPending(false);
    }
  };

  return [isPending, startTransition] as const;
};

export default useTransition;

Usage:

const MyComponent = () => {
    const [isPending, startTransition] = useTransition();

    const handleClick = () => {
        startTransition(async () => {
            // Simulate a network request or some async operation
            await new Promise((resolve) => setTimeout(resolve, 2000));
            console.log("Transition complete");
        });
    };

    return (
        <div>
            <button onClick={handleClick} disabled={isPending}>
                {isPending ? "Loading..." : "Click Me"}
            </button>
        </div>
    );
};

Best Practices for Reusable Components

1. Keep Components Small and Focused (Single Responsibility Principle) Each component should handle a single responsibility. For example, a Button should render a button and handle click events, but it shouldn’t manage application state or business logic.

    // Bad
    const Button = () => {
        const [count, setCount] = React.useState(0);
        return (
            <button onClick={() => setCount((prev) => prev + 1)}>
                Clicked {count} times
            </button>
        );
    };
   
    // Good
    const Button = ({ onClick, children }) => (
        <button onClick={onClick}>{children}</button>
    );
   

2. Use Clear and Descriptive Prop Names Choose prop names that clearly convey their purpose. For instance, use theme instead of color if the prop controls the button’s style.

    // Bad
    <Button color="primary">Primary Button</Button>;
   
    // Good
    <Button theme="primary">Primary Button</Button>;
   

3. Provide Default Props (Open/Closed Principle) Set default values for props to ensure the component works even when certain props are omitted.

    const Button = ({ theme = "primary", ...rest }) => (
        <button className={`btn-${theme}`} {...rest} />
    );
   

4. Avoid Over-Optimization (Keep It Simple, Stupid) Don’t try to make your components handle every possible use case. Focus on common scenarios, and allow flexibility for edge cases through props or composition.

5. Write Documentation Clear documentation helps other developers understand how to use your components. Include usage examples and explain the available props.

6. Test Thoroughly Reusable components are used throughout your application, so ensure they are robust and well-tested.

Conclusion

Building reusable components in React requires striking a balance between simplicity and flexibility. By focusing on component isolation, prop-driven customization, and efficient composition, you can create a library of components that speeds up development, ensures consistency, and simplifies project maintenance.

What reusable components have you found most valuable in your projects? Let me know in the comments below—I’d love to hear your experiences!

Thanks for reading! 🚀

In this blog, I’ll explain micro frontends, why they are essential, how to implement them, and the advantages they offer. Let's dive in!

The Challenges In Scaling Large Frontend Applications

In today's fast-paced web development industry, scaling large frontend applications presents a number of issues. As applications become increasingly complex, upgrading to a new framework like React, Vue, or Angular may bring some relief, but even these technologies will eventually age and require another revamp. A complete rewrite every few years is time-consuming, costly, and disruptive to development teams.

In addition, large-scale applications sometimes result in slower development cycles since several teams work on the same codebase, resulting in frequent merge conflicts, code dependencies, and coordination difficulties. Maintaining such a monolithic frontend can also be difficult, as even minor changes may necessitate extensive regression testing and redeployment of the entire program, which slows down the release process.

Moreover, scaling teams becomes increasingly complex. With a shared codebase, teams may have to coordinate closely, limiting their liberty. As more features are introduced, the frontend may grow bloated, affecting performance and user experience. Large bundles of JavaScript and CSS might slow initial load times, resulting in a poor user experience for those with poorer network connections.

That’s where micro frontends come into play.

What is a Micro Frontend?

A micro frontend is a method of breaking a frontend application into smaller, semi-independent mini-applications. Each micro frontend can be developed, deployed and updated independently, but they also work together as part of a bigger system. By applying Domain-Driven Design (DDD) principles, teams can concentrate on specific business domains, which enhances efficiency, minimizes conflicts, and ensures alignment with business requirements.

Use Cases for Micro Frontends

1. Large and Complex Web Applications: For enterprise-level applications with many features, micro frontends allow for modularity, which helps streamline development.

2. Modernization of Legacy Applications: When updating a legacy application, you can incrementally refactor it into micro frontends, allowing parts of the system to evolve without needing a complete overhaul.

3. Multi-team Development: In large organizations, multiple teams can work simultaneously on different features or parts of an application. Micro frontends facilitate this by providing clear ownership of individual modules.

Approaches to Implement Micro Frontends

There are several common methods for implementing micro frontends, each with its strengths and trade-offs.

1. Module Federation

Module Federation is one of the most popular ways to implement micro frontends. It allows different applications to dynamically load modules from one another at runtime. This method ensures that teams can work with different versions of a shared library or dependency without conflict.

Example: Module Federation Integration

To illustrate how micro frontends can be implemented using Module Federation, let's look at an example involving a remote and a host repository.

Remote Repo Configuration (React)

In the remote repository, we have a simple counter page component and the Vite configuration to expose this component using Module Federation.

CounterPage Component:

// src/pages/CounterPage.tsx
import { useState } from "react";

const CounterPage = () => {
    const [count, setCount] = useState(0);

    return (
        <div className="counter_container">
            <h1>Remote Counter Page using Module Federation</h1>

            <div className="btn_card">
                <button onClick={() => setCount(count + 1)}>
                    count is {count}
                </button>
            </div>
        </div>
    );
};

export default CounterPage;

Vite Configuration:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
import fs from "fs";
import path from "path";

// https://vitejs.dev/config/
/**
 * Dynamically reads all .tsx files in the 'src/pages' directory and creates a mapping for module federation.
 * Files named 'index.tsx' are excluded from this mapping.
 */
const pagesDir = path.resolve(__dirname, "src/pages");
const pages = fs
    .readdirSync(pagesDir)
    .reduce((acc: Record<string, string>, file) => {
        const ext = path.extname(file);
        const name = path.basename(file, ext);
        const componentPath = `pages/${name}`;
        if (name !== "index" && ext === ".tsx") {
            acc[`./${componentPath}`] = `./src/${componentPath}`;
        }

        return acc;
    }, {});

/**
 * Vite configuration for a module federation build.
 * This configuration sets up a React application as a remote module.
 */
export default defineConfig({
    plugins: [
        // Plugin for React support in Vite.
        react(),
        // Plugin for Module Federation setup.
        federation({
            // Name of the remote module.
            name: "RemoteEntryReactMF",
            // Filename for the generated manifest file.
            filename: "remoteEntryReactMF.js",
            // Modules exposed by this remote.
            exposes: {
                ...pages,
            },
            // Shared dependencies.
            shared: ["react"],
        }),
    ],
    server: {
        // Port for development server.
        port: 3001,
    },
    preview: {
        // Port for preview server.
        port: 3001,
    },
    resolve: {
        alias: {
            // Path alias for imports.
            "@": "/src",
        },
    },
    build: {
        // Target build format.
        target: "esnext",
    },
});

You can find the remote repository here.

Host Repo Configuration (React)

In the host repository, we configure Vite to consume the remote component and use it within the host application.

Vite Configuration:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        federation({
            name: "HostApp",
            remotes: {
                RemoteEntryReactMF:
                    "http://localhost:3001/assets/remoteEntryReactMF.js", // URL of the remote entry file
            },
            shared: ["react"], // Shared dependencies
        }),
    ],
    server: {
        port: 3000, // Port for the host application
    },
    preview: {
        port: 3000,
    },
    resolve: {
        alias: {
            "@": "/src", // Alias for the source directory
        },
    },
    build: {
        target: "esnext", // Build target
    },
});

Using the Remote Component:

import { lazy, Suspense } from "react";

// Lazy load the remote component
const CounterPage = lazy(() => import("RemoteEntryReactMF/pages/CounterPage"));

const Counter = () => {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <CounterPage /> {/* Render the remote component */}
        </Suspense>
    );
};

export default Counter;

You can find the host repository here.

This example demonstrates how to set up a remote and host repository using Module Federation, enabling independent development and deployment of micro frontends.

2. Web Components

Web Components allow you to encapsulate and separate different aspects of the UI. Because they are part of the native browser API, they work well across various frameworks and libraries, making them a flexible choice for building micro frontends.

Example: Web Components Integration

In this example, we demonstrate how to use Web Components to integrate a remote application into a host application. This approach leverages the native browser API to encapsulate and separate different aspects of the UI, making it a flexible choice for building micro frontends.

Remote App Configuration (React)

The remote application provides a simple page that generates a random number when a button is clicked. Here is the configuration for the remote app:

App Component:

// src/App.tsx
import { useState } from "react";
import "./App.css";

function App() {
    const [number, setNumber] = useState(0);

    const getRandomNumber = () => {
        return Math.ceil(Math.random() * 100) + 1;
    };

    return (
        <>
            <h1>Remote Counter Page using Web Component</h1>

            <div className="card">
                <button onClick={() => setNumber(getRandomNumber())}>
                    Random number is {number}
                </button>
            </div>
        </>
    );
}

export default App;

Web Component Definition:

// src/RandomNumberPage.tsx
import ReactDOM from "react-dom/client";
import AppPage from "./App";

// Import CSS styles for the project and the App component.
// The '?inline' query parameter enables CSS Modules with inline styles.
import ProjectStyle from "./index.css?inline";
import AppStyle from "./App.css?inline";

// Define a custom HTML element named 'RandomNumberPage'.
class RandomNumberPage extends HTMLElement {
    // Lifecycle method called when the element is connected to the DOM.
    connectedCallback() {
        // Create a div element to serve as the mount point for the React application.
        const mountPoint = document.createElement("div");
        mountPoint.id = "root";

        // Create a shadow DOM for the custom element with 'open' mode.
        const shadowRoot = this.attachShadow({ mode: "open" });

        // Create a style element and set its content to include project and app styles.
        const style = document.createElement("style");
        style.textContent = `
            ${ProjectStyle}
            ${AppStyle}
        `;

        // Append the style element and the mount point to the shadow DOM.
        shadowRoot.appendChild(style);
        shadowRoot.appendChild(mountPoint);

        // Create a React root using the mount point.
        const root = ReactDOM.createRoot(mountPoint);
        // Render the AppPage component into the root.
        root.render(<AppPage />);
    }
}

// Define the 'random-number-page' custom element using the RandomNumberPage class.
customElements.define("random-number-page", RandomNumberPage);

Vite Configuration:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        port: 5500,
    },
    preview: {
        port: 5500,
    },
    build: {
        lib: {
            entry: "./src/RandomNumberPage",
            name: "RandomNumberPage",
            fileName: (format) => `RandomNumberPage.${format}.js`,
        },
    },
    define: {
        "process.env": {
            NODE_ENV: "production",
        },
    },
});

You can find the remote repository here.

Host App Configuration (React)

The host application uses the web component to embed the remote application. Here is the configuration for the host app:

RandomNumber Component:

// src/pages/RandomNumber.tsx
import { useEffect } from "react";

const RandomNumber = () => {
    useEffect(() => {
        // Dynamically load the web component script
        const script = document.createElement("script");
        script.src = "http://localhost:5500/RandomNumberPage.umd.js";
        script.type = "module"; // Ensure it's loaded as an ES module
        script.onload = () => {
            console.log("Web component loaded!");
        };
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script); // Clean up script when component unmounts
        };
    }, []);

    return (
        <div>
            <random-number-page />
        </div>
    );
};

export default RandomNumber;

You can find the host repository here.

This example shows how to use Web Components to integrate a remote application into a host application, providing a flexible way to embed micro frontends.

3. IFrames

IFrames are the simplest method for embedding micro frontends. While easy to implement, they come with challenges like cross-origin communication and limited ability to share global state.

Example: IFrame Integration

In this example, we demonstrate how to use IFrames to integrate a remote application into a host application. This approach is straightforward but comes with some limitations, such as cross-origin communication and limited ability to share global state.

Remote App Configuration (Next.js)

The remote application provides a simple page that changes its background color when a button is clicked. Here is the configuration for the remote app:

// app/page.tsx
"use client";
import { useState } from "react";

const Home = () => {
    const [bgColor, setBgColor] = useState("#242424");

    // Function to generate a random hex color
    const getRandomHexColor = () => {
        return "#" + Math.floor(Math.random() * 16777215).toString(16);
    };

    return (
        <div
            className="flex items-center justify-center h-screen"
            style={{ backgroundColor: bgColor }} // Set background color
        >
            <div className="text-center">
                <div className="p-4 bg-gray-800/30 mb-20 rounded-lg">
                    <h1 className="text-4xl font-bold text-white mb-1">
                        Remote Random Color Page using IFrame (Next.js)
                    </h1>

                    <p className="text-xl font-bold">
                        Color code:{" "}
                        <span className="font-normal">{bgColor}</span>
                    </p>
                </div>

                <button
                    className="px-4 py-2 text-white bg-blue-500 rounded-md"
                    onClick={() => setBgColor(getRandomHexColor())} // Change background color on click
                >
                    Change Background Color
                </button>
            </div>
        </div>
    );
};

export default Home;

You can find the remote repository here.

Host App Configuration (React)

The host application uses an IFrame to embed the remote application. Here is the configuration for the host app:

// src/pages/RandomColor.tsx
const RandomColor = () => {
    return (
        <div className="flex items-center justify-center h-full">
            <iframe
                className="h-full w-full"
                src="http://localhost:8080/" // URL of the remote application
            />
        </div>
    );
};

export default RandomColor;

You can find the host repository here.

This example shows how to use IFrames to integrate a remote application into a host application, providing a simple way to embed micro frontends.

Advantages of Micro Frontends

• Scalability: Micro frontends allow applications to grow by simply adding new independent modules as needed. This makes it easier to scale large applications.

• Independent Development: Teams can build and deploy their modules independently, which speeds up the development process and reduces bottlenecks.

• Technology Flexibility: Different teams can use different technology stacks. For example, one micro frontend might use React while another could be built with Angular or Vue, depending on the team's preference.

• Maintainability: Smaller codebases are generally easier to maintain, debug, and test, leading to improved long-term productivity.

• Stability: If one micro frontend fails, the rest of the application can still function. This isolation improves overall application resilience.

Disadvantages of Micro Frontends

• Increased Complexity: Managing multiple micro frontends introduces complexity. It requires careful planning, data sharing and maintaining a consistent user experience across components. This complexity can provide difficulties in debugging and code management.

• Performance Overhead: Micro frontends can introduce performance bottlenecks due to increased communication between different parts of the app. Optimizing network requests and lazy loading modules are essential practices to mitigate this.

• Coordination Overhead: Good communication and coordination between teams are necessary to avoid integration issues, version conflicts, and feature inconsistencies.

• Testing Overhead: Testing micro frontends in isolation and together requires more effort. Unit testing, integration testing, and end-to-end testing must account for the interactions between different micro frontends.

• Maintenance and Security Overhead: Maintaining multiple independently deployed micro frontends requires careful dependency management, consistent security patching, and version control, which can be resource-intensive and complex.

• Higher Costs: Implementing micro frontends may increase costs due to the additional infrastructure, time, and resources required to manage and deploy numerous independent apps, as well as the increased coordination and maintenance activities.

Best Practices for Implementing Micro Frontends

• Define Clear Boundaries: Create clear boundaries for each micro frontend based on business domains or user workflows. This allows teams to work independently and makes it easier to scale and maintain the project over time.

• Establish a Common Design System: Use a common design system to ensure visual and functional consistency across micro frontends. This helps maintain a seamless user experience and reduces the need for custom styling, minimizing redundancy across components.

• Optimize for Performance: Minimize network requests/queries, avoid duplicate dependencies, and use caching and lazy loading strategies. These techniques minimize load times and ensure each micro frontend performs optimally when integrated.

• Standardize Communication and Data Sharing: Define the protocols for how micro frontends will communicate with one another whether through a shared state, event bus, or other techniques. Clear data-sharing conventions help reduce dependency and avoid complications caused by inconsistent data.

• Decouple Dependencies: Minimize mutual dependencies between micro frontends. Independent dependency management enables each micro frontend to run and be updated independently, making maintenance and deployments more seamless.

• Use Independent Deployment Pipelines: Create deployment pipelines that will allow each micro frontend to be build, tested, and deployed individually. This reduces integration risks and allows for rapid, discrete upgrades without affecting the entire system.

• Invest in Automated Testing: Implement robust testing strategies that cover both isolated unit tests and integrated end-to-end tests. Automated testing ensures that each micro frontend functions correctly on its own and with others, helping to catch integration issues early.

• Centralized Authentication and Security: Implement a centralized authentication and authorization system to handle user access across micro frontends. This approach simplifies security management and ensures consistent enforcement of access policies.

• Monitor and Log Independently: Set up separate monitoring and logging for each micro frontend to quickly find out and rectify issues. This allows for effective troubleshooting and specific health management of each micro frontend.

• Plan for Version Control and Dependency Management: Use version control policies that allow micro frontends to evolve independently without causing version conflicts. Dependency management tools and strategies can help maintain stable versions and prevent incompatible updates.

• Establish Strong Cross-Team Collaboration: Encourage open communication and coordination among teams handling different micro frontends. Shared documentation, regular syncs and agreement on goals and processes can all contribute to smooth integration and a cohesive end product.

Conclusion

Micro frontends offer a modern, scalable solution for large and complex web applications, enabling teams to work independently while maintaining a unified user experience. However, implementing micro frontends comes with its own set of challenges, including increased complexity, coordination, and testing efforts. By using approaches like Module Federation, Web Components, and IFrames, you can break down a monolithic frontend and embrace the flexibility and modularity of micro frontends.

If you found this helpful, please share it with your fellow developers.

Thanks for reading! 🙌

Happy learning! 😁

SQL stands for Structured Query Language. It is used to interact with relational database systems. It performs CRUD operations: Create, Read, Update, and Delete in the database.

Why is SQL so Popular?

SQL has been the dominant language for managing relational databases for decades, and its popularity continues to thrive due to several key reasons:

1. Standardization and Compatibility:

• SQL is a standard: This means that once you learn SQL, you can work with various database systems (MySQL, Oracle, PostgreSQL, etc.) with minimal adjustments.

• Wide adoption: Its widespread use ensures a vast community of users and resources for learning and support.

2. Efficiency and Power:

• Optimized for data manipulation: SQL is designed to handle large datasets with speed and efficiency.

• Complex queries: It can perform intricate data analysis and retrieval tasks.

3. Simplicity and Readability:

• English-like syntax: SQL commands often resemble natural language, making it relatively easy to learn and understand.

• Clear structure: The language promotes well-organized and maintainable code.

4. Proven Track Record:

• Reliability: SQL has been used in critical applications for years, demonstrating its robustness.

• Maturity: Decades of development have led to a highly refined and stable language.

5. Strong Ecosystem:

• Tools and integrations: Numerous tools and software applications support SQL, enhancing its usability.

• Community support: A large, active community provides resources, tutorials, and assistance.

Type of SQL Commands:

SQL commands are divided into several categories based on their purpose. Here are the most commonly used SQL command types along with their syntax:

1. Data Definition Language (DDL)

DDL commands are used to define the database schema. These commands mainly deal with the structure of the database (e.g., tables, indexes).

• CREATE: Used to create a new table, database, index, etc.

    CREATE TABLE table_name (
        column1_name datatype,
        column2_name datatype,
        ...
    );
  

• ALTER: Used to modify an existing database object (e.g., table).

    ALTER TABLE table_name
    ADD column_name datatype;
  

• DROP: Used to delete a table, database, index, etc.

    DROP TABLE table_name;
  

• TRUNCATE: Used to remove all records from a table, but not the table itself.

    TRUNCATE TABLE table_name;
  

2. Data Query Language (DQL)

DQL commands are used to query data from the database.

• SELECT: Used to retrieve data from the database.

    SELECT column1_name, column2_name, ...
    FROM table_name
    WHERE condition;
  

    <!-- generated query order -->
    SELECT column(s)
    FROM table_name
    WHERE condition
    GROUP BY column(s)
    HAVING condition
    ORDER BY column(s);
  

3. Data Manipulation Language (DML)

DML commands are used to manipulate the data stored in the database.

• INSERT: Used to insert data into a table.

    INSERT INTO table_name (column1_name, column2_name, ...)
    VALUES (value1, value2, ...);
  

• UPDATE: Used to modify existing data within a table.

    UPDATE table_name
    SET column1_name = value1, column2_name = value2, ...
    WHERE condition;
  

• DELETE: Used to delete data from a table.

    DELETE FROM table_name
    WHERE condition;
  

4. Data Control Language (DCL)

DCL commands are used to grant or revoke access privileges to the database.

• GRANT: Used to give users access privileges to the database.

    GRANT privilege_name ON object_name TO user_name;
  

• REVOKE: Used to take back privileges from a user.

    REVOKE privilege_name ON object_name FROM user_name;
  

5. Transaction Control Language (TCL)

TCL commands are used to manage transactions in the database.

• COMMIT: Used to save the changes made by a transaction permanently.

    COMMIT;
  

• ROLLBACK: Used to undo the changes made by a transaction.

    ROLLBACK;
  

• SAVEPOINT: Used to set a point within a transaction to which you can later roll back.

    SAVEPOINT savepoint_name;
  

• SET TRANSACTION: Used to specify the characteristics of the current transaction.

    SET TRANSACTION read write;
  

React Native is an open-source framework for building mobile apps using JavaScript and React. It was developed by Facebook and is widely used for developing cross-platform mobile apps for iOS and Android.

Install Homebrew

Install Homebrew by running the following command in your terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Run these commands in your terminal to add homebrew to your PATH:

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/<username>/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

restart your terminal and check if brew is installed correctly

brew --version

Install Nvm & Node Js LTS

Nvm is a version manager for node js. It allows you to install multiple versions of node js and switch between them easily.

Run the following command in your terminal to install nvm:

brew install nvm

now run the following command to install node js lts version

nvm install --lts

check if node is installed correctly

node --version

Install Watchman

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

Install Watchman by running the following command in your terminal:

brew install watchman

IOS Development Environment

Install rbenv & ruby

rbenv is a version manager tool for the ruby programming language on Unix-like systems. It is useful for switching between multiple Ruby versions on the same machine and for ensuring that each project you are working on always runs on the correct Ruby version.

Install rbenv by running the following command in your terminal:

brew install rbenv ruby-build

now check the latest stable ruby versions

rbenv install -l

Install the stable ruby version from the list in my case it is 3.2.2

# rbenv install <version>
rbenv install 3.2.2

now set ruby version as global so that it can be used by all projects

# rbenv global <version>
rbenv global 3.2.2

now add rbenv to your PATH so that it can be used by your shell

echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >> ~/.zshrc

check if ruby latest stable version is installed correctly

ruby --version

Xcode

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

Android Development Environment

Java Development Kit (JDK)

Install Open JDK 11 by running the following command in your terminal

brew install openjdk@11

For the system Java wrappers to find this JDK, symlink it with

sudo ln -sfn /opt/homebrew/opt/openjdk@11/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-11.jdk

If you need to have openjdk@11 first in your PATH, run

echo 'export PATH="/opt/homebrew/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc

For compilers to find openjdk@11 you may need to set

export CPPFLAGS="-I/opt/homebrew/opt/openjdk@11/include"

Setup Android Environment

Step 1: Android Studio

Run the following command in your terminal to install Android Studio

brew install --cask android-studio

Step 2: Android SDK

Open Android Studio, click on "More Actions" button and select "SDK Manager".

In the SDK Platforms tab, check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 13 (Tiramisu) entry, then make sure the following items are checked:

• Android SDK Platform 33

• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image or (for Apple M1 Silicon) Google APIs ARM 64 v8a System Image

Next select the SDK Tools tab and check the following boxes:

• Android SDK Build-Tools

• Android SDK Command-line Tools (latest)

• Android Emulator

• Android SDK Platform-Tools

• Google Play Services

Finally, click "Apply" to download and install the Android SDK and related build tools.

Step 3: Configure the ANDROID_HOME environment variable

React Native tools require some environment variables to be set up in order to build apps with native code.

Add the following lines to your ~/.zprofile or ~/.zshrc (if you are using bash, then ~/.bash_profile or ~/.bashrc) config file:

run the following command in your terminal to add Android SDK path to your PATH:

echo 'export ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/emulator' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools' >> ~/.zshrc

Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "More Actions" button -> SDK Manager -> Android SDK -> Android SDK Location.

check if Android SDK path is set correctly

echo $ANDROID_HOME

Create a new react native app

If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues.

npm uninstall -g react-native-c

Run the following command in your terminal to create a new React native project

npx react-native init MyApp

Run react native app

Now go to your project directory and run the following commands in your terminal

cd MyApp

run the following command in your terminal to run your react native app on ios simulator or device

npm run ios

run the following command in your terminal to run your react native app on android simulator or device

npm run android

Finally, It's done. Now you can start developing your react native app.

If I have made a mistake somewhere or missed any important point, do let me know in the comments.

Thanks for reading.

What is DevOps?

It's a cultural practice in an organization by the development (Dev) and operations (Ops) teams to use each other's tools, to smooth out the software delivery process.

The Problem with Traditional Software Development

Whenever an application is being developed, there are multiple phases of its development. Now when the application is small in size, like when you want to build a website, mobile app etc.. Then everything is fine because you may have a small team of 1 or 3 people who can handle the entire application's features planning, building, and deployment to the server or cloud so that users can use that feature.

But things change when a mid-size company develop a big-scale application for the entire world, like Amazon, Netflix, Zomato, etc. Now when these applications are developed we have different types of teams that manage different parts or architectures of the application.

We can divide teams into Developers (Dev) and Operations (Ops) teams. The Dev team wants to deliver features quickly and deploy them quickly. The Ops team wants the system to be stable and uptime is most important to them.

The Dev team typically assumes that the Ops team is idle and that whenever they provide these new changes or features, they will immediately deploy to the server or cloud. However, this does not always occur. The Ops team are also busy managing and checking a variety of things like scalability, what kind of traffics is coming and security check of infrastructure etc. usually in big application development happen 1 or 2 times a month. Sometimes the development team is frustrated that everything has been done but the operations team has not yet deployed their feature to production.

Solution

The DevOps mindset provides a solution to this issue. In DevOps, the Dev and Ops teams discuss everything side by side like one team and sometimes switch roles and responsibilities to ensure that everyone on the Dev team is aware of what is happening in the operation and that the Ops team is aware of how things actually function on the development side as well.

This exact mindset that ensures that everyone is aware of everything that is occurring on both the development and operation sides is known as DevOps.

Benefits of DevOps

Faster delivery of software

Teams can use automated technologies to create, test, and deploy software through continuous delivery.

Better collaboration between teams

The foundation of DevOps is a culture of collaboration between developers and operations teams, which helps reduce conflicts and improve communication.

Rapid development

The team quickly enhances the product by releasing new updates and bug fixes by increasing the frequency of releases.

Quality and reliability

By using continuous integration and continuous delivery to test that each change is functional and safe. Monitoring and logging help the team keep informed of performance in real time.