DEV Community: Vaibhav Singh

Real-Time Notifications in a MERN App — explained like texting your nerd bestie

Vaibhav Singh — Fri, 15 Aug 2025 21:07:05 +0000

You want that sweet little bell to light up the moment payments, bookings, or admin broadcasts happen — and you want the list to still be there after refresh. This guide takes you from nothing to a working MERN stack with:

Socket.IO for instant in‑app updates
MongoDB for persistence (history + unread)
REST endpoints to fetch + mark read
React hook + UI to display the dropdown

Let’s ship. 🚀

🧭 What we’re building

Two lanes make notifications feel “right”:

Realtime lane → server emits Socket.IO events to the right users/roles.
Persistence lane → server stores notifications in Mongo so they survive refresh/offline.

The client:

fetches last 50 notifications on mount,
listens for socket events and prepends new ones,
marks an item as read when clicked.

Result: real-time + durable notifications.

📦 Prereqs

Node 18+
npm or pnpm
A MongoDB connection (local or Atlas).

I’ll assume mongodb://localhost:27017/mern_notify locally.

🗂️ Project layout

We’ll create two folders:

mern-realtime-notify/
  server/
  client/

🛠️ Server (Express + Socket.IO + Mongo)

1) Init + install

mkdir -p mern-realtime-notify/server && cd mern-realtime-notify/server
npm init -y
npm i express cors dotenv mongoose socket.io jsonwebtoken bcrypt
npm i -D nodemon

Add scripts to package.json:

{
  "name": "server",
  "type": "module",
  "scripts": {
    "dev": "nodemon server.js"
  }
}

Create .env:

PORT=5000
MONGO_URI=mongodb://localhost:27017/mern_notify
JWT_SECRET=dev_super_secret_change_me
CORS_ORIGINS=http://localhost:5173

2) Basic server with Socket.IO auth

server.js

import express from 'express'
import cors from 'cors'
import dotenv from 'dotenv'
import mongoose from 'mongoose'
import { createServer } from 'http'
import { Server } from 'socket.io'
import jwt from 'jsonwebtoken'

dotenv.config()

const app = express()
const server = createServer(app)

const allowed = (process.env.CORS_ORIGINS || '').split(',').filter(Boolean)
const io = new Server(server, {
  cors: {
    origin: allowed.length ? allowed : '*',
    credentials: true,
  },
  transports: ['websocket', 'polling'],
})

app.use(cors({ origin: allowed.length ? allowed : '*', credentials: true }))
app.use(express.json())

// connect mongo
await mongoose.connect(process.env.MONGO_URI)
console.log('Mongo connected')

// ===== MODELS =====
import Notification from './src/models/Notification.js'
import User from './src/models/User.js'

// ===== ROUTES =====
import authRouter from './src/routes/auth.js'
import notifRouter from './src/routes/notifications.js'

// expose io to routes
app.use((req, _res, next) => { req.io = io; next() })

app.use('/api/auth', authRouter)
app.use('/api/notifications', notifRouter)

app.get('/api/health', (_req, res) => res.json({ ok: true }))

// ===== SOCKET AUTH =====
io.use(async (socket, next) => {
  try {
    const token = socket.handshake.auth?.token
    if (!token) return next(new Error('Missing token'))
    const decoded = jwt.verify(token, process.env.JWT_SECRET)
    const user = await User.findById(decoded.userId).select('-password')
    if (!user) return next(new Error('User not found'))
    socket.user = user
    next()
  } catch (e) {
    next(new Error('Auth failed: ' + e.message))
  }
})

io.on('connection', (socket) => {
  const user = socket.user
  const userRoom = `user_${user._id}`
  const roleRoom = `role_${user.role}`
  socket.join(userRoom)
  socket.join(roleRoom)
  console.log(`Socket connected: ${user.email} -> rooms: ${userRoom}, ${roleRoom}`)

  socket.on('disconnect', (reason) => {
    console.log('Socket disconnected', reason)
  })
})

const PORT = process.env.PORT || 5000
server.listen(PORT, () => console.log(`Server listening on ${PORT}`))

3) Models

src/models/User.js (super minimal; don’t use in prod without tweaks)

import mongoose from 'mongoose'
import bcrypt from 'bcrypt'

const userSchema = new mongoose.Schema({
  email: { type: String, unique: true },
  password: String,
  role: { type: String, default: 'patient' } // 'patient' | 'doctor' | 'admin'
})

userSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next()
  this.password = await bcrypt.hash(this.password, 10)
  next()
})

userSchema.methods.compare = function(pw) { return bcrypt.compare(pw, this.password) }

export default mongoose.model('User', userSchema)

src/models/Notification.js

import mongoose from 'mongoose'

const notificationSchema = new mongoose.Schema(
  {
    userId: { type: mongoose.Schema.Types.ObjectId, index: true },
    type: { type: String, required: true }, // e.g., 'payment_success'
    title: String,
    message: String,
    meta: Object,
    readAt: Date,
  },
  { timestamps: { createdAt: true, updatedAt: true } }
)

export default mongoose.model('Notification', notificationSchema)

4) Auth routes (login/register + JWT)

src/routes/auth.js

import express from 'express'
import jwt from 'jsonwebtoken'
import User from '../models/User.js'

const router = express.Router()

router.post('/register', async (req, res) => {
  const { email, password, role = 'patient' } = req.body
  const exists = await User.findOne({ email })
  if (exists) return res.status(400).json({ success: false, message: 'Email in use' })
  const user = await User.create({ email, password, role })
  res.json({ success: true, user: { id: user._id, email: user.email, role: user.role } })
})

router.post('/login', async (req, res) => {
  const { email, password } = req.body
  const user = await User.findOne({ email })
  if (!user || !(await user.compare(password))) {
    return res.status(401).json({ success: false, message: 'Invalid credentials' })
  }
  const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' })
  res.json({ success: true, token, user: { id: user._id, email: user.email, role: user.role } })
})

export default router

5) Notifications routes (fetch + markRead + test)

src/routes/notifications.js

import express from 'express'
import jwt from 'jsonwebtoken'
import Notification from '../models/Notification.js'

const router = express.Router()

// simple auth middleware reading Bearer token
function authenticate(req, res, next) {
  try {
    const h = req.headers.authorization || ''
    const token = h.startsWith('Bearer ') ? h.slice(7) : null
    if (!token) return res.status(401).json({ success: false, message: 'No token' })
    const decoded = jwt.verify(token, process.env.JWT_SECRET)
    req.user = { _id: decoded.userId }
    next()
  } catch (e) {
    res.status(401).json({ success: false, message: 'Invalid token' })
  }
}

// GET: latest 50
router.get('/', authenticate, async (req, res) => {
  const list = await Notification.find({ userId: req.user._id }).sort({ createdAt: -1 }).limit(50).lean()
  res.json({ success: true, notifications: list })
})

// POST: mark read
router.post('/read', authenticate, async (req, res) => {
  const { id } = req.body
  await Notification.updateOne({ _id: id, userId: req.user._id }, { $set: { readAt: new Date() } })
  res.json({ success: true })
})

// POST: test -> store + emit
router.post('/test', authenticate, async (req, res) => {
  const { message = 'This is a test', type = 'info', title = 'Test notification' } = req.body
  const doc = await Notification.create({ userId: req.user._id, type, title, message })
  req.io.to(`user_${req.user._id}`).emit('notification', {
    _id: doc._id, type, title, message, createdAt: doc.createdAt, readAt: null
  })
  res.json({ success: true })
})

export default router

Start the server:

npm run dev

🎨 Client (React + Vite)

1) Init + install

cd ../
npm create vite@latest client -- --template react
cd client
npm i socket.io-client axios react-hot-toast

Add .env (Vite expects VITE_ prefix):

VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

2) Minimal API helper

src/lib/api.js

import axios from 'axios'
const api = axios.create({ baseURL: import.meta.env.VITE_API_URL })
export function setAuth(token) {
  api.defaults.headers.common['Authorization'] = token ? `Bearer ${token}` : undefined
}
export default api

3) Auth context (store token + user)

src/contexts/AuthContext.jsx

import { createContext, useContext, useState } from 'react'
import api, { setAuth } from '../lib/api'

const AuthCtx = createContext(null)
export const useAuth = () => useContext(AuthCtx)

