DEV Community: Harsh Bhardwaj

Pitch v1

Harsh Bhardwaj — Sun, 07 Sep 2025 17:24:11 +0000

JANMARG - 3-Minute Smart India Hackathon Pitch

Opening Hook (0-30 seconds)

[Walk up confidently, make eye contact with judges, smile naturally]

"Good morning, judges. Quick question—how many of you have a pothole on your daily route that you've basically become friends with?"

[Pause for any chuckles or nods]

"I have one. I call him 'Deepak.' Every day, I dodge Deepak, and every day I think—why is he still here after six months? That frustration? That gap between seeing problems and getting them solved? That's exactly what we're here to fix today."

The Solution (30-75 seconds)

[Gesture with open hands, speak with conviction]

"We are Team Strategic Minds, and we've built JANMARG—the Jan Accessible Network for Mobilization, Accountability, Reform, and Governance."

[Brief pause, let the name register]

"Here's how simple it is: You see a broken streetlight, garbage pile, or yes—a pothole like Deepak. You open our app, snap a photo, and hit submit. Your phone's GPS automatically tags the location. That report goes straight to the right government department. Three taps, and you're done."

"But here's the thing—we've all seen complaint apps before, right? Most become digital black holes. So how is JANMARG different?"

The Magic (75-140 seconds)

[Get more animated, use hand gestures to illustrate points]

"Three game-changers. First, we have an AI 'Spam Buster' that filters duplicate reports automatically. Sorry, you can't report Deepak 200 times in one day."

[Quick smile]

"Second, we give government officials superpowers. They get a live dashboard—imagine Google Maps, but showing problem hotspots across the city. They can see exactly where to deploy resources most effectively."

"And third—this is my favorite part—radical transparency. Every complaint gets tracked like a package delivery. Pending, In Progress, Resolved. But here's the kicker: when a contractor says 'job done,' they can't just check a box. They must upload photo proof. And then the community votes on whether it's actually fixed!"

[Lean forward slightly]

"No more 'repaired' streetlights that are still dark at night."

Addressing Concerns (140-170 seconds)

[Shift to a more conversational tone, as if anticipating questions]

"Now, I know what you're thinking. 'What about fake reports?' Our AI plus community verification handles that. 'Will people actually use it?' We've gamified civic engagement—leaderboards, community recognition. Make it rewarding, not a chore."

"'What about rural areas with poor connectivity?' The app works offline. It saves reports and syncs automatically when you get signal."

"This isn't theoretical. Similar systems in other regions have shown that citizens are absolutely ready to engage—they just need the right tool."

The Impact (170-180 seconds)

[Build to crescendo, speak with passion]

"Look, JANMARG isn't just about fixing Deepak the pothole. It saves government money by catching small problems before they become massive, expensive ones. But more importantly, it rebuilds something we desperately need: trust."

[Make eye contact with each judge]

"We're not just building an app. We're building a transparent bridge between citizens and government. We are Strategic Minds, and with JANMARG, we're paving the way for a more accountable India."

[Confident smile]

"Thank you."

Delivery Tips:

Timing: Practice with a timer—aim for 2:45 to leave room for natural pauses
Energy: Start warm and conversational, build energy through the middle, end with conviction
Eye Contact: Rotate between judges, don't focus on just one
Gestures: Use natural hand movements to illustrate points (phone tapping, dashboard viewing)
Pause Power: Use brief pauses after key points like "JANMARG" and "radical transparency"
Voice: Vary your pace—slow down for important names/concepts, speed up slightly during explanations
Recovery: If you stumble, just keep going smoothly—judges won't notice minor slips

What the heck is IAM in AWS

Harsh Bhardwaj — Tue, 12 Aug 2025 09:50:09 +0000

Day 01: Securing Our Cloud Sandbox

Hey folks, let's dive right into this securing your cloud setup isn't just some checkbox exercise; it's the foundation that keeps your experiments from turning into expensive nightmares.
I'm talking about starting with AWS or similar clouds here, since that's the sandbox we're playing in. We'll break it down step by step, from the basics of why the root user is a ticking bomb to setting up IAM like a pro in a real org.

The Single Biggest Security Risk: The Root User

Alright, straight up: the root user in your cloud account is like handing someone the keys to your entire house, car, and bank vault all at once. When you first sign up for AWS (or most clouds), you get this all-powerful root account. It can do everything : create resources, delete them, change billing, you name it. No restrictions.

Why is this the biggest risk? Because if hackers get in through a phishing email, a weak password, or some sneaky malware they own your world. We're not talking minor glitches; we're talking racking up thousands in bills on crypto mining or wiping your data clean.
If u still think am bluffing https://www.reddit.com/r/kubernetes/comments/1mjstib/got_crypto_mined_for_3_weeks_and_had_no_clue/
Things like this could happen in AWS very easily.

Basics: The root user isn't meant for daily use. It's like the emergency glass you break only when absolutely necessary. Use it to set up initial security, then lock it away.
Pro tip: Enable MFA on it immediately (more on that next) and create IAM users for everything else. This principle of least privilege? It's not buzzword BS : it's why breaches stay contained instead of cascading into chaos.

Setting Up Multi-Factor Authentication (MFA)

Basics: It adds a second factor, like a code from your phone app (Google Authenticator or Authy), a hardware key, or even biometrics. In AWS, head to your account settings, find the IAM dashboard, and enable it for the root user first.
Why bother? Passwords suck they're guessable, reusable, and phishable. MFA makes it exponentially harder for attackers; even if they snag your creds no need to explain further.

Why This Matters: A Tale of Compromised Access

Picture this: You're a dev experimenting in the cloud, root user logged in because "it's just a sandbox." Boom a phishing link slips through, credentials stolen. Next thing, attackers spin up hundreds of EC2 instances mining Bitcoin on your dime. Bill? $50K overnight. This isn't hypotheticals; it's straight from real breaches like the Code Spaces wipeout in 2014, where lack of MFA let hackers delete everything.

Why explain the tale? Because security feels abstract until it bites. Compromised access isn't rare reports from places like Verizon's DBIR show creds are involved in 80%+ of breaches. MFA cuts that risk by 99%, per Microsoft stats. It's not overkill; it's the difference between a minor hiccup and rebuilding from scratch. Learn from others' pain – secure now, sleep better.

How IAM Works in Organizations

IAM – Identity and Access Management is the gatekeeper system in clouds like AWS. Basics: It's how you control who does what. No more "everyone has root" chaos; instead, you define users, groups, roles, and policies to grant precise permissions.

Why does it matter in orgs? Scale. In a solo setup, maybe you wing it, but in teams? It's essential to avoid "Bob from marketing accidentally deletes the prod database." IAM ensures compliance, audits, and minimizes blast radius if something goes wrong. It's built on JSON policies human-readable rules like "allow read on S3 buckets but deny delete."

What is IAM? Users, Groups, and All That Adding Permissions and Access to Tech

Let's unpack IAM without the fluff. At its core, IAM manages identities (who you are) and access (what you can do).

Users: These are individual accounts for people or apps. Each gets unique credentials (access keys for programmatic stuff, passwords for console). Basics: Create a user for yourself post-root setup. Why? Root is too powerful; users start with zero permissions, so you add only what's needed.
Groups: Collections of users. Instead of assigning policies to each person, dump 'em in a group. Example: "Devs" group gets EC2 access; "Admins" gets more.
Roles: Temporary permissions for services or users. Like, an EC2 instance assumes a role to access S3 without hardcoding keys. Why? Security – keys rotate, no long-term creds floating around.
Policies: The rules. Managed (AWS-prebuilt) or custom JSON. They attach to users/groups/roles, saying "allow/deny actions on resources." Example: {"Effect": "Allow", "Action": "s3:ListBucket", "Resource": "*"} – list any S3 bucket.

Adding permissions: Attach policies via console or CLI. Access to tech? IAM integrates everywhere – S3, EC2, Lambda. Why from basics? Misconfigured IAM is a top breach vector (hello, Capital One 2019). Don't grant wildcards like "*" unless you want risks; specify resources.

Whatever the hell else is there? Permissions boundaries for extra guardrails, federated logins for SSO (think Google Workspace integration), and tags for organizing. It's flexible but demands thought – over-permissive? Risk. Too tight? Productivity killer.

How It Plays Out in an Organization: Examples with Teams, Groups, and Tool Access to Limit Risks

In a real org, IAM isn't theory; it's how you segment chaos. Say you're at a mid-size tech firm with dev, ops, and finance teams.

Setup: Root user creates IAM users for everyone. No one logs in as root after day one.
Groups in Action: Dev team joins "Developers" group. Attach a policy allowing EC2 start/stop, S3 read/write (but only to dev buckets), and Lambda invoke. Ops team? "Operations" group with monitoring tools like CloudWatch full access, but no resource creation to prevent sprawl.
Example Scenario: New hire Alice (dev) gets added to "Developers." She can deploy code to test environments but can't touch prod policy denies it. Bob in finance? "Finance" group with billing read-only. If Alice tries prod access? Denied. Limits risks by enforcing least privilege.
Roles for Services: Your app on EC2 assumes an "AppRole" to write to DynamoDB. No user keys needed; rotates automatically. Why? If compromised, damage is scoped to that role.
Risk Mitigation: Audits via CloudTrail log everything. Example: Marketing team wants social media tools? Group with API access to specific services, nothing else. Breach in marketing? Doesn't spread to core infra.

This plays out daily – reduces insider threats, complies with regs like GDPR, and scales. Why explain with examples? Because seeing it in action clicks: It's not just tech; it's org hygiene that prevents "one bad apple" scenarios.

Staying in the Free Tier: Setting a Zero-Dollar Billing Alert

Clouds lure you with free tiers, but overshoot and ouch – bills spike. Basics: AWS free tier covers basics like 750 hours of t2.micro EC2 monthly. To stay safe, set billing alerts.

How: In AWS console, go to Billing > Budgets. Create a zero-dollar budget alert – notify if costs hit $0.01. Why zero? Catches any slip immediately, like forgetting to shut down an instance. Use CloudWatch alarms too for usage metrics.

Why matters: Free tier is great for sandboxes, but "always free" has limits. Alerts email/SNS you, preventing surprises. Pro move: Tag resources for cost allocation. It's quick setup, huge peace of mind.

This isn't set-it-and-forget-it; review policies as you grow. Security's a habit, not a chore. Questions? Hit me up let's keep building securely. On to Day 02!

You have been implementing AI the wrong way !

Harsh Bhardwaj — Thu, 19 Jun 2025 06:43:42 +0000

Hey there, fellow tech explorers! I’m just a student diving into the wild world of AI 🧙‍♂️ I recently stumbled upon Direct API Usage, Retrieval-Augmented Generation (RAG), and Fine-Tuning, and I’m here to spill the tea on what they are, how they’re different, and when to use them. Buckle up, it’s gonna be a fun ride!

1. Direct API Usage: The Instant Noodle of AI

What’s This All About?

Okay, so Direct API Usage is like grabbing a pre-cooked AI meal (think Grok 3 or ChatGPT) and just adding hot water—aka a prompt! You send a question or task to an AI model through an API, and poof, it gives you an answer. No cooking, no fuss, just instant results!

Why It’s Cool

Super Easy: Just get an API key, write a prompt, and you’re good to go!
No Prep Needed: No data, no training, just vibes.
Fast AF: You can have it running in, like, 10 minutes.

My Example

I used Grok 3’s API to write a catchy tagline for my fake sneaker store. My prompt was, “Give me a cool 10-word tagline for a sneaker brand.” Boom, it spat out: “Step bold, rock the streets with epic sneaker feats!” 😎

2. RAG: The Library Nerd of AI 📚

What’s the Deal?

RAG is like having a super-smart librarian who grabs the exact book you need and then writes a perfect summary. It mixes a retrieval system (grabbing info from a database) with a generative AI (like Grok 3) to give answers that are on point with specific info.

Why It’s Awesome

No Training Drama: You don’t mess with the AI’s brain; just feed it docs.
Knows Your Stuff: Perfect for company manuals or school notes.
Fresh Info: Update your database, and RAG stays current.

My Example

I made a chatbot for my CS project that answers questions about Python using my class notes. I stored the notes in a vector database (fancy, right?), and when I asked, “How do loops work in Python?”, RAG grabbed the right section and explained it like a pro!

3. Fine-Tuning: The Custom Sneaker of AI 👟

What’s That?

Fine-Tuning is like taking a plain pair of sneakers and bedazzling them to fit your style. You take a pre-trained AI model and train it more with your own data to make it super good at one specific thing.

Why It’s Dope

Super Specific: Makes the AI a pro at your task.
High Accuracy: Perfect for when you need spot-on results.
Your Data, Your Rules: It learns your stuff.

My Example

For a school project, I fine-tuned a model to guess if my classmates’ movie reviews were positive or negative. I fed it 100 reviews I collected (labeled “yay” or “nay”), and now it’s like a movie critic genius!

Quick Peek: How They’re Different (Surface-Level Vibes)

Thing	Direct API Usage	RAG	Fine-Tuning
How Hard?	Easy peasy, just type a prompt!	Kinda tricky, need a database.	Hard, needs data and brainpower.
Time to Start?	Like, 5 mins!	A few hours to set up.	Days or weeks, ugh!
Customization?	Just prompts, no big changes.	Add your own docs for flavor.	Make the AI yours.
Data Needed?	Nada, just vibes.	A pile of docs or notes.	Labeled data (lots of it!).
Cost?	Cheap, just API calls.	Medium, need database stuff.	Pricey, needs computers and time.
What’s It For?	Quick, fun stuff like writing poems.	Answering specific Qs with your docs.	Nailing one task like a boss.

Example Time!

Direct API: I made a poem about cats with Grok 3 in seconds!
RAG: My chatbot used my notes to explain Git commands.
Fine-Tuning: My model now predicts if my prof will like my essay!

Deep Dive: What’s Really Going On?

1. How They Think

Direct API Usage: It’s like asking a know-it-all friend who might not know your topic. It uses whatever the AI learned before, so sometimes it’s a bit generic or makes stuff up.
RAG: It’s like that friend checking Google for you first. It grabs specific info from your database and uses it to answer better.
Fine-Tuning: It’s like training your friend to be an expert in one thing. The AI learns your data, but it’s not great at other stuff anymore.

2. Can They Switch It Up?

Direct API Usage: Super flexible! Change your prompt, and it’s a new game.
RAG: Pretty flexible if you update your database with new info.
Fine-Tuning: Not so much. It’s stuck on what you trained it for unless you retrain.

3. Keeping It Running

Direct API Usage: No work, the API folks handle everything. Just pay for calls.
RAG: You gotta keep your database fresh, like watering a plant.
Fine-Tuning: It’s like raising a pet—you need to check if it’s still behaving as data changes.

4. Controlling the Chaos

Direct API Usage: It’s a bit wild; bad prompts = weird answers.
RAG: More controlled since it uses your docs, but the retriever can mess up.
Fine-Tuning: Super controlled for your task, but it might overdo it and miss new stuff.

Example

Direct API: Asked Grok 3 about AI trends—got a cool but kinda general answer.
RAG: Asked about my school’s AI course, and it pulled exact lecture notes!
Fine-Tuning: My fine-tuned model nails my prof’s grading style but flops on new topics.

Oops, What Could Go Wrong?

1. Direct API Usage

Hallucinations: It might make up stuff, like saying my cat can code! 😹
Too General: Not great for super specific questions, like my homework.
Prompt Fails: If my prompt sucks, the answer’s a mess.
Wallet Pain: Lots of API calls = cha-ching!
Example: My chatbot gave a weird answer about Python’s async—not cool.

2. RAG

Bad Retrieval: Grabs the wrong doc, and I’m lost.
Old Docs: If my notes aren’t updated, it’s giving old news.
Slow Vibes: Takes a sec to fetch stuff, not instant.
Setup Struggle: Setting up a database felt like a math exam.
Example: My chatbot pulled an outdated Python version’s info—yikes!

3. Fine-Tuning

Bad Data, Bad Life: Junk data = junk AI.
Overfitting: My model memorized my data but flops on new stuff.
Expensive: Needed a beefy laptop to train it—ouch.
Drift Drama: New data messed up my model’s game.
Forgetting Stuff: My AI forgot how to do general tasks!
Example: My movie review model missed new slang like “mid.”

When to Pick What (and When to Run Away)

1. Direct API Usage

Pick It When:
- You want something quick, like a tweet or a joke.
- No data or time to mess around.
- You’re just playing around or need a fast prototype.
Run Away When:
- You need super specific answers (like for a final project).
- Accuracy is life-or-death (like medical stuff).
- You’ve got data to make it better.
Example: I used it for a quick blog idea—worked great! But for my CS homework? Nope.

2. RAG

Pick It When:
- You’ve got notes, manuals, or articles to use.
- Info changes a lot (like my prof’s slides).
- You want accurate answers without training.
Run Away When:
- No docs to pull from.
- You’re doing creative stuff like writing stories.
- You need something super specialized.
Example: Perfect for my Python Q&A bot; useless for writing a sci-fi novel.

3. Fine-Tuning

Pick It When:
- You’ve got data (like my review collection).
- You need the AI to be a pro at one thing.
- Accuracy is key, and you’ve got time.
Run Away When:
- No data or budget for training.
- Your task changes a lot.
- You need fresh, external info.
Example: Great for my review classifier; bad for summarizing new articles.

My Cheat Sheet for Choosing

Direct API: “I need it now, and it’s chill!” Ask: Can a general AI do this? Need it yesterday?
RAG: “I’ve got notes, let’s make it smart!” Ask: Got docs? Need fresh info?
Fine-Tuning: “I want a custom AI superstar!” Ask: Got data? Need it perfect?

Real Talk: My Project Experience

So, for my school’s software support bot:

Direct API: I tried Grok 3’s API with “Explain this feature.” It was fast but gave vague answers sometimes.
RAG: I used my class notes in a database, and it nailed specific feature questions—score!
Fine-Tuning: I fine-tuned a model on old support chats, and it was awesome for common questions but took forever.

Wrapping It Up

I’m still geeking out over these AI tricks! 🥳 Direct API Usage is my go-to for quick, fun stuff, but it’s like fast food—not always perfect. RAG is my study buddy, pulling answers from my notes like a champ. And Fine-Tuning? It’s like building my own Iron Man suit—hard work but so worth it for specific tasks. Pick what fits your vibe, data, and deadline, and you’ll be slaying those AI projects in no time!

Happy coding, friends! 💻

GitHub Contributions CheatSheat

Harsh Bhardwaj — Sat, 14 Jun 2025 16:30:59 +0000

GitHub Cheat Sheet for Contributions