export default function AuthProvider({ children }) {
  const [user, setUser] = useState(null)
  const [token, setToken] = useState(null)

  const login = async (email, password) => {
    const res = await api.post('/auth/login', { email, password })
    if (res.data.success) {
      setToken(res.data.token)
      setAuth(res.data.token)
      setUser(res.data.user)
    }
    return res.data
  }

  const register = async (email, password, role='patient') => {
    const res = await api.post('/auth/register', { email, password, role })
    return res.data
  }

  const logout = () => {
    setToken(null); setUser(null); setAuth(null)
  }

  return (
    <AuthCtx.Provider value={{ user, token, login, register, logout }}>
      {children}
    </AuthCtx.Provider>
  )
}

4) Socket context (auth handshake)

src/contexts/SocketContext.jsx

import { createContext, useContext, useEffect, useRef, useState } from 'react'
import { io } from 'socket.io-client'
import { useAuth } from './AuthContext'

const SocketCtx = createContext(null)
export const useSocket = () => useContext(SocketCtx)

export default function SocketProvider({ children }) {
  const { token } = useAuth()
  const [isConnected, setIsConnected] = useState(false)
  const socketRef = useRef(null)

  useEffect(() => {
    if (!token) return
    const socket = io(import.meta.env.VITE_SOCKET_URL, {
      auth: { token },
      transports: ['websocket', 'polling'],
    })
    socketRef.current = socket
    socket.on('connect', () => setIsConnected(true))
    socket.on('disconnect', () => setIsConnected(false))
    return () => socket.disconnect()
  }, [token])

  return (
    <SocketCtx.Provider value={{ socket: socketRef.current, isConnected }}>
      {children}
    </SocketCtx.Provider>
  )
}

5) Notifications hook (fetch + live + markRead)

src/hooks/useNotifications.js

import { useEffect, useMemo, useState } from 'react'
import api from '../lib/api'
import { useSocket } from '../contexts/SocketContext'

const EVENTS = [
  'notification', // generic catch-all we emit in /notifications/test
  // add more if your server emits: 'payment_success', 'new_appointment', etc.
]

export function useNotifications() {
  const { socket } = useSocket()
  const [items, setItems] = useState([])

  useEffect(() => {
    let dead = false
    ;(async () => {
      try {
        const res = await api.get('/notifications')
        if (!dead && res.data?.success) setItems(res.data.notifications)
      } catch {}
    })()
    return () => { dead = true }
  }, [])

  useEffect(() => {
    if (!socket) return
    const on = (type) => (p) => setItems(prev => [normalize(type, p), ...prev])
    EVENTS.forEach(evt => socket.on(evt, on(evt)))
    return () => { EVENTS.forEach(evt => socket.off(evt)) }
  }, [socket])

  const unreadCount = useMemo(() => items.filter(n => !n.readAt).length, [items])

  const markRead = async (id) => {
    setItems(prev => prev.map(n => (n._id === id ? { ...n, readAt: new Date().toISOString() } : n)))
    try { await api.post('/notifications/read', { id }) } catch {}
  }

  return { items, unreadCount, markRead }
}

function normalize(type, p) {
  return {
    _id: p._id || (Math.random().toString(36).slice(2) + Date.now().toString(36)),
    type,
    title: p.title || 'Notification',
    message: p.message || '',
    createdAt: p.createdAt || p.timestamp || new Date().toISOString(),
    readAt: p.readAt || null,
    ...p,
  }
}

6) Tiny UI (login + bell)

src/App.jsx

import { useState } from 'react'
import AuthProvider, { useAuth } from './contexts/AuthContext'
import SocketProvider from './contexts/SocketContext'
import { useNotifications } from './hooks/useNotifications'

function Login() {
  const { login, register } = useAuth()
  const [email, setEmail] = useState('demo@example.com')
  const [password, setPassword] = useState('secret')

  return (
    <div style={{ display:'flex', gap: 8, marginBottom: 16 }}>
      <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="email" />
      <input value={password} onChange={e=>setPassword(e.target.value)} placeholder="password" type="password" />
      <button onClick={() => register(email, password)}>Register</button>
      <button onClick={() => login(email, password)}>Login</button>
    </div>
  )
}

function Bell() {
  const { items, unreadCount, markRead } = useNotifications()
  return (
    <div>
      <button>🔔 {unreadCount > 0 ? `(${unreadCount})` : ''}</button>
      <div style={{ border:'1px solid #ddd', padding: 8, width: 360, marginTop: 8 }}>
        {items.map(n => (
          <div key={n._id} onClick={()=>markRead(n._id)} style={{ padding: 8, borderBottom:'1px solid #eee', cursor:'pointer' }}>
            <div style={{ fontWeight:'bold' }}>{n.title}</div>
            <div style={{ fontSize: 12, opacity:.7 }}>{new Date(n.createdAt).toLocaleString()}</div>
            {n.message && <div style={{ fontSize: 13, marginTop: 4 }}>{n.message}</div>}
          </div>
        ))}
      </div>
    </div>
  )
}

export default function App() {
  return (
    <AuthProvider>
      <SocketProvider>
        <div style={{ padding: 24, fontFamily: 'sans-serif' }}>
          <h1>MERN Real-time Notifications</h1>
          <Login />
          <Bell />
        </div>
      </SocketProvider>
    </AuthProvider>
  )
}

Run the client:

npm run dev

Open http://localhost:5173/. Register, then login.

🧪 Test it (Does it ding?)

With the client logged in, hit the test endpoint from a terminal:

curl -X POST http://localhost:5000/api/notifications/test \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_JWT_HERE" \
  -d '{"message":"Hello from test!","type":"info"}'

You should see a new row appear under the bell instantly. Click it → it’s marked read. Refresh → it’s still there. ✅

🧯 Common gotchas

CORS: Allow your client origin on both Express and Socket.IO CORS.
Auth handshake: Send auth: { token } when connecting the socket (we did).
Cleanup: Always off() socket listeners on unmount (the hook does).
Reverse proxy: Enable WebSocket upgrades on Nginx/Cloudflare/etc.
Security: On mark-read, always filter by { _id, userId } (we do).

🧰 Extras (when you want more)

Role broadcasts: Server joins users to role_admin, role_doctor, role_patient. Emit to a role room.
Scheduled reminders: Add Redis + BullMQ → schedule “appointment in 1h” jobs, emit at the right time.
Web Push/FCM: For OS-level notifications when the tab is closed.
Hosted websockets: Pusher/Ably/PubNub if you don’t want to run Socket.IO infra.
Emails/SMS: SendGrid/SES and Twilio for critical backups.

🏁 Recap

Mongo stores notifications.
Socket.IO delivers them in real-time.
React hook keeps UI in sync and handles “mark read”.

This pattern is tiny, fast, and rock-solid. You can paste it into any MERN app and be “the person who made the bell work” by lunch. 🔔✨

Build an AI-Powered Dashboard Generator Using Gemini Pro Vision and Python

Vaibhav Singh — Mon, 16 Jun 2025 16:30:28 +0000

What if you could automatically generate dashboards from your database using AI—with zero manual SQL or chart-building? In this post, I’ll walk you through building an AI-powered dashboard generator using Python, Plotly Dash, and Google’s Gemini Pro Vision model.

🧠 What We're Building
An interactive web app that connects to your database, analyzes your schema and data, and generates smart, AI-driven visualizations with explanations — no manual configuration needed.

🔍 Features
🔎 Automatic Schema & Data Analysis
Gemini detects column types, relationships, and sample data.

📊 Smart Visualization Suggestions
The AI recommends charts like bar, line, scatter, pie, and histogram based on data patterns.

🧠 Aggregations Made Easy
Auto-handling of sum, avg, count, min, max, grouped intelligently.

💅 Modern UI with Plotly Dash
Responsive layout, interactive graphs, real-time updates, and a smooth user experience.

📦 Technologies Used
Python 3.8+

Dash by Plotly

Google Generative AI SDK

SQLAlchemy (for database connections)

Gemini Pro Vision (gemini-1.5-flash or gemini-1.5-pro)

🔧 Setup Instructions

Clone the Repo & Install Requirements

git clone https://github.com/yourname/ai-dashboard-generator cd ai-dashboard-generator pip install -r requirements.txt

Create a .env File Add your database credentials and Gemini API key:

For SQLite

DB_TYPE=sqlite DB_NAME=your_database.db GOOGLE_API_KEY=your_gemini_api_key

PostgreSQL/MySQL config:

DB_TYPE=postgresql DB_HOST=localhost DB_PORT=5432 DB_NAME=your_database DB_USER=your_username DB_PASSWORD=your_password GOOGLE_API_KEY=your_gemini_api_key

Run the App

python main.py

Then open your browser:
👉 http://localhost:8050

🔑 Getting a Gemini API Key (FREE)
Go to Google AI Studio