This cheat sheet focuses on the most used Git commands and those critical for open source contributions, such as cloning, branching, committing, pushing, pulling, merging, and handling conflicts. It’s designed for efficient collaboration on GitHub, incorporating key definitions and commands for contribution workflows.

Key Definitions

Local repository: A directory on your machine containing project code and files.
Remote repository: An online version hosted on platforms like GitHub.
Cloning: Copying a repository to a new directory.
Commit: A snapshot of project changes you can revert to.
Branch: An isolated copy of the project for working without affecting the main project.
Git merge: Combining two branches.
.gitignore file: Lists files Git should not track (e.g., large data, private info).
Staging area: A cache for changes to be committed next.
Git stash: A cache for saving changes to revisit later.
Commit ID/hash: A unique identifier for a commit.
HEAD: Refers to the latest commit; HEAD~n refers to the nth previous commit (e.g., HEAD~2 is the second-to-last commit).

Cloning Repositories

Clone a repository (HTTPS recommended):

  $ git clone https://github.com/your_username/repo_name.git

Clone a specific branch:

  $ git clone -branch <branch_name> <repo_url>

Clone into a specific directory:

  $ git clone <repo_url> <dir_name>

Managing Remote Repositories

List remote repositories:

  $ git remote

Add a remote connection:

  $ git remote add <remote> <url_to_remote>

Remove a remote connection:

  $ git remote rm <remote>

Rename a remote connection:

  $ git remote rename <old_name> <new_name>

Working with Files

Add a file/directory for tracking:

  $ git add <filename_or_dir>

Add all files in current directory:

  $ git add .

Remove a file from working directory/staging:

  $ git rm <filename_or_dir>

Check repository status:

  $ git status

Commit staged changes:

  $ git commit -m "Commit message"

Stage and commit all tracked files:

  $ git add -am "Commit message"

Amend the latest commit message:

  $ git commit --amend -m "New commit message"

Stashing Changes

Stash staged/unstaged changes:

  $ git stash

Reapply and remove stash:

  $ git stash pop

Reapply and keep stash:

  $ git stash apply

Drop stash:

  $ git stash drop

Viewing Differences

Show uncommitted changes:

  $ git diff

Show differences between two commits:

  $ git diff <id_1> <id_2>

Working with Branches

List all branches (local and remote with -a):

  $ git branch
  $ git branch -a

Create a new branch (without switching):

  $ git branch <new_branch>

Switch to an existing branch:

  $ git checkout <branch>

Create and switch to a new branch:

  $ git checkout -b <new_branch>

Rename current branch:

  $ git branch -m <new_name>

Safe delete a local branch (prevents deleting unmerged changes):

  $ git branch -d <branch>

Force delete a local branch (merged or unmerged):

  $ git branch -D <branch>

Push a local branch to remote:

  $ git push <remote_repo> <branch>

Delete a remote branch:

  $ git push <remote_repo> --delete <branch>

Merging Branches

Merge a branch into main:

  $ git checkout main
  $ git merge <other_branch>

Merge with a commit message (no fast-forward):

  $ git merge --no-ff <other_branch>

Compare differences between branches:

  $ git diff <branch_1> <branch_2>

Compare a single file between branches:

  $ git diff <branch_1> <branch_2> <file>

Fetching and Pulling

Fetch all commits/branches without merging:

  $ git fetch <remote>

Fetch a specific branch:

  $ git fetch <remote> <branch>

Merge fetched changes:

  $ git merge <remote>/<branch>

Pull (fetch and merge simultaneously):

  $ git pull <remote>

Logging and Reviewing

List all commits (with author, ID, date, message):

  $ git log

List commits in one line (limit with -n, e.g., -5):

  $ git log --oneline [-n]

Log with diff information:

  $ git log --stat

Reversing Changes

Checkout older commits:

  $ git checkout <commit_id>

Undo latest commit (keep changes):

  $ git reset HEAD~1

Discard latest commit changes (no recovery):

  $ git reset --hard HEAD~1

Revert a specific commit (safe, may cause conflicts):

  $ git revert <commit_id>

Contribution Workflow Tips

Fork the repository and clone your fork (git clone <forked_repo_url>).
Create a branch for your changes (git checkout -b fix-issue-123).
Commit frequently with clear messages (git commit -m "Fix bug in X").
Pull upstream changes to avoid conflicts (git pull origin main).
Push to your fork (git push origin <branch>).
Open a PR with a clear description, referencing the issue (e.g., “Fixes #123”).
Resolve merge conflicts by editing conflicted files, staging, and committing.
Respond to feedback promptly, pushing updates to the same branch.
Follow up politely if no response after a week (e.g., “Any updates on this PR?”).
Be ethical: Respect the code of conduct, avoid spamming PRs, and prioritize quality.

Tired of receiving Database Hibernated messages? Keep Your DB Awake with Hibernot !

Harsh Bhardwaj — Sun, 25 May 2025 17:07:54 +0000

Hey there, fellow devs! I’m super excited to share something I’ve been working on. On May 24, 2025, I published my first npm package, Hibernot, and as of today (09:12 PM IST, May 25, 2025), I’m here to tell you how it can save your portfolio projects from those awkward hibernation fails. If you’re a student dev like me, this tool is gonna be your new best friend. Let’s dive in!

The Struggle is Real: Why We Need Hibernot 😓

As student developers, we’re always building cool projects to show off in our portfolios—think side gigs, hackathons, or that app you’re proud to put on your resume. We often use free-tier services like Supabase, MongoDB Atlas, NeonDB, or Langflow because, well, we’re broke, right? These services are awesome, but there’s a catch: they hibernate after inactivity.
Received one of these ?

Picture this: you’ve shared your project link with a recruiter, they click it, and… the database is asleep. The app stalls, the request fails, and by the time the DB wakes up, they’ve already closed the tab. I’ve been there—gotten those “your DB is inactive” emails way too many times. It’s frustrating, and it makes your project look unprofessional. We need a way to keep our backends awake so our apps are always ready to shine. That’s where Hibernot comes in!

What is Hibernot? A Simple, Revolutionary Dev Tool 🌟

Hibernot is a lightweight npm package I built to keep your free-tier backend services active by automatically running a function (like a DB query) after a set period of inactivity. No more sleepy databases—your app stays live, ready for anyone to check out.

Here’s why it’s a game-changer:

Useful for Devs: It ensures your portfolio projects are always responsive, especially when HR or collaborators are viewing them.
Easy Setup: You can get it running in your Express app in under 5 minutes.
Revolutionary: No more manual pings or hacky workarounds—Hibernot handles it automatically, with features like retries and hit tracking built in.

You can grab it now:

npm: npm install hibernot
GitHub: github.com/Harsh16Bhardwaj/Hibernot

How to Set Up Hibernot: It’s Crazy Simple! 🚀

Let’s set up Hibernot in a basic Express app. I’ll show you how easy it is to integrate and how it keeps your backend awake. Follow along—this takes just a few steps.

Step 1: Create a New Project

Make a new folder and initialize a Node project:

mkdir hibernot-demo
cd hibernot-demo
npm init -y

Step 2: Install Dependencies

Install Express and Hibernot:

npm install express hibernot

Step 3: Create Your Express App

Create an index.js file and add this code:

const express = require('express');
const { Hibernot } = require('hibernot');

const app = express();
const port = 3000;

// Simulate a DB query
const fetchRecords = async () => {
  return [{ id: 1, name: 'Demo Record' }];
};

// Set up Hibernot to keep the backend awake
const hibernotDB = new Hibernot({
  name: 'DemoDB',
  inactivityLimit: 10000, // 10 seconds for testing (use 300000 for 5 mins in production)
  maxRetries: 3, // Retries if the keep-alive fails
  keepAliveFn: async () => {
    const records = await fetchRecords();
    console.log('[DemoDB] Keep-alive query:', records);
  },
});

// Track API hits with Hibernot middleware
app.use('/', hibernotDB.middleware());

// Basic route to test
app.get('/', async (req, res) => {
  const records = await fetchRecords();
  res.json({
    message: 'Hibernot Demo API',
    records,
    stats: hibernotDB.getStats(),
  });
});

// Stats route to check Hibernot's status
app.get('/stats', (req, res) => {
  res.json({ demoDB: hibernotDB.getStats() });
});

app.listen(port, () => console.log(`Running on http://localhost:${port}`));

Step 4: Update package.json

Add a start script to your package.json:

{
  "scripts": {
    "start": "node index.js"
  }
}

Step 5: Run and Test

Start the app:

npm start

Hit http://localhost:3000/ (via browser or curl):

  {
    "message": "Hibernot Demo API",
    "records": [{ "id": 1, "name": "Demo Record" }],
    "stats": {
      "getCounter": 1,
      "lastAPIhit": 1745177000000,
      "name": "DemoDB"
    }
  }

Wait 10 seconds, and check the console:

  [DemoDB] Keep-alive query: [ { id: 1, name: 'Demo Record' } ]

Hit http://localhost:3000/stats to see the updated stats:

  {
    "demoDB": {
      "getCounter": 2,
      "lastAPIhit": 1745177010000,
      "name": "DemoDB"
    }
  }

That’s it! In just a few lines, Hibernot is keeping your backend awake, tracking hits, and retrying failed keep-alive attempts. You can swap fetchRecords with a real DB query (like MongoDB or Supabase) to keep your actual service active.

Why Hibernot is a Must-Have Dev Tool 🔧

Saves Your Portfolio: No more awkward fails when someone checks your project.
Minimal Setup: A few lines of code, and you’re done—no complex configs.
Dev-Friendly Features: Hit tracking, retry logic, and clear logs make debugging a breeze.
Lightweight: No heavy dependencies, just a lean solution for free-tier apps.

I built Hibernot because I’ve felt the pain of hibernation issues, and I know many of you have too. It’s a small tool, but it can make a big difference for student devs like us. Give it a try, and let me know what you think in the comments—I’d love to hear your feedback!

Happy coding! 😄

🔄 What Is a Data Pipeline (And Why You Should Care)

Harsh Bhardwaj — Thu, 08 May 2025 11:26:57 +0000

In today’s world of digital applications and real-time insights, raw data is everywhere—user interactions, third-party APIs, internal systems, logs, surveys—you name it. But raw data isn’t very useful on its own.

To make that data meaningful, actionable, and ready for use (by humans or AI), we need data pipelines.

Whether you're building an analytics dashboard, powering a chatbot, or just making sure your backend can handle user inputs and external data smoothly, data pipelines are the behind-the-scenes workhorses that make it happen.

Let’s break down exactly what a pipeline is, why it’s useful, and how you can write one correctly—with a real-life example from a legal-tech app built in Next.js.

🚰 What Is a Data Pipeline?

A data pipeline is a structured series of steps that automate the flow of data from one system to another—often involving transformation, enrichment, and storage along the way.

At its core, a pipeline does three things:

Extract – Get data from one or more sources (API, form input, DB, etc.).
Transform – Clean it, summarize it, or convert it into another format.
Load – Store the processed data into a database or system for future use.

This model is commonly known as ETL (Extract, Transform, Load).

🚀 Why Do We Need Data Pipelines?

Here’s why data pipelines are essential in any scalable or data-driven app:

Automation: Removes the need for manual intervention in repetitive tasks.
Scalability: Can handle large or growing data flows over time.
Reliability: Ensures data gets from point A to point B consistently.
Real-time Experience: Enables real-time features like chat, case tracking, live dashboards, etc.
Separation of Concerns: Each step (input, API call, transformation, save) is modular and debuggable.

Imagine a legal app that collects user case descriptions, sends them to a summarizer, and stores structured legal insights. Without a pipeline, you'd have scattered logic and manual dependencies. With a pipeline? Clean, composable, and repeatable flow.

🧩 What Does a Data Pipeline Look Like?

Here’s a simplified flow:

graph TD
A[User Input] --> B[Input Validation]
B --> C[External API Call]
C --> D[Data Transformation / AI Processing]
D --> E[Database Save]
E --> F[Send Response]

Each of these steps may involve retries, error handling, and conditionals, but conceptually this is what most pipelines do.

✍️ A Real Example: Legal Case Pipeline in Next.js

Let’s say you’re building a legal chatbot where a user submits a case description.

Here’s what’s happening in your code (summarized for readability):

✅ Step 1: User Input

const { description, opponent, userId } = req.body;

User fills out a legal intake form.
Backend receives the input via an API endpoint.

🔍 Step 2: Get Relevant Cases via API

const docList = await getFromKanoon(description);

You send this case description to the Indian Kanoon API.
It returns a list of relevant legal documents (real court cases, judgments).

🧠 Step 3: Transform Data via AI

const processedJudgment = await runSummarizerChain({
  judgment: selectedDoc.content,
});

You take the top matching document.
Run it through an AI model (e.g., Langflow/Gemini) to summarize it.
Extract structured details: facts, laws involved, judgment reasoning, etc.

💾 Step 4: Store the Processed Case

const activeCase = await prisma.activeCases.create({
  data: {
    userId,
    description,
    opponent,
    summary: processedJudgment.summary,
    lawsInvolved: processedJudgment.lawsInvolved,
    judgment: processedJudgment.judgment,
    todo: processedJudgment.todo,
  },
});

You save all the AI-processed, structured information into the database.
This active case now becomes trackable, searchable, and viewable for the user.

📤 Step 5: Respond

return res.status(200).json({ message: "Case stored!", data: activeCase });

You return the response to the frontend so it can update the UI.

🔐 Key Features of a Good Data Pipeline

When building pipelines like this, keep these best practices in mind:

Feature	Why It Matters
Idempotency	Re-running the same step shouldn’t duplicate data or break logic.
Error Handling	Use try-catch blocks and log errors to debug issues later.
Retries	For flaky external APIs (like Indian Kanoon), always retry failed calls.
Logging	Add logs at each step to monitor pipeline behavior.
Timeouts	Prevent endless hangs on API calls or long tasks.
Validation	Validate inputs before triggering anything downstream.
Security	Sanitize inputs, and secure API calls to prevent abuse or injection.

🛠️ Tools That Help Build Pipelines

Here are some useful libraries and platforms to help build pipelines in modern web apps:

Backend Frameworks: Next.js API routes, Express.js, NestJS
Database Clients: Prisma, Sequelize, Mongoose
Message Queues (for async pipelines): Redis, BullMQ, Kafka
API Integrations: Axios, Fetch, OpenAPI
Workflow Orchestration (advanced): Airflow, Temporal.io, n8n

🧠 Final Thoughts

Think of pipelines as the arteries of your application. They carry the lifeblood (data) from the outer edge (user or API) to the core süt4(DB or logic)—transforming and enriching it along the way.

The pipeline you’ve built for your legal-tech app is solid—it turns unstructured user input into a structured, intelligent, and storable legal case. That’s real power.

As your system scales, you might move some parts of this pipeline into background workers (like summarization) or queue-based architectures—but the foundational pattern will remain.

Here is the lifeline the MVP code for my Project

import { NextResponse } from 'next/server';
import { PrismaClient } from '@/generated/prisma';
import { extractSections } from './extractSections';

const prisma = new PrismaClient();

const LANGFLOW_API_URL = 'https://api.langflow.astra.datastax.com/lf/043396b0-e82a-4e0f-aca3-ad6828b04b34/api/v1/run/2c978a87-7226-43c1-bccd-ca6082257444';
const FINAL_RESPONSE_URL = 'https://api.langflow.astra.datastax.com/lf/043396b0-e82a-4e0f-aca3-ad6828b04b34/api/v1/run/d3c72969-4e3e-464c-afbe-484d3243af21';
const LANGFLOW_TOKEN = process.env.FETCHING_DOCS_LANGFLOW_TOKEN;
const FINAL_RESPONSE_TOKEN = process.env.FINAL_RESPONSE_LANGFLOW_TOKEN;
const INDIAN_KANOON_API_KEY = process.env.KANOON_API_KEY;

export async function POST(request: Request) {
  try {
    const { description, userId, caseId } = await request.json();
    console.log("[1] Backend - Received:", { description, userId, caseId });

    // Validate inputs
    if (!description) {
      return NextResponse.json({ error: 'Description is required' }, { status: 400 });
    }
    if (!caseId) {
      return NextResponse.json({ error: 'Case ID is required' }, { status: 400 });
    }

    // Verify case exists and belongs to user
    const caseRecord = await prisma.case.findUnique({
      where: { id: caseId, userId: userId || undefined },
    });
    if (!caseRecord) {
      return NextResponse.json({ error: 'Case not found or unauthorized' }, { status: 404 });
    }

    // Step 1: Fetch initial Langflow response for keywords
    const payload = {
      input_value: description,
      output_type: "chat",
      input_type: "chat",
      session_id: "user_1",
    };
    console.log("[2] Backend - Sending document fetching payload to Langflow:", payload);

    const langflowRes = await fetch(LANGFLOW_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${LANGFLOW_TOKEN}`,
      },
      body: JSON.stringify(payload),
    });

    if (!langflowRes.ok) {
      console.error("[3] Backend - Langflow API error:", langflowRes.status, langflowRes.statusText);
      throw new Error('Langflow API call failed');
    }

    const langflowData = await langflowRes.json();
    const langflowMessage = langflowData.outputs?.[0]?.outputs?.[0]?.results?.message?.text;
    console.log("[4] Backend - Langflow raw output:", langflowMessage);

    let parsedResponse;
    try {
      const cleanJson = langflowMessage.replace(/```

json\n|\n

```/g, '').trim();
      parsedResponse = JSON.parse(cleanJson);
    } catch (error) {
      console.error("[5] Backend - Error parsing Langflow response:", error);
      throw new Error('Failed to parse Langflow response');
    }

    const caseOneLiner = parsedResponse.query_keywords?.[0] ?? '';
    console.log("[6] Backend - Extracted keyword/query:", caseOneLiner);

    // Step 2: Search Indian Kanoon API
    const searchQuery = encodeURIComponent(caseOneLiner);
    const kanoonURL = `https://api.indiankanoon.org/search/?formInput=${searchQuery}&pagenum=0`;
    console.log("[7] Backend - Final Kanoon URL:", kanoonURL);

    const kanoonRes = await fetch(kanoonURL, {
      method: 'POST',
      headers: {
        'Authorization': `Token ${INDIAN_KANOON_API_KEY}`,
      },
    });

    if (!kanoonRes.ok) {
      console.error("[8] Backend - Indian Kanoon API error:", kanoonRes.status, kanoonRes.statusText);
      throw new Error('Indian Kanoon API call failed');
    }

    const kanoonData = await kanoonRes.json();
    const docs = kanoonData?.docs.slice(0, 2) ?? [];
    const extractedDocs = docs.map((doc: any) => ({
      title: doc.title,
      headline: doc.headline,
      docId: doc.tid,
    }));
    console.log("[9] Backend - Extracted Docs:", extractedDocs);

    // Step 3: Process each document independently
    const processedDocs = [];
    for (const doc of extractedDocs) {
      const { docId, title } = doc;
      console.log("[10] Backend - Processing document ID:", docId);

      const existingDoc = await prisma.extractedDoc.findUnique({
        where: { docId },
        select: { docId, title },
      });
      if (existingDoc) {
        console.log("[11] Backend - Document already exists in database, skipping processing:", docId);
        processedDocs.push({
          docId: existingDoc.docId,
          title: existingDoc.title,
        });
        continue;
      }

      // Fetch document content from Indian Kanoon
      const kanoonDocRes = await fetch(`https://api.indiankanoon.org/doc/${docId}/`, {
        method: 'POST',
        headers: {
          'Authorization': `Token ${INDIAN_KANOON_API_KEY}`,
          'Accept': 'text/html',
        },
      });

      if (!kanoonDocRes.ok) {
        console.error("[12] Backend - Indian Kanoon document fetch error:", kanoonDocRes.status, kanoonDocRes.statusText);
        continue; // Skip to next document
      }

      const rawContent = await kanoonDocRes.text();
      const sections = extractSections(rawContent);
      console.log("[13] Backend - Extracted Sections:", sections);

      // Step 4: Generate HTML summary using final Langflow API
      if (!FINAL_RESPONSE_TOKEN) {
        throw new Error('Final response token is not set');
      }

      const finalPayload = {
        input_value: JSON.stringify({ docId, sections, description }),
        output_type: "chat",
        input_type: "chat",
        session_id: "user_1",
      };
      console.log("[14] Backend - Sending summary payload to Langflow:", finalPayload);

      const finalLangflowRes = await fetch(FINAL_RESPONSE_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${FINAL_RESPONSE_TOKEN}`,
        },
        body: JSON.stringify(finalPayload),
      });

      if (!finalLangflowRes.ok) {
        console.error("[15] Backend - Final Langflow API error:", finalLangflowRes.status, finalLangflowRes.statusText);
        continue; // Skip to next document
      }

      const finalLangflowData = await finalLangflowRes.json();
      const finalMessage = finalLangflowData.outputs?.[0]?.outputs?.[0]?.results?.message?.text;
      console.log("[16] Backend - Final Langflow raw output:", finalMessage);

      let summaryResponse;
      try {
        const cleanSummaryJson = finalMessage.replace(/```

json\n|\n

```/g, '').trim();
        summaryResponse = JSON.parse(cleanSummaryJson);
      } catch (error) {
        console.error("[17] Backend - Error parsing final Langflow response:", error);
        continue; // Skip to next document
      }

      const {  title: summaryTitle, aiSummary } = summaryResponse;
      console.log("[18] Backend - Parsed summary:", { docId, summaryTitle });

      // Step 5: Save to Prisma database
      try {
        const savedDoc = await prisma.extractedDoc.upsert({
          where: { docId: docId },
          update: {
            title: summaryTitle,
            rawContent,
            aiSummary,
            caseId,
          },
          create: {
            docId: docId,
            title: summaryTitle,
            rawContent,
            aiSummary,
            caseId,
          },
        });
        console.log("[19] Backend - Saved document to database:", savedDoc);
        processedDocs.push({ docId: docId, title: summaryTitle, aiSummary });
      } catch (prismaError) {
        console.error("[20] Backend - Prisma save error:", prismaError);
        continue; // Skip to next document
      }
    }

    // Step 6: Return response
    if (processedDocs.length === 0) {
      return NextResponse.json(
        { success: false, message: 'No documents were successfully processed', docIds: [] },
        { status: 500 }
      );
    }

    return NextResponse.json({
      success: true,
      message: `Successfully processed or retrieved ${processedDocs.length} document(s)`,
      docIds: processedDocs.map(doc => doc.docId),
      documents: processedDocs,
    });

  } catch (error) {
    console.error("[🔥] Backend - Error in fetch-docs route:", error);
    return NextResponse.json(
      { error: 'Internal server error', docIds: [] },
      { status: 500 }
    );
  } finally {
    await prisma.$disconnect();
  }
}

How Realtime Chat Apps are? Know the Trade-Offs..

Harsh Bhardwaj — Sat, 03 May 2025 14:27:22 +0000

Real-time chat applications are everywhere—think WhatsApp, Slack, or Discord and soon my new Project NyayVaad. If you’ve built a basic chat app with Next.js and React, perhaps just an input form sending messages, you’re ready to make it robust, scalable, and feature-rich. This guide takes you from the fundamentals of what a chat app is to implementing WebSockets, managing sessions, storing messages, and ensuring reliability with backup queues. Written for beginners and seasoned developers alike, we’ll use a story-based approach to explore real-world scenarios, with minimal code to keep things clear and engaging. This is more of a practical approach and architectural overview than a guide.

1. What is a Chat App and How Should It Behave?

A chat application lets users send and receive messages instantly, mimicking a real-life conversation. Imagine you’re chatting with a friend on Discord: you type a message, hit send, and it appears on their screen in a split second. A great chat app should:

Feel Instant: Messages arrive without delay, creating a smooth conversation flow.
Be Reliable: Messages are never lost, even if you refresh the page or lose your internet connection.
Offer Features: Show message history, typing indicators (“User is typing…”), read receipts, and who’s online.
Work at Scale: Handle a handful of users or thousands without crashing.
Be Intuitive: Provide a clean interface that works on phones, tablets, and desktops, with clear error messages (e.g., “You’re offline”).

The Reality of “Real-Time” Chat Apps

“Real-time” sounds magical, but it’s not instant like a video game or stock trading system. Chat apps tolerate slight delays (50-200ms) because humans don’t notice them. Technologies like WebSockets make this possible, but network issues, server load, or slow browsers can add tiny lags.

For New Developers:

Small Apps: A chat for 10-50 users can run on one server with WebSockets and a simple database. It’s manageable for beginners.
Big Apps: Apps like Slack handle millions of users with complex setups—multiple servers, databases, and queues. This is advanced and not needed for most projects.
Challenges: New devs often struggle with keeping messages in sync, handling page refreshes, or scaling WebSockets. Start simple and add features step-by-step.

2. Introduction to WebSockets: Your First Chat App

WebSockets are the backbone of real-time apps. Unlike HTTP, where the browser asks the server for data, WebSockets keep an open connection so the server can push messages instantly. This makes them perfect for chat apps.

Why WebSockets?

Fast: Messages arrive in real time without constant server requests.
Efficient: One connection handles all communication, unlike polling (repeatedly asking the server for updates).
Scalable: With the right setup, supports many users at once.

Let’s build a super simple chat app using Next.js, React, and Socket.IO. The goal: send a message from one browser and see it in another instantly. We’ll keep code minimal to focus on the concept.

Setting Up Your First WebSocket Chat App

Step 1: Create a Next.js Project

npx create-next-app@latest my-chat-app
cd my-chat-app
npm install socket.io socket.io-client

Step 2: Set Up the WebSocket Server

Create an API route to start a Socket.IO server that broadcasts messages.

// pages/api/socket.js
import { Server } from 'socket.io';

export default function handler(req, res) {
  if (!res.socket.server.io) {
    console.log('Starting WebSocket server...');
    const io = new Server(res.socket.server);
    io.on('connection', (socket) => {
      console.log('Client connected:', socket.id);
      socket.on('send_message', (msg) => {
        io.emit('receive_message', msg); // Send to all clients
      });
    });
    res.socket.server.io = io;
  }
  res.end();
}

Step 3: Build the Chat Component

Create a React component to connect to the server, send messages, and show received ones.

// components/Chat.js
import { useEffect, useState } from 'react';
import io from 'socket.io-client';

export default function Chat() {
  const [message, setMessage] = useState('');
  const [receivedMessages, setReceivedMessages] = useState([]);
  let socket;

  useEffect(() => {
    socket = io('http://localhost:3000');
    socket.on('receive_message', (msg) => {
      setReceivedMessages((prev) => [...prev, msg]);
    });
    return () => socket.disconnect();
  }, []);

  const sendMessage = () => {
    if (message.trim()) {
      socket.emit('send_message', message);
      setMessage('');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Simple Chat</h1>
      <div>
        {receivedMessages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type a message..."
        style={{ marginRight: '10px' }}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

Step 4: Initialize the WebSocket Server

Ensure the server starts when the app loads.

// pages/_app.js
import { useEffect } from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    fetch('/api/socket');
  }, []);
  return <Component {...pageProps} />;
}

export default MyApp;

Step 5: Update the Home Page

Use the Chat component on the home page.

// pages/index.js
import Chat from '../components/Chat';

export default function Home() {
  return <Chat />;
}

Step 6: Run the App

npm run dev

Open two browser tabs at http://localhost:3000. Type a message in one tab, click “Send,” and see it appear in both tabs instantly. You’ve just built a real-time chat app!

How It Works

The server (/api/socket) sets up Socket.IO and listens for send_message events.
When you send a message, the server broadcasts it to all clients via receive_message.
The React component connects to the server, listens for messages, and updates the UI.

This is a starting point. It doesn’t save messages or track users yet, but it shows WebSockets in action.

3. Key Considerations for WebSockets in Next.js

Using WebSockets with Next.js requires careful planning. Here are five key points to consider:

Serverless vs. Custom Server:

Next.js API routes are serverless, which can disrupt WebSocket connections. Our example uses a persistent server, but scaling may require a custom Node.js server.
Trade-Off: Serverless is cheap and easy but less suited for WebSockets; a custom server offers control but needs more maintenance.

Scaling WebSockets:

WebSockets keep connections open, which can overload a single server. Use a Redis adapter with Socket.IO to sync messages across multiple servers.
Trade-Off: Redis enables scaling but adds setup complexity.

Security:

Use WSS (WebSocket Secure) with SSL/TLS to encrypt data. Add JWT authentication to verify users and rate-limit messages to prevent spam.
Trade-Off: Security is essential but increases development time.

Error Handling:

Handle dropped connections, network issues, or server restarts. Socket.IO’s reconnection feature helps, but you’ll need to resync messages on reconnect.
Trade-Off: Robust error handling improves user experience but adds code.

Performance:

Compress messages and limit event frequency to save bandwidth. Monitor server resources (CPU/memory) under load.
Trade-Off: Optimization boosts efficiency but requires testing to avoid over-engineering.

4. Do You Need WebSockets for a Chatbot?

If your chat app includes a chatbot (e.g., an AI replying to messages), you might wonder if WebSockets are necessary. Let’s explore:

HTTP Call-Response:
- Send a user’s message to the server via HTTP, call a chatbot API (e.g., OpenAI), and return the response. This works for one-on-one chats with a bot.
- Pros: Simple, no need for persistent connections.
- Cons: Slower for group chats or frequent bot interactions due to HTTP overhead.
WebSocket-Based Chatbot:
- Use WebSockets to handle user and bot messages in real time, especially in group chats where the bot responds to multiple users instantly.
- Pros: Feels seamless, supports complex scenarios.
- Cons: Requires WebSocket setup, adding complexity.

Recommendation: For a single user chatting with a bot, HTTP is enough. For group chats or instant bot responses, use WebSockets. You can mix both: WebSockets for user-to-user messages and HTTP for bot API calls to keep things simple.

5. Managing Sessions and Preventing Data Loss: A Story-Based Journey

A robust chat app ensures users don’t lose messages or their place in the conversation, even if they refresh the page or the server crashes. Let’s explore this through three scenarios, introducing solutions like session management, local storage, message batching, and backup queues.

Scenario 1: Page Refresh Wipes Out Chats

Story: Alice is chatting with Bob about their weekend plans. She sends a message, sees it in the chat, and accidentally refreshes the page. Disaster—her chat history is gone! She’s annoyed, thinking the app is broken.

Solution: Session Management and Local StorageTo fix this, track users with a session ID and store messages locally in the browser using IndexedDB (for larger datasets) or localStorage (for simplicity).

Session Management: Create a unique session ID when a user joins. Store it in localStorage and include it in every message to identify the user.

  // components/Chat.js
  function getSessionId() {
    let sessionId = localStorage.getItem('sessionId');
    if (!sessionId) {
      sessionId = Math.random().toString(36).substring(2);
      localStorage.setItem('sessionId', sessionId);
    }
    return sessionId;
  }

  const sendMessage = () => {
    if (message.trim()) {
      const msg = { sessionId: getSessionId(), text: message };
      socket.emit('send_message', msg);
      setReceivedMessages((prev) => [...prev, msg]);
      setMessage('');
    }
  };

Local Storage with IndexedDB: Cache messages in IndexedDB and load them on page refresh.

  // components/Chat.js
  import { openDB } from 'idb';

  async function storeMessage(message) {
    const db = await openDB('chatDB', 1, {
      upgrade(db) {
        db.createObjectStore('messages', { autoIncrement: true });
      },
    });
    await db.add('messages', message);
    db.close();
  }

  async function getMessages() {
    const db = await openDB('chatDB', 1);
    const messages = await db.getAll('messages');
    db.close();
    return messages;
  }

  useEffect(() => {
    getMessages().then((msgs) => setReceivedMessages(msgs));
    socket = io('http://localhost:3000');
    socket.on('receive_message', (msg) => {
      setReceivedMessages((prev) => [...prev, msg]);
      storeMessage(msg);
    });
    return () => socket.disconnect();
  }, []);

Outcome: Alice refreshes the page, and her chat history reloads from IndexedDB. The session ID keeps her identity consistent, so the server knows it’s her.

Scenario 2: Slow Network Makes Chatting Painful

Story: Bob is on a shaky train Wi-Fi, sending messages to Alice. He types five messages quickly, but the app sends each one separately. The network lags, and messages take ages to appear, making the chat feel clunky.

Solution: Batching MessagesQueue messages locally and send them in batches to reduce network requests, keeping the UI snappy.

Implementation: Store messages in an array and send them when the queue hits a limit or after a short delay.

  // components/Chat.js
  let messageQueue = [];

  function queueMessage(message) {
    messageQueue.push(message);
    storeMessage(message); // Save to IndexedDB
    if (messageQueue.length >= 5) {
      sendBatch();
    }
  }

  function sendBatch() {
    if (messageQueue.length > 0) {
      socket.emit('send_batch', messageQueue);
      messageQueue = [];
    }
  }

  setInterval(sendBatch, 3000); // Send every 3 seconds

  const sendMessage = () => {
    if (message.trim()) {
      const msg = { sessionId: getSessionId(), text: message };
      setReceivedMessages((prev) => [...prev, msg]);
      queueMessage(msg);
      setMessage('');
    }
  };

Server Handling: Process batched messages and broadcast them.

  // pages/api/socket.js
  socket.on('send_batch', (messages) => {
    messages.forEach((msg) => io.emit('receive_message', msg));
  });

Outcome: Bob’s messages queue locally, and the UI updates instantly. Batches are sent efficiently, so the chat feels smooth even on bad Wi-Fi.

Scenario 3: Server Crash Loses Messages

Story: Alice and Bob are planning a party in the chat. Suddenly, your server crashes for 15 minutes. Messages sent during the outage vanish, and users flood your inbox with complaints about lost chats.

Solution: Backup Queues and Persistent StorageUse a message queue (e.g., Redis) and a database (e.g., MongoDB) to ensure messages are never lost. Queue messages locally during outages and sync them when the server is back.

Local Queue for Offline Support: Save messages to IndexedDB when the server is down and sync on reconnect.

  // components/Chat.js
  socket.on('disconnect', () => {
    console.log('Server offline, queuing locally...');
  });

  socket.on('connect', () => {
    console.log('Server online, syncing...');
    getMessages().then((msgs) => {
      if (msgs.length > 0) {
        socket.emit('send_batch', msgs);
        // Clear IndexedDB after sync
        openDB('chatDB', 1).then((db) => {
          db.clear('messages');
          db.close();
        });
      }
    });
  });

Server-Side Message Queue: Queue messages in Redis before saving to the database.

  // pages/api/queue.js F
  import Redis from 'ioredis';

  const redis = new Redis(process.env.REDIS_URL);

  export default async function handler(req, res) {
    await redis.lpush('message_queue', JSON.stringify(req.body));
    res.status(200).json({ success: true });
  }

Background Worker: Process the queue and save to MongoDB.

  // scripts/worker.js
  import Redis from 'ioredis';
  import { MongoClient } from 'mongodb';

  const redis = new Redis(process.env.REDIS_URL);
  const client = new MongoClient(process.env.MONGODB_URI);

  async function processQueue() {
    await client.connect();
    const db = client.db();
    while (true) {
      const message = await redis.rpop('message_queue');
      if (message) {
        await db.collection('messages').insertOne(JSON.parse(message));
      }
    }
  }

  processQueue();

Database Schema: Store messages persistently in MongoDB.

  // MongoDB schema
  {
    sessionId: String,
    text: String,
    timestamp: Date
  }

Outcome: When the server restarts, Alice and Bob’s messages sync from IndexedDB to Redis, then to MongoDB. No messages are lost, and users trust your app.

Additional Considerations

Durable Queues: Use RabbitMQ instead of Redis for critical apps, as it saves messages to disk, preventing loss in a crash.
- Trade-Off: RabbitMQ is more reliable but slower and trickier to set up.
Database Choice: MongoDB is flexible for chat data, but PostgreSQL is better for complex queries (e.g., analytics).
- Trade-Off: MongoDB is fast for writes; PostgreSQL excels at relationships.
Deduplication: Add a unique message ID to prevent duplicates if a message is sent twice during a retry.
Monitoring: Use Datadog or Prometheus to track queue size, server uptime, and message delivery times.

6. Conclusion: Your Path to a Robust Chat App

You’ve transformed a basic chat input form into a reliable, real-time chat application. WebSockets with Socket.IO brought instant messaging to life. Session management and IndexedDB ensured chats survive page refreshes. Batching messages kept the app fast on slow networks. Redis and MongoDB, paired with local queuing, made your app resilient to server outages. Whether you add a chatbot via HTTP or WebSockets, your app is now ready for real users.

Next Steps:

Add typing indicators, read receipts, or group chats.
Use load testing tools like Artillery to simulate many users.
Consider end-to-end encryption for privacy.
Ask users for feedback to guide new features.

Building a chat app teaches you real-time communication, state management, and scalability. Start small, keep iterating, and soon you’ll have an app users can’t stop using.

Resources:

Socket.IO Documentation
MongoDB for Real-Time Apps
Redis Pub/Sub for Chat
Building a Chat App with React and Node.js

Right Way to SEO | Enhance your visibility with these key points

Harsh Bhardwaj — Mon, 28 Apr 2025 16:43:24 +0000

Hey, everyone, so I recently had the opportunity of working with NextJs and one of the vital and key advantages that i have heard a lot about it is being Server-Side Rendered which helps with SEO's. So I took a little deep dive into the matter and below are my learnings with the topic. AI helped me a lot in developing this article so credit where it is due..

Comprehensive Guide to SEO in Next.js and React

Search Engine Optimization (SEO) is a cornerstone of web development, enabling websites to rank higher on search engines like Google and attract organic traffic. This guide explores SEO in the context of Next.js and React, detailing how Next.js simplifies SEO, why React faces challenges, and how to optimize both frameworks for better search visibility and performance. We’ll cover handling SEO in Next.js, improving SEO in bare React, and techniques to reduce load times, all presented in a professional, developer-friendly format.

1. What is SEO?

SEO, or Search Engine Optimization, is the process of enhancing a website’s visibility on search engines to increase organic (non-paid) traffic. It involves optimizing content, structure, and performance to align with search engine algorithms. The process includes three key stages:

Crawling: Search engine bots (e.g., Googlebot) scan websites to discover content.
Indexing: The scanned content is stored in the search engine’s database.
Ranking: The content is ranked based on relevance, quality, and user experience metrics.

SEO encompasses:

On-page SEO: Optimizing meta tags, titles, headings, and content.
Technical SEO: Improving site speed, mobile-friendliness, and structured data.
Off-page SEO: Building backlinks and social signals.

Effective SEO ensures search engines understand your website’s content, making it more likely to appear in relevant search results (What is SEO?).

2. SEO in Next.js: Features and Best Practices

Next.js, a React framework, is designed with SEO in mind, offering features that make it easier for search engines to crawl and index content. Its rendering strategies and built-in optimizations streamline SEO efforts.

Key SEO Features of Next.js

Feature	Description	SEO Benefit
Server-Side Rendering (SSR)	Renders pages on the server for each request, delivering full HTML to the client.	Ensures search engines can crawl dynamic content easily.
Static Site Generation (SSG)	Pre-renders pages at build time, creating static HTML files.	Improves load times and crawlability for static content.
Dynamic Meta Tags	Uses the `next/head` component to set unique titles and meta descriptions per page.	Enhances relevance for specific search queries.
Image Optimization	The `Image` component optimizes images with resizing, compression, and lazy loading.	Reduces page load times, a key SEO ranking factor.
Performance Optimization	Automatic code splitting and lazy loading minimize JavaScript payload.	Improves Core Web Vitals and user experience.
Core Web Vitals	Supports fast rendering and minimal layout shifts.	Aligns with Google’s user experience metrics for ranking.

Handling SEO in Next.js

To optimize SEO in Next.js, follow these best practices:

Use SSR for Dynamic Content:

Implement SSR with getServerSideProps for pages that require real-time data, such as user profiles or search results.
Example:

 export async function getServerSideProps() {
   const res = await fetch('https://api.example.com/data');
   const data = await res.json();
   return { props: { data } };
 }
 export default function Page({ data }) {
   return <div>{data.title}</div>;
 }

Use SSG for Static Content:

Use getStaticProps for pages like blog posts or landing pages that don’t change frequently.
Example:

 export async function getStaticProps() {
   const res = await fetch('https://api.example.com/posts');
   const posts = await res.json();
   return { props: { posts } };
 }
 export default function Blog({ posts }) {
   return <div>{posts.map(post => <div>{post.title}</div>)}</div>;
 }

Set Dynamic Meta Tags:

Use the next/head component to define unique meta tags for each page.
Example:

 import Head from 'next/head';
 export default function Post({ post }) {
   return (
     <>
       <Head>
         <title>{post.title}</title>
         <meta name="description" content={post.excerpt} />
       </Head>
       <div>{post.content}</div>
     </>
   );
 }

Optimize Images:

Use the Image component to automatically handle image optimization.
Example:

 import Image from 'next/image';
 export default function Home() {
   return <Image src="/hero.jpg" alt="Hero Image" width={1200} height={600} />;
 }

Monitor Core Web Vitals:
- Use tools like Google Lighthouse to track metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Next.js’s optimizations help achieve good scores (Next.js SEO Benefits).

3. Why React Struggles with SEO

React, a popular JavaScript library for building user interfaces, relies on Client-Side Rendering (CSR) by default. This approach can create SEO challenges:

Client-Side Rendering (CSR):
- React sends a minimal HTML file to the browser, with content rendered via JavaScript. Search engines may not fully execute JavaScript, leading to incomplete crawling and indexing.
- Example: A React app’s initial HTML might look like:
```
<div id="root"></div>
```
The actual content (e.g., <h1>Welcome</h1>) is added after JavaScript runs, which search engines might miss.
Search Engine Limitations:
- While Google can render JavaScript, it may not do so consistently, and other search engines may have limited JavaScript support. This can delay or prevent indexing (React SEO Issues).
Hydration Mismatch:
- If the server-rendered HTML differs from the client-rendered HTML, it can cause errors during hydration, confusing search engines.

These factors make React less SEO-friendly out of the box compared to frameworks like Next.js.

4. Improving SEO in Bare React Applications

To make a React application SEO-friendly, you need to implement Server-Side Rendering (SSR) manually. This ensures search engines receive fully rendered HTML. Below are the steps to achieve this:

Steps to Implement SSR in React

Set Up a Node.js Server:

Use Express to handle HTTP requests and serve the React app.
Example:

 const express = require('express');
 const app = express();
 app.use(express.static('public'));
 app.get('*', (req, res) => {
   // Handle rendering
 });
 app.listen(3000, () => console.log('Server running'));

Render React Components to HTML:

Use ReactDOMServer.renderToString to generate HTML from React components.
Example:

 const React = require('react');
 const ReactDOMServer = require('react-dom/server');
 const App = require('./App').default;
 const html = ReactDOMServer.renderToString(<App />);

Serve the HTML:

Send the rendered HTML to the client, including the JavaScript bundle for hydration.
Example:

 res.send(`
   <html>
     <head>
       <title>My React App</title>
     </head>
     <body>
       <div id="root">${html}</div>
       <script src="/bundle.js"></script>
     </body>
   </html>
 `);

Hydrate on the Client:

Use ReactDOM.hydrate to make the app interactive on the client side.
Example:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 ReactDOM.hydrate(<App />, document.getElementById('root'));

Challenges of Manual SSR

Complexity: Requires managing server-side routing, data fetching, and hydration.
Maintenance: Keeping server and client in sync can lead to errors.
Performance: Poor implementation may increase server load or cause delays.

Manual SSR is feasible but significantly more complex than using Next.js, which automates these processes (React SSR Guide).

5. Next.js vs. React: Key Differences

Next.js builds on React, adding features that simplify development and enhance SEO:

Aspect	React	Next.js
Purpose	Library for building user interfaces.	Framework for full-stack React applications.
Rendering	Client-side rendering by default.	Supports SSR, SSG, and CSR out of the box.
SEO	Requires manual SSR for SEO.	Built-in SSR and SSG improve SEO.
Routing	Needs third-party libraries (e.g., React Router).	File-based routing included.
Performance	Manual optimization required.	Automatic code splitting, image optimization.
API Routes	Requires separate backend setup.	Built-in API routes for full-stack apps.

Next.js abstracts away much of the complexity of building SEO-friendly, performant applications, making it a preferred choice for public-facing websites (Next.js Features).

6. Optimizing Load Times for SEO

Page load speed is a critical SEO factor, as it impacts user experience and Core Web Vitals. Both Next.js and React can be optimized to reduce load times.

Optimizations in Next.js

Automatic Code Splitting: Splits JavaScript into smaller chunks, loading only what’s needed per page.
Lazy Loading: Components and images load on demand, reducing initial load time.
Image Optimization: The Image component handles resizing, compression, and lazy loading.
Caching: Static assets and API responses can be cached for faster delivery.

Optimizations in Bare React

Code Splitting:

Use React.lazy and Suspense to load components dynamically.
Example:

const LazyComponent = React.lazy(() => import('./Component'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Lazy Loading Images:
- Implement lazy loading for images using the loading="lazy" attribute or libraries like react-lazyload.
- Example:
```
<img src="image.jpg" alt="Description" loading="lazy" />
```
Minification and Compression:
- Use Webpack to minify JavaScript and CSS, and enable gzip compression on the server.
- Example (Express middleware):
```
const compression = require('compression');
app.use(compression());
```
Caching:
- Cache static assets and API responses using HTTP headers or a CDN.

Next.js automates many of these optimizations, while React requires manual implementation, increasing development effort (Performance Optimization).

7. Conclusion

SEO is vital for driving organic traffic, and choosing the right framework can make a significant difference. Next.js simplifies SEO with its SSR, SSG, and built-in optimizations, making it ideal for public-facing websites. React, while powerful for dynamic interfaces, requires manual SSR to achieve similar SEO results, which can be complex and time-consuming.

For developers prioritizing SEO, Next.js is the better choice due to its streamlined features and performance benefits. However, with careful implementation, bare React applications can also be made SEO-friendly. By combining proper rendering strategies with performance optimizations, you can ensure your website ranks well and delivers a fast, user-friendly experience.

[Boost]

Harsh Bhardwaj — Thu, 02 Jan 2025 09:34:24 +0000

In Quest of Clarity : The Methodical Madness Behind Research

Harsh Bhardwaj ・ Jan 2

#hackathon #challenge

In Quest of Clarity : The Methodical Madness Behind Research

Harsh Bhardwaj — Thu, 02 Jan 2025 09:33:57 +0000

I as a CS student and startup enthusiast, often find myself researching on startup ideas, Hackathon problem statements quite often. Sometimes great ideas click sometimes they don't. In this mist we often find ourselves researching on PS we like, or genuinely wish to do something about but the solutions isn't necessarily always straight forward hence, we need a concrete framework, not for JS but rather for researching on Ideas and filtering out bad one's. So here we go, a robust sequence of methods to cover most of the aspects of a problem, hence reducing the chances of overlooking basic things in your next Big Startup Idea..

Additionally, in the many articles I read, they projected that the each member of the team should carry out the research up to the half way mark at least to cover the thinking of all minds. Once you reach the halfway mark, the research work can be carried out further by one or two members.

Divide your research into 3 key phases.

Phase: 1

In beginner's mind there are many possibilities, but in the expert's mind there are few.
For first phase always keep in mind: Quantity >>> Quality

Demarcate the Problem Space

~Define the Problem Statement Clearly.

1. State the PS in a 60 word paragraph.
For last several years, Delhi faces severe traffic congestion, resulting in increased pollution, lost productivity, and reduced quality of life for its residents. Daily commute is a nightmare.

*2. Break-down the PS into sub-problems *

Lack of public transport infrastructure.
Over-dependence on private vehicles.
Inefficient traffic management.
Urban planning challenges (narrow roads, high population density).
Behavioral factors (preference for private vehicles, lack of carpooling culture).

3. Use 5 Whys Method
Start with your main problem and ask why is that, found the new problem in the answer, now ask again why is the new problem. Go on with this recursion for 5 iterations to identify the key issues.

Why is there congestion? → Over-reliance on private vehicles.
Why do people use private vehicles? → Public transport is overcrowded or unreliable.
Why is public transport unreliable? → Lack of investment and infrastructure / Behavioral Choices

Prioritize Sub-Problems:
Now that you have multiple sub problems, find the ones that are solvable at individual level. Focus your rest of the research around these. However keep one ear open if incase you missed a problem or to, look for these missed points up till the research is halfway mark.

Explore Multi Disciplinary Approach

consider how the following things might be playing a non active but pivotal role in the creation of the problem.

Behavioral Sciences (see what behaviors are being depicted and find why)
How new gen Technologies like Blockchain, Web3 and AI can help.
How the Economics plays along, how it effects people here
Geographics (sometimes)
Governance and implementation of current rules.

Phase - II

Find what other countries are doing in the regards
Search for the countries facing the same issue try to find what other developed nations or nations that are successful at tackling the problem have done. Also consider if some country has solve the same issue in the past.

Find what other companies or competitors are doing
Find for relevant competitions or pre programmed launches by giant ventures. See what other business in the same domain are doing right, see the pain points of the customers and capitalize.

Use Advanced Search Queries for reliable websites (search google)

MID- POINT

Narrow your research, further on only few people carry out the rest.

StakeHolder Analysis:

Primary Affected People
Secondary affected people
Affect on private sector and Govt Agencies

Phase - III

Build your own Framework

Understand brief History for the root cause
Analyze the scale of the problem
Seek for Global Benchmarks
Identify current Inefficiencies
Ask the GPT to make sense out of the documented research so far

Seek For the Legal Aspect

Involve law students
Search for relevant laws which can be disrupting in future

Engage in Market

Gather Relevant group that is affected by the problem
Analyze Competitors
What the group wants
Define your target audience
Avoid judgement and Ideate the platforms and technologies

Keep Working, document it all, Devise your own methodologies further, gather some examples of companies that disrupted their market spaces.

Insertion Sort

Harsh Bhardwaj — Sun, 17 Nov 2024 18:53:10 +0000

Straight Insertion Sort

algorithm that builds the final sorted array one item at a time. It is much less efficient on large lists. However, it has the advantage of being simple and adaptable, making it efficient for small datasets.

T(C) = O(n^2) where as Space Taken is constant as it sorts in place.

Steps:

Start with the second element (assuming the first element is sorted).
Compare the current element with the elements in the sorted portion and shift all the elements greater than the current element to the right.
Insert the current element into its correct position.
Repeat the process for all elements in the array.

Code:

#include <iostream>
using namespace std;

void insertionSort(int arr[], int n) {
    for (int i = 1; i < n; i++) {
        int key = arr[i];
        int j = i - 1;

        // Move elements of arr[0..i-1], that are greater than key, to one position ahead of their current position
        while (j >= 0 && arr[j] > key) {
            arr[j + 1] = arr[j];
            j = j - 1;
        }
        arr[j + 1] = key;
    }
}

int main() {
    int arr[] = {12, 11, 13, 5, 6};
    int n = sizeof(arr) / sizeof(arr[0]);
    insertionSort(arr, n);
    cout << "Sorted array: \n";
    for (int i = 0; i < n; i++)
        cout << arr[i] << " ";
    return 0;
}

Special Points

Simplicity: Easy to implement and understand.
Stable: Maintains the relative order of equal elements.
In-Place Sorting: Does not require extra memory.
Efficient for Small Datasets: Performs well for small or nearly sorted datasets.

SHell Sort

It sorts elements at a specific interval first and gradually reduces the interval until it performs a final pass using insertion sort.

Passes:

Initial Array: [12, 34, 54, 2, 3]

Pass 1: Gap = 2
Elements Compared: [12, 54], [34, 2], [54, 3]

Reordering:
Compare and swap 12 and 54: [12, 34, 54, 2, 3]
Compare and swap 34 and 2: [12, 2, 54, 34, 3]
Compare and swap 54 and 3: [12, 2, 3, 34, 54]

Array after Pass 1: [12, 2, 3, 34, 54]

Pass 2: Gap = 1

Reordering:
Compare and swap 12 and 2: [2, 12, 3, 34, 54]
Compare and swap 12 and 3: [2, 3, 12, 34, 54]
No further swaps needed as array is already sorted

Array after Pass 2: [2, 3, 12, 34, 54]

#include <iostream>
using namespace std;

void shellSort(int arr[], int n) {
    for (int gap = n / 2; gap > 0; gap /= 2) {
        for (int i = gap; i < n; i++) {
            int temp = arr[i];
            int j;
            for (j = i; j >= gap && arr[j - gap] > temp; j -= gap) {
                arr[j] = arr[j - gap];
            }
            arr[j] = temp;
        }
    }
}

int main() {
    int arr[] = {12, 34, 54, 2, 3};
    int n = sizeof(arr) / sizeof(arr[0]);
    shellSort(arr, n);
    cout << "Sorted array: \n";
    for (int i = 0; i < n; i++)
        cout << arr[i] << " ";
    return 0;
}

Performs Better than Insertion Sort // Unstable

Selection Sorts

Harsh Bhardwaj — Sun, 17 Nov 2024 18:29:43 +0000

Straight Sort-

Comparison based Algorithm that swaps minimum element in place to achieve a
T(C) = O(n^2) _ and a _S(C) = O(1) as the swapping occurs in place.

Steps-

Start with the first element as the minimum.
Compare this element to the rest of the elements to find the smallest.
Swap the smallest element with the first element.
Move to the next element and repeat until the list is sorted.

Code-

#include <iostream>
using namespace std;

void selectionSort(int arr[], int n) {
    for (int i = 0; i < n-1; i++) {
        int minIndex = i;
        for (int j = i+1; j < n; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        swap(arr[i], arr[minIndex]);
    }
}

int main() {
    int arr[] = {64, 25, 12, 22, 11};
    int n = sizeof(arr)/sizeof(arr[0]);
    selectionSort(arr, n);
    cout << "Sorted array: \n";
    for (int i = 0; i < n; i++) {
        cout << arr[i] << " ";
    }
    return 0;
}

Special Points-

Simplicity
Unstable
Inplace Sorting
Might be beneficial for small number of cases

Heap Sort

Heap Sort is a comparison-based sorting algorithm that uses a binary heap data structure. It's efficient and consistent.

Steps

Build a Heap
Sorting 1.Build a max heap from the input data. 2.The largest element is swapped with the last element of the heap and removed from the heap.
1. Heapify the root of the heap.
2. Repeat the process until all elements are sorted.

Code-

#include <iostream>
using namespace std;

void heapify(int arr[], int n, int i) {
    int largest = i;
    int left = 2 * i + 1;
    int right = 2 * i + 2;

    if (left < n && arr[left] > arr[largest])
        largest = left;

    if (right < n && arr[right] > arr[largest])
        largest = right;

    if (largest != i) {
        swap(arr[i], arr[largest]);
        heapify(arr, n, largest);
    }
}

void heapSort(int arr[], int n) {
    // Build max heap
    for (int i = n / 2 - 1; i >= 0; i--)
        heapify(arr, n, i);

    // Extract elements from heap one by one
    for (int i = n - 1; i >= 0; i--) {
        swap(arr[0], arr[i]);
        heapify(arr, i, 0);
    }
}

int main() {
    int arr[] = {12, 11, 13, 5, 6, 7};
    int n = sizeof(arr) / sizeof(arr[0]);

    heapSort(arr, n);

    cout << "Sorted array: \n";
    for (int i = 0; i < n; i++)
        cout << arr[i] << " ";
    return 0;
}

Special Points:

Binary Heap is used
Non Stable Algorithm
T(C) - O(nlogn)
Sort in Place S(C) - O(1) {Constant}