Click "Create API Key"

Copy and paste it into your .env

✅ Free Tier:
60 requests/minute, 1M characters/month, no credit card required.

📊 How It Works
Step 1: Schema Analysis
The app introspects your database using SQLAlchemy, identifying:

All tables

Column names & data types

Potential categorical/numeric/date fields

self.metadata.reflect(bind=self.engine)
self.inspector.get_columns(table_name)

Step 2: Prompt Gemini for Chart Suggestions
Gemini receives a structured prompt like:

Analyze this database table and suggest the best visualizations:
Table: users
Columns: ['id', 'age', 'signup_date']
...
It replies with JSON-like objects:

{ "type": "bar", "x": "signup_date", "y": "count", "title": "User Signups Over Time", "explanation": "Bar chart to show user signups grouped by date." }
Step 3: Visualization with Plotly
The app uses plotly.express to build each visualization dynamically:

fig = px.bar(df_grouped, x='signup_date', y='count', title='User Signups Over Time')

You get interactive zooming, panning, tooltips, and more.

🖼️ Supported Visualizations
📊 Bar Charts

📈 Line Charts

🔵 Scatter Plots

🥧 Pie Charts

📉 Histograms

Each chart includes an explanation of why it was suggested — all powered by Gemini.

🧪 Demo Use Case

Imagine a sales table like this:

date    region  revenue
2024-01-01  East    1000
2024-01-02  West    850

The AI might generate:

A line chart: revenue over time

A bar chart: total revenue by region

A pie chart: revenue share by region

All of that, with zero manual chart coding.

🧠 Why Use Gemini?
Traditional BI tools require manual chart design. Gemini understands natural data patterns and recommends visualizations that:

Highlight trends

Aggregate meaningfully

Require no human SQL

It acts like a data analyst who just knows what to show.

🔓 License
MIT – free to use, modify, and build on.

📈 Future Ideas
Export charts to PNG/PDF

Embed dashboards in other apps

Natural language question support ("Show me revenue by month")

Row-level filtering

🌐 Conclusion
With just a Gemini API key and a database, you can now build AI-powered dashboards in minutes. Whether you're building for internal analytics, client reporting, or automating BI, this setup gives you insight on autopilot.

Ready to turn your data into decisions?
Clone the repo and let Gemini do the heavy lifting.
GitHub Link - https://github.com/v0nser/ai-dashboard-generator

Introducing Route Guard: A Flexible API Validation Module for Node.js 🚀

Vaibhav Singh — Sun, 01 Dec 2024 15:25:50 +0000

In today's world of web development, APIs are the backbone of communication between services. Ensuring the validity and security of incoming requests is crucial to maintain robust and secure applications. That’s where Route Guard, a lightweight and powerful Node.js module, steps in to simplify API validation.

🌟 What is Route Guard?
Route Guard is a Node.js library designed to validate API requests effortlessly. It helps developers enforce strict validation rules for headers, body fields, data types, and required parameters. Whether you're working on a small project or scaling up, Route Guard ensures your APIs are secure and well-structured.

🔑 Key Features
Flexible Validation Rules: Easily define validation rules for headers and body fields.
Required Fields & Type Checking: Enforce the presence of required fields and validate data types.
Enumerated Values: Limit values to predefined options (e.g., roles like 'admin', 'user').
Detailed Error Reporting: Get precise error messages when validation fails, helping with debugging and user feedback.

🚀 Installation
Getting started with Route Guard is simple:

npm install routeguard

📚 How to Use Route Guard

Define Your Validation Rules Create a validationRules.js file and specify the rules for each API route:

module.exports = { '/api/users': { headers: { 'api-key': { required: true, type: 'string' }, // API key validation }, body: { username: { required: true, type: 'string' }, // Ensure username is a string email: { required: true, type: 'string' }, // Email validation role: { required: true, type: 'string', enum: ['user', 'admin'] }, // Role validation }, }, };

Integrate Route Guard in Your Application Use the RouteValidator class to validate incoming requests:

`const RouteValidator = require('routeguard');
const rules = require('./validationRules');

const validator = new RouteValidator(rules);

// Sample Express route
app.post('/api/users', (req, res) => {
const result = validator.validate('/api/users', req);

if (result.isValid) {
res.status(200).send({ message: 'User created successfully!' });
} else {
res.status(400).send({ errors: result.errors });
}
});`

🌐 Example API Requests

✅ Valid Request:
curl -X POST http://localhost:3000/api/users \ -H "Content-Type: application/json" \ -H "api-key: valid-api-key" \ -d '{"username": "john_doe", "email": "john@example.com", "role": "admin"}'

❌ Invalid Request (Missing API Key):
curl -X POST http://localhost:3000/api/users \ -H "Content-Type: application/json" \ -d '{"username": "john_doe", "email": "john@example.com", "role": "admin"}'

📋 Error Response:
{ "errors": [ { "field": "headers.api-key", "message": "api-key is required in headers." } ] }

🔬 Testing with Jest
Route Guard supports easy testing using Jest. Run the test suite with:

npm test

Sample Output:

PASS tests/routeguard.test.js ✓ should reject missing required header (20 ms) ✓ should reject invalid role values (15 ms) ✓ should accept valid request (10 ms)

🤝 Contribute to Open Source
We welcome contributions! If you’d like to improve Route Guard or suggest new features, feel free to:

Star the repo:
GitHub: https://github.com/v0nser/routeguard
Submit an issue or pull request: Contributions are welcome!

📜 Conclusion
Route Guard is a simple yet powerful tool that adds an extra layer of security to your APIs. By validating headers and body fields with customizable rules, you can ensure that your API endpoints are robust, secure, and reliable.

Start building more secure APIs today with Route Guard!

Links:

NPM: https://www.npmjs.com/package/routeguard
GitHub: https://github.com/v0nser/routeguard

What are your thoughts? Let us know how Route Guard has helped you build better APIs in the comments below!

Peer-to-peer (P2P) protocol

Vaibhav Singh — Mon, 22 Jul 2024 08:53:08 +0000

All of you might have heard of BitTorrent. I think this is the best example to explain the peer-to-peer network protocol.

BitTorrent is a Peer-to-Peer (P2P) protocol designed for distributing large amounts of data over the internet. Traditional downloads often rely on a single server, which can fail or corrupt files. BitTorrent, however, simplifies this issue through its decentralized approach, enhancing both speed and reliability.

In a BitTorrent network, users (peers) share pieces of files, known as packets, with each other instead of depending on a central server. This decentralization allows for different parts of a file to be downloaded from multiple sources simultaneously, making the process faster and more efficient.

To download a file using BitTorrent, a user first obtains a small file called a torrent file. This torrent file contains information about the desired file and the trackers that coordinate the file distribution. Once the torrent file is opened in a BitTorrent client, the user connects to the network to begin downloading and uploading file pieces.

The more users participating, the faster the download becomes, as each user contributes to the file's distribution. This collaborative sharing of resources is a key feature of P2P protocols like BitTorrent, making them efficient for distributing large files to a wide audience.

Dividing equal columns in the webpage.

Vaibhav Singh — Mon, 22 Jan 2024 13:31:51 +0000

Designing a webpage or document with a clean and organized layout is essential for a positive user experience. One effective way to achieve this is by utilizing three columns to structure your content. In this article, we will explore how to create three columns and center the contents within them, providing a visually appealing and balanced presentation.

HTML Structure

To begin, let's set up the basic HTML structure for our three columns. We'll use the HTML5 semantic tags for better clarity and structure. Here's a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Columns Layout</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to your external stylesheet -->
</head>
<body>
    <div class="container">
        <div class="column"> 
            Col1
        </div>
        <div class="column">
            Col2
        </div>
        <div class="column">
            Col3
        </div>
    </div>
</body>
</html>

Now, let's style our columns and center the contents within them using CSS. Create an external stylesheet (styles.css) and link it in the HTML file:

css

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.column {
    flex: 1;
    text-align: center;
}

Explanation:

-> The display: flex; property on the container turns it into a flex container.
-> justify-content: space-between; ensures that the columns are evenly distributed with space between them.
-> The flex: 1; property on each column allows them to take equal space within the container.
-> text-align: center; centers the content inside each column.

Conclusion:
Creating a three-column layout and centering the contents is a fundamental skill in web design. By following this simple guide, you can achieve a clean and balanced design for your web pages or documents, enhancing the overall user experience. Remember to customize the styling to match your specific design preferences and project requirements.

Here the sample for it
https://codepen.io/vonser/pen/PoLjgXe