Forem: Subham

I Built a Free Open Source Tool That Saved Me From Deleting My Production Database (Again)

Subham — Sun, 22 Mar 2026 21:31:21 +0000

Okay so real talk. I've done it twice.

The first time was during college. I was trying to drop a test table, typed the wrong database name, and wiped out actual user data from a project I was working on with friends. The second time was worse. I was 11pm deep into shipping a feature, ran a migration script, and it quietly nuked 3 months of production records.

Both times I just sat there staring at my screen like 👁️👄👁️

And both times, I had no backup.

So I built ChronoBase a free, open source, local-first database backup manager for PostgreSQL and MongoDB. It runs on your laptop, has a proper web UI, schedules automatic backups, and lets you restore to any database with one click.

No monthly fees. No cloud account. No random company holding your data hostage.

Why does every backup tool either cost money or suck?

Genuinely asked myself this for way too long.

pgAdmin has manual backup buried in menus. MongoDB Compass doesn't really do scheduled backups. Navicat is like $250. Every cloud backup tool wants your credit card just to get started.

For solo devs and indie hackers running multiple side projects, all you really need is:

A place to store all your database connection strings
Something that dumps them automatically on a schedule
The ability to restore any snapshot to any target

That's it. That's the whole thing. Why does this not exist as a simple, free, open source tool?

So I built it.

What ChronoBase actually does

Here's the quick rundown:

Connections — you paste in your PostgreSQL or MongoDB connection URLs, give them a name, group them by project (like Production, Staging, MySaaS). The passwords are masked in the UI so you're not staring at credentials all day.

One-click backup — hit the button, it runs pg_dump or mongodump under the hood, saves the .sql file or MongoDB BSON folder to your local disk. It takes like 2 seconds for small DBs.

Scheduled backups — set a cron expression (0 2 * * * = daily at 2am) and forget about it. The server runs in the background and fires backups while you sleep. You wake up and they're just... there.

Restore — pick any snapshot, choose "same database" (overwrites with the old snapshot) or "push to different DB" (clone to staging, new server, whatever). One click.

Wipe DB — this one's spicy. Sometimes you want to completely nuke the contents of a database before restoring a backup. The Wipe DB button drops every table, every schema (DROP SCHEMA public CASCADE for Postgres), then you restore clean. No leftover junk data.

Danger Zone — full reset with typed confirmation. You literally have to type DELETE EVERYTHING to confirm. Because I've seen what happens when buttons don't have confirmation dialogs.

The tech stack (and why I kept it stupid simple)

Okay so I went with Node.js + Express on the backend and vanilla ES modules on the frontend. No React, no bundler, no build step.

Why? Because I wanted anyone to be able to clone this, read the code, and immediately understand what's happening. No npm run build, no compiled bundle, no mystery.

Data is stored in a plain JSON file (chronobase-data.json). No SQLite, no native modules that break on Node v24 (learned that one the hard way mid-build). If you want to move to a new machine, you literally just copy the folder.

The project structure is modular — one file per concern:

src/
  database.js      ← JSON read/write
  tools.js         ← finds pg_dump/mongodump on your system
  backup.js        ← runs the actual dumps and restores
  scheduler.js     ← manages cron jobs
  routes/          ← one route file per resource

Frontend is the same — public/js/pages/ has one file per page. Clean, readable, zero magic.

The actual hard part: detecting CLI tools across Windows, macOS, and Linux

You know what's annoying? pg_dump lives in completely different places depending on OS, PostgreSQL version, and whether you installed it through an installer, Homebrew, or apt.

The tools.js module checks a list of known paths:

const PG_DUMP_CANDIDATES = [
  'pg_dump',
  '/opt/homebrew/bin/pg_dump',
  'C:\\Program Files\\PostgreSQL\\18\\bin\\pg_dump.exe',
  'C:\\Program Files\\PostgreSQL\\17\\bin\\pg_dump.exe',
  // ... and more
];

It probes each one by running "<path>" --version with a 5 second timeout. First one that responds gets used. Works on every platform without configuration.

The UI shows green/red dots in the sidebar telling you instantly which tools are detected. If something's missing, the Setup page gives you exact install commands for Windows, macOS, and Linux.

How to run it right now (for real, it takes 3 minutes)

git clone https://github.com/Subham-Maity/chronobase.git
cd chronobase
npm install
node server.js

Open http://localhost:3420.

That's it. It's running. Add your first connection string and click Backup.

For Windows you can also double-click START.bat which auto-installs dependencies, starts the server, and opens the browser for you.

Why local-first matters more than you think

Every time you send your database connection string to a cloud backup service, that's another place your credentials live that isn't yours.

ChronoBase keeps everything local. Your .sql files are on your disk. Your connection URLs are in a JSON file on your machine. Nothing is uploaded, transmitted, or stored anywhere external.

For solo devs this is usually fine as-is. For anything with real user data, you obviously want encryption at rest — that's on the roadmap. But the local-first baseline is the right default.

What I want to add next

Current roadmap (also in the README if you want to contribute):

S3 / R2 / Backblaze upload — offsite backup support
Backup compression — gzip .sql files, they can get large
Slack/Discord notifications — ping when a scheduled backup fails
MySQL / MariaDB — same engine, just different CLI tools
Docker image — docker run -p 3420:3420 chronobase
Encryption — AES-256 for stored connection URLs

If any of these sound useful to you, PRs are open. The codebase is intentionally small and readable — a decent Node dev can add a new route in like 20 minutes.

The real reason I'm sharing this

I know there are thousands of devs running side projects and SaaS apps on $5 droplets who don't have a proper backup strategy. It's not because they don't care. It's because setting one up is annoying and all the existing tools are either overkill or paywalled.

This is meant to be the thing that just works. Run it on your laptop or your home server, add your connection strings, set a schedule, and stop thinking about it.

Because the backup you don't have is the one you'll wish you did at 1am when things go wrong.

GitHub: github.com/Subham-Maity/chronobase

If it saves you from a disaster, drop a ⭐ — it genuinely helps the project get discovered.

And if you've had your own database horror story, tell me in the comments. Misery loves company.

Building a Scalable Real-Time Driver Tracking System

Subham — Fri, 16 May 2025 00:05:41 +0000

Building a Real-Time Delivery Tracking System Using Socket, Redis, Redis streams adapter, Kafka

I recently worked on an exciting project for a client—a delivery app similar to Zomato, where users can track their driver's location live on a map.

The complete application used Flutter for the frontend with both NestJS and Golang powering different versions of the backend.

While I developed two separate implementations, this article focuses purely on the core tracking logic that's completely language-independent.
If you're curious about the actual code, everything is available on GitHub: https://github.com/Subham-Maity/RTLS-Scale.

But don't worry about the specific programming languages—I've designed this guide to be accessible to anyone interested in understanding the fundamental architecture of real-time location tracking systems.

Let me walk you through how I built this prototype, how it works, and how to scale it for real-world applications.

Important disclaimer: this is not production-ready code, as a full commercial implementation would require additional business logic, security considerations, battery optimization, and many other factors I won't cover here. I'm also not addressing driver matching algorithms or distance calculations—this article focuses exclusively on the real-time tracking system architecture.

Along the way, I'll share insights from my experience, including practical advice on backend-frontend communication and what I learned about building reliable real-time systems. By the end, you'll understand exactly how that little moving dot on your food delivery app actually works behind the scenes!

🔥Connect: https://www.subham.online

🔥Repo: https://github.com/Subham-Maity/RTLS-Scale

🔥Twitter: https://twitter.com/TheSubhamMaity

🔥LinkedIn: https://www.linkedin.com/in/subham-xam

How the Prototype Works

Imagine this: you open the prototype in a browser, and there are two buttons—Enter as User or Enter as Driver.
Pretty straightforward, right?

If you pick Driver, the app starts sending your location (latitude and longitude) to the server every few seconds.

If you pick User, you see the driver’s location updating live on a map.

To test it, I opened the driver page on my phone and the user page on my laptop. I walked around a bit with my phone, and on my laptop, I could see my position moving on the map in real-time. It felt satisfying, like “haan, this is working!” But this was just a prototype. In a real app, you’d need proper authentication, middleware, and all that stuff. Here, my focus was on the core logic: how to send the driver’s location to the user continuously, without any hiccups.

Server 1: The Basic WebSocket Setup

Let’s start with the simplest way I did this, using WebSockets. The code for this is in

1. server (socket)/src/websockets/location.gateway.ts

Here’s how it works, step-by-step:

Driver Sends Location: The driver’s app connects to the server using WebSockets and sends a send-location event with their latitude and longitude every few seconds. Think of it like the driver saying, “Hey server, here’s where I am right now!”
Server Broadcasts It: The server listens for this event and sends the location to all connected clients (like the user’s app) using a receive-location event. It’s like the server shouting, “Everyone, here’s the driver’s new position!”
User Updates Map: The user’s app listens for receive-location events and moves the driver’s dot on the map. Simple and quick.

For a small setup, this works like a charm. But then I started thinking—what if there are hundreds or thousands of drivers? Will this still hold up?

Is This Scalable? Not Quite

Here’s where I hit a wall:

Too Many Connections: Every WebSocket connection uses server resources—CPU, memory, etc. With thousands of drivers and users, one server can’t handle it alone. It’ll slow down or crash.
Wasting Data: The server sends every driver’s update to all users. So if there are 100 drivers, each user gets 100 updates every few seconds, even though they only care about their own driver. That’s a lot of useless data clogging the system.
Adding More Servers: If I add more servers to share the load, how do I make sure the right updates reach the right users? Without some clever trick, it’s a headache. Assuming you're a clever programmer, feel free to drop any tricky solutions in the comments 🙂

Verdict: This is fine for a prototype or a small app with less than 100 drivers. But for a big delivery app? No chance—it’ll break.

Server 2: Adding Redis Pub/Sub

So, I needed a better way. That’s when I brought in Redis Pub/Sub. Redis is this super-fast in-memory store, and its publish-subscribe system is perfect for scaling real-time stuff. Check the code in

2. server (socket + redis pub-sub)/src/websockets/location.gateway.ts. Here’s how I made it work, step-by-step:

2. server (socket + redis pub-sub)/src/websockets/location.gateway.ts

Driver Publishes Location: When the driver sends a send-location event, the server doesn’t broadcast it directly. Instead, it publishes the location to a Redis channel called location-updates. Here’s the code:

   @SubscribeMessage('send-location')
   handleLocation(client: Socket, data: { latitude: number; longitude: number }) {
     const locationData = {
       id: client.id,
       latitude: data.latitude,
       longitude: data.longitude,
     };
     this.pubSubService.publish('location-updates', JSON.stringify(locationData));
   }

Server Subscribes and Targets Updates: The server subscribes to the location-updates channel and sends the update only to specific users using WebSocket rooms. Each driver has a room (named after their ID), and users join that room to track them. Here’s how it’s set up in the constructor:

   constructor(private pubSubService: PubSubService) {
     this.pubSubService.subscribe('location-updates', (message) => {
       const locationData = JSON.parse(message);
       this.server.to(locationData.id).emit('receive-location', locationData);
     });
   }

And when a user wants to track a driver:

   @SubscribeMessage('track-driver')
   handleTrackDriver(client: Socket, driverId: string) {
     client.join(driverId);
   }

Scaling with Multiple Servers: Redis makes this easy. Multiple NestJS servers can subscribe to the same location-updates channel. When a driver’s location is published, all servers get it and send it to the right room. No mess, no fuss.

Why This Is Better

Targeted Updates: Only users tracking a specific driver get their updates. No more flooding everyone with data they don’t need.
Horizontal Scaling: Add more servers, and Redis handles the coordination. Each server manages its own clients, and the load gets shared.

This is a big step up from the basic setup. But I found something even better—keep reading!

Server 3: Redis Streams Adapter for the Win

While Redis Pub/Sub was good, I stumbled upon the Redis Streams Adapter for Socket.IO, and it’s like Pub/Sub ka bada bhai 💀—more powerful and reliable. The code for this is in

3. server (socket + redis streams adapter)/src/redis/redis.module.ts.

3. server (socket + redis streams adapter)/src/redis/redis-io-adapter.ts.

3. server (socket + redis streams adapter)/src/websockets/location.gateway.ts.

Here’s how it works, step-by-step:

Set Up the Adapter: I created a RedisIoAdapter in 3. server (socket + redis streams adapter)/src/redis/redis-io-adapter.ts to use Redis Streams with Socket.IO:

   export class RedisIoAdapter extends IoAdapter {
     private redisClient: Redis;
     constructor(app: INestApplication, redisClient: Redis) {
       super(app);
       this.redisClient = redisClient;
     }
     createIOServer(port: number, options?: ServerOptions): any {
       const server = super.createIOServer(port, options);
       server.adapter(createAdapter(this.redisClient));
       return server;
     }
   }

Driver Sends Location: Same as before—the driver sends a send-location event, and the server emits it to their room:

   @SubscribeMessage('send-location')
   handleLocation(client: Socket, data: { latitude: number; longitude: number }) {
     const locationData = {
       id: client.id,
       latitude: data.latitude,
       longitude: data.longitude,
     };
     this.server.to(client.id).emit('receive-location', locationData);
   }

Users Track Drivers: Users join the driver’s room with a track-driver event:

   @SubscribeMessage('track-driver')
   handleTrackDriver(client: Socket, driverId: string) {
     client.join(driverId);
   }

Magic of Streams: The Redis Streams Adapter handles everything else. It distributes updates across all server instances, ensures no messages are lost, and keeps rooms working seamlessly.

Why This Beats Pub/Sub

Here’s a quick comparison:

Feature	Redis Pub/Sub	Redis Streams Adapter
Reliability	If a server is down, it misses updates.	Stores messages, so servers catch up later.
Scalability	Good for medium loads, but struggles with huge volumes.	Uses consumer groups for big scale.
Message Order	Order isn’t always guaranteed.	Strict order, great for tracking.
Ease of Use	You manage pub/sub yourself.	Socket.IO does it all—less code!

Reliability: If a server crashes with Pub/Sub, it misses updates. With Streams, messages are saved, so nothing gets lost.
Scalability: Streams can handle way more drivers and users with consumer groups splitting the work.
Simplicity: No need to write pub/sub logic—Socket.IO handles it behind the scenes.

This is perfect for a large app with lots of users. But what about massive scale? That’s where Kafka comes in.

Future-Proofing with Kafka

Now, imagine your app grows huge—thousands of drivers, millions of users, and you want to do fancy things like analytics or logging alongside tracking. That’s when Kafka enters the picture. It’s a distributed streaming platform built for handling tons of real-time data.

Here’s the basic plan:

Driver sends location via WebSockets (send-location event).
Server pushes it to a Kafka topic, like driver-locations.
A consumer service reads from the topic and sends updates to users via WebSockets.

Kafka is overkill for small apps, but for enterprise-level scale, it’s a game-changer. I’ll add a Kafka setup to my GitHub repo soon—keep an eye out!

What to Tell Frontend Devs

As a backend dev, I was scratching my head about what to tell the frontend team. Turns out, it’s pretty simple:

Driver App:
- Connect to the WebSocket server.
- Send send-location events with latitude and longitude every few seconds.
- Maybe show the driver’s own location on a map, if needed.
User App:
- Connect to the WebSocket server.
- Listen for receive-location events and update the map.
- Send a track-driver event with the driver’s ID to join their room.

That’s it! The frontend devs will love how easy this is—just a few events, and the backend handles the heavy lifting.

Comparing the Approaches

Let’s break it down with a table to see how these methods stack up:

Approach	Pros	Cons	Best For
Basic WebSockets	Easy to set up, works for small apps.	Not scalable, sends too much data.	Prototypes, small apps.
Redis Pub/Sub	Scales better, targets updates.	Misses updates if servers crash.	Medium-sized apps.
Redis Streams Adapter	Reliable, scalable, less code.	Slightly tricky to set up.	Large apps with many users.
Kafka	Handles huge scale, extra features.	Too much for small apps, needs infra.	Enterprise-level apps.

So, that’s the full story! From a basic prototype to scaling for a real delivery app, this is how you make real-time tracking work. The code’s all on GitHub—go check it out.

Next time you’re waiting for your food and watching that driver dot move, you’ll know what’s happening behind the scenes.

Hope this clears things up—let me know if you have questions!

Ultimate VPS Hosting Guide: Simple Steps for Setup, Optimization, and Production Success

Subham — Sun, 22 Dec 2024 05:54:12 +0000

Setting up a Production Ready VPS is a Lot easier than I thought - Best Guide on How to deploy backend code in production

🔥Connect: https://www.subham.online
🔥GitHub: https://github.com/Subham-Maity
🔥Twitter: https://twitter.com/TheSubhamMaity
🔥LinkedIn: https://www.linkedin.com/in/subham-xam
🔥Insta: https://www.instagram.com/subham_xam

Let's be real... Tired of deployment tutorials that leave you hanging? Yeah, me too.

Look, I've noticed something while helping other developers - most guides skip the small but super important steps. You know what happens next? You're stuck with errors at midnight, opening 50 browser tabs trying to figure out what went wrong.

That's why I created this guide. I'll walk you through EVERY single step of deploying your server. Whether you're working with:

Node.js
Go
Spring Boot (Java)
Rust
Django
Laravel
Flask
Or any other server

I'll cover those tiny details that usually trip people up.

Think of this as your friend sitting next to you, helping you deploy your server without pulling your hair out 😅.

Got stuck somewhere? Just comment below or message me directly. I actually answer!

Ready to deploy your server the right way? Let's get started!

1️⃣ First Step - Connect VPS

✅ 1. Choose a Hosting Provider

Purchase a VPS plan from any hosting provider.

✅ 2. Get the Credentials

Whether you're freelancing or working in an office, you'll need three things:

IP address: 568.82.48.166
Username: root
Password: Subham@Xam_08

Example:

568.82.48.166  
root  
Subham@Xam_08

✅ 3. Connect via Terminal

Open your terminal and type:

ssh root@568.82.48.166

✅ 4. Verify the Connection

You'll see a message like this:

The authenticity of host '568.82.48.166 (568.82.48.166)' can't be established.
ED33319 key fingerprint is SHA256:kLP3I9......QgQI.
This key is not known by any other names.

Are you sure you want to continue connecting (yes/no/[fingerprint])?

Just type yes.

✅ 5. Enter the Password

Next, it will prompt:

Warning: Permanently added '568.82.48.166' (ED25519) to the list of known hosts.
root@568.82.48.166's password:

Paste your password (Subham@Xam_08) and press Enter.

(Note: The terminal won't show any characters while typing the password. Just hit Enter.)

✅ 6. Success!

If everything is correct, you'll see:

       Welcome to Ubuntu 54.54.1 LTS (GNU/Linux 8.65.0-424-generic x86_64)

       * Documentation:  https://help.ubuntu.com
       * Management:     https://landscape.canonical.com
       * Support:        https://ubuntu.com/advantage

       System information as of Sat Dec 21 11:56:39 PM UTC 2024

       System load:  0.01555554443125      Processes:               292
       Usage of /:   2.1% of 20000.02GB   Users logged in:         0
       Memory usage: 5%                 IPv4 address for kms160:               568.82.48.166
       Swap usage:   0%

       * Strictly confined Kubernetes makes edge and IoT secure. Learn how MicroK8s
       just raised the bar for easy, resilient and secure K8s cluster deployment.

       https://ubuntu.com/engage/secure-kubernetes-at-the-edge

       137 updates can be applied immediately.
       To see these additional updates run: apt list --upgradable


       *** System restart required ***
       Last login: Mon Dec  9 06:55:53 2024 from 203.145.52.235
       root@ajfaljflaf:~#

What does root@ajfaljflaf:~# mean?

This prompt confirms you are logged in to the server with the hostname ajfaljflaf as the root user. You're now ready to execute commands and set up your server.

2️⃣ Second Step - Ready Your System

✅ 1. Clear the Terminal

Once logged in, type:

    clear

✅ 2. Verify Directories

Check your current directory and list files:

    pwd
    ls

Example output:

    root@hdicj8psx6:~# pwd  
    /root  
    root@hdicj8psx6:~# ls  
    snap

✅ 3. Update the Package List

Refresh the package list to ensure the latest updates:

    sudo apt update

Example output:

    Hit:1 http://archive.ubuntu.com/ubuntu jammy InRelease  
    Get:3 http://archive.ubuntu.com/ubuntu jammy-updates InRelease [128 kB]  
    Ign:4 https://ppa.launchpadcontent.net/certbot/certbot/ubuntu jammy InRelease  
    Err:5 https://ppa.launchpadcontent.net/certbot/certbot/ubuntu jammy Release  
      404  Not Found [IP: 185.125.190.80 443]  
    Reading package lists... Done

If you encounter warnings or errors, review them to ensure they don’t block essential updates.

✅ 4. Upgrade Installed Packages

Install available updates and upgrades:

    sudo apt upgrade

Example prompt:

    124 upgraded, 13 newly installed, 0 to remove, and 0 not upgraded.  
    Need to get 537 MB of archives.  
    After this operation, 679 MB of additional disk space will be used.

Type yes to continue.

✅ 5. Handle Upgrade Prompts

During the upgrade, you may see configuration prompts:

Example 1: Confirm Actions Select "OK" using the Tab key and press Enter:

Example 2: Choose Defaults Select default options or make your changes, then press Enter:

(Note: You need to use tab key for switching the option)

Review Upgrade Completion

Upon successful upgrade, you'll see messages about restarting services:

Restarting services...  
/etc/needrestart/restart.d/systemd-manager  
systemctl restart nginx.service polkit.service ssh.service udisks2.service  
Service restarts being deferred:  
systemctl restart networkd-dispatcher.service  
systemctl restart systemd-logind.service

This confirms that services have been restarted or deferred as necessary.

3️⃣ Third Step - Install Dependencies and Clone Repository with Proper Authentication

✅ 1. Install Node.js

To install Node.js, run:

   sudo apt install nodejs

This will install Node.js.

✅ 2. Install Git

To install Git, run:

   sudo apt install git

✅ 3. Push Your Repository to GitHub

If your code is not already pushed to GitHub, follow these steps on your local machine:

   # 1. Initialize a new Git repository in your project folder
   git init

   # 2. Add all files to the staging area
   git add .
   # Or add specific files
   git add filename.txt

   # 3. Make your first commit
   git commit -m "Initial commit"

   # 4. On GitHub:
   # - Create a new repository
   # - Copy the repository URL (ends with .git)

   # 5. Link your local repo to the GitHub repository
   git remote add origin https://github.com/username/repository.git

   # 6. Push your code to GitHub
   # If using 'main' branch (recommended)
   git push -u origin main

   # If using legacy 'master' branch
   git push -u origin master

Additional Useful Commands:

   # Check repository status
   git status

   # Check remote connection
   git remote -v

   # If you need to rename your branch from master to main
   git branch -M main

Note: If you encounter authentication errors, you need to:

Set up an SSH key.
Use a personal access token instead of a password.
Use GitHub CLI (gh) for authentication.

For guidance, refer to this guide.

✅ 4. Clone the Repository

Copy the HTTPS link from GitHub:

Example:

Clone the repository:

 git clone git@github.com:Subham-Maity/xyz.git

If it's your first time connecting, you'll see a message like this:

   Cloning into 'xyz'...
   The authenticity of host 'github.com (60.404.404.404)' can't be established.
   ED26619 key fingerprint is SHA256:+DiYfsfsfsf....4UvCOqU.
   This key is not known by any other names.
   Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
   Warning: Permanently added 'github.com' (Exxx519) to the list of known hosts.
   git@github.com: Permission denied (publickey).
   fatal: Could not read from remote repository.

   Please make sure you have the correct access rights.

✅ 5. Resolve Authentication Issues

If you encounter the above error, follow these steps:

Install the GitHub CLI (gh):
```
 sudo apt install gh
```

Authenticate with GitHub:

 gh auth login

Follow the prompts:

Choose GitHub.com.
Select HTTPS for the protocol.
Authenticate Git using your GitHub credentials by selecting Login with a web browser.

Example prompts:

 ? What account do you want to log into?  
 > GitHub.com  
 ? What is your preferred protocol for Git operations?  
 > HTTPS  
 Authenticate Git with your GitHub credentials? (Y/n)  
 y  
 ? How would you like to authenticate GitHub CLI?  
 > Login with a web browser  
 ! First copy your one-time code: 40DE-1645  
 - Press Enter to open github.com in your browser...

Copy the one-time code and open the link in your browser.
Log into your GitHub account and paste the code.
Return to your terminal:

   ✓ Authentication complete. Press Enter to continue...
   - gh config set -h github.com git_protocol https
   ✓ Configured git protocol
   ✓ Logged in as Subham-Maity

✅ 6. Add SSH Key to GitHub

Refer to this guide to add your SSH key to GitHub.

✅ 7. Clone the Repository Again

Once the SSH key is added, clone your repository:

   git clone git@github.com:username/repository.git

✅ 8. Verify Cloning

After cloning, check if the repository is present:

ls

4️⃣ Fourth Step - Setup Your Project

✅ 1. Navigate to Your Project Directory

First, list the directories to locate your project:

ls

Then, move into your project folder:

cd <your-project-name>

Tip: Type the first 2-3 letters of your project folder and press the Tab key to auto-complete the name.

✅ 2. Install Project Dependencies

Run the following command inside your project folder to install the necessary packages:

npm i

This might take a few minutes, depending on the size of the project.

✅ 3. Set Up the .env File

If your project doesn’t have a .env file (usually excluded in non-private repositories), you can create one to store your environment variables:

Open a new file named .env in your project directory:

   nano .env

Add your variables in the following format:

   DB_HOST=your-database-host
   DB_USER=your-database-username
   DB_PASSWORD=your-database-password
   PORT=3000
   SECRET_KEY=your-secret-key

Save and exit the editor:
- Press Ctrl + O, then Enter to save.
- Press Ctrl + X to exit.

✅ 4. Verify .env Configuration

Check if your .env file exists and is properly configured:

cat .env

✅ 5. Run the Application

Finally, start your application using:

npm start

OR, if you're using a framework or script, follow its specific command, such as:

npm run dev

Note: If you encounter errors, review the .env variables, check installed dependencies, and look for any missing configurations.

Here’s a rewritten version of the content with better structure, clarity, and formatting:

5️⃣ Fifth Step - Start Your Project

Install PM2

To keep your application running continuously, you can use PM2, a powerful process manager for Node.js applications. It allows for zero-downtime restarts and simplifies DevOps tasks.

Run the following command to install PM2 globally:

npm i -g pm2

Starting Your Application

If you're using NestJS, follow this detailed guide to deploy your NestJS app with PM2:

🔗 Deploy NestJS App Using PM2 on Linux Ubuntu Server

If you're working with a Node.js application, you can refer to this guide:

🔗 How to Start Node.js App with PM2

Once your setup is ready, start your server by typing:

npm start

Open your browser and navigate to:

http://<your-server-IP>:3333/xam

For example:

http://404.89.46.183:3333/xam

📝 Handling Common Issues

⭐ Firewall Blocking Your Site

If the server isn’t accessible, it might be due to a firewall issue. First, verify the firewall rules with:

sudo iptables -L

This command lists all current firewall rules. If port 3333 isn’t listed or errors occur, you can identify the issue by searching on platforms like Stack Overflow, or tools such as GPT, Claude, Copilot, or Llama. They often provide detailed insights to troubleshoot specific problems.

⭐ Updating Firewall Rules

If the firewall blocks incoming traffic on port 3333, update the rules with:

sudo iptables -A INPUT -p tcp --dport 3333 -j ACCEPT

Command Breakdown:
-A INPUT: Append a rule to the INPUT chain.
-p tcp: Specify the TCP protocol.
--dport 3333: Define port 3333.
-j ACCEPT: Allow traffic on this port.

Now verify the updated rules:

sudo iptables -L

You should see something like this:

ACCEPT     tcp  --  anywhere             anywhere             tcp dpt:3333

⭐ Persisting Firewall Rules

To ensure the firewall rules remain after a reboot, install the netfilter-persistent package:

sudo apt install netfilter-persistent

Save the rules with:

sudo netfilter-persistent save

⭐ Managing PM2 Processes

Start Your Application with PM2

Use the following command to start your server with PM2:
```
   pm2 start dist/main.js --name server -f
```
The -f flag forces PM2 to restart the process.
Delete Unused Processes

If there are processes from previous runs, you can delete them using their IDs:

   pm2 delete 0
   pm2 delete 1

This ensures no conflicts occur with duplicate processes.

6️⃣ Sixth Step - Point Your Domain to the Server

✅ 1. Buy a Domain

Purchase a domain from a trusted provider like:

GoDaddy
Namecheap
Google Domains

✅ 2. Log in to Your Domain Provider

Access Your Account

Log in to your domain provider’s website using your credentials.
Navigate to Domain Settings

Find the domain you want to point to your server and locate the DNS settings or DNS management section.
Update DNS Records
- Look for the option to add or edit DNS records.
- If prompted, set the nameservers to your hosting provider’s nameservers. (Nameservers act like the internet’s phone book. When you type a domain name into your browser, nameservers tell your computer where to find the website.)

✅ 3. Add an A Record

To point your domain to your server, add an A record with the following details:

Type: A
Name: @ or your domain name (e.g., xyz.com)
Points to: Your server’s IP address (e.g., 222.22.22.222)
TTL: 1 hour (or the default value)

Example:

✅ 4. Verify DNS Propagation

To check if the DNS changes have taken effect, open a terminal and run:

nslookup yourdomain.com

Example output:

> nslookup xyz.com
Server:  WowWOW
Address:  222.222.222.222

Non-authoritative answer:
Name:    xyz.com
Address:  222.222.222.222

Note: DNS changes can take up to 24 hours to propagate globally. Be patient!

7️⃣ Seventh Step - Install and Configure Nginx

✅ 1. Install Nginx

Nginx is a high-performance web server that can act as a reverse proxy, load balancer, and HTTP cache. Install it using:

sudo apt install nginx

✅ 2. Navigate to Nginx Configuration

Go to the Nginx configuration directory:

   cd /etc/nginx

List the files to familiarize yourself with the structure:

ls

Example output:

   conf.d  fastcgi.conf  fastcgi_params  koi-utf  koi-win  mime.types  modules-available  modules-enabled  nginx.conf  proxy_params  scgi_params  sites-available  sites-enabled  snippets  uwsgi_params  win-utf

✅ 3. Edit the Default Configuration

Open the default configuration file in a text editor (e.g., vim):

   sudo vim /etc/nginx/sites-available/default

Locate the server_name directive and update it with your domain:

   server_name xyz.com www.xyz.com;

Example:

Scroll down to the location / block and replace it with the following:

   location / {
       proxy_pass http://localhost:3333;  # Replace with your app's port
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
   }

✅ 4. Test and Restart Nginx

Test the Nginx configuration to ensure there are no syntax errors:

   sudo nginx -t

Expected output:

  ```text
  nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
  nginx: configuration file /etc/nginx/nginx.conf test is successful
 ```

Restart Nginx to apply the changes:

   sudo nginx -s reload

✅ 5. Verify Your Setup

Open your browser and navigate to your domain (e.g., http://xyz.com). You should see your application running!

📝 Troubleshooting Tips

Firewall Issues: Ensure port 80 (HTTP) and 443 (HTTPS) are open in your firewall. Use:

  sudo ufw allow 80
  sudo ufw allow 443

Nginx Errors: Check the Nginx error logs for details:

  sudo tail -f /var/log/nginx/error.log

8️⃣ Eighth Step - Install SSL Certificate with Certbot

✅ 1. Install Certbot

Certbot is a free, open-source tool that automates the installation and renewal of SSL certificates. To install Certbot, follow these steps:

Add the Certbot repository:

   sudo add-apt-repository ppa:certbot/certbot

Press Enter to confirm.

Update your package list:

   sudo apt-get update

Install Certbot for Nginx:

   sudo apt-get install python3-certbot-nginx

✅ 2. Generate an SSL Certificate

Once Certbot is installed, you can generate an SSL certificate for your domain. Run the following command:

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Replace yourdomain.com with your actual domain name.
If you have subdomains, you can add them using additional -d flags (e.g., -d subdomain.yourdomain.com).

Example:

sudo certbot --nginx -d xyz.com -d www.xyz.com -d api.xyz.com

Certbot will automatically configure Nginx to use the SSL certificate and redirect HTTP traffic to HTTPS.

✅ 3. Verify SSL Installation

After the process completes, open your browser and visit:

https://yourdomain.com

You should see a padlock icon in the address bar, indicating that your site is secured with SSL.

✅ 4. Automate Certificate Renewal

Certbot certificates are valid for 90 days. To ensure your certificate is renewed automatically, Certbot sets up a cron job or systemd timer. However, you can manually test the renewal process with:

sudo certbot renew --dry-run

This command simulates the renewal process and ensures everything is working correctly. If the test is successful, Certbot will automatically renew your certificates before they expire.

📝 Troubleshooting Tips

Firewall Configuration: Ensure ports 80 (HTTP) and 443 (HTTPS) are open in your firewall:

  sudo ufw allow 80
  sudo ufw allow 443

Nginx Configuration Errors: If Certbot fails to configure Nginx, check the Nginx error logs:

  sudo tail -f /var/log/nginx/error.log

Certificate Not Working? If your site doesn’t load over HTTPS, verify that the SSL certificate is correctly installed:

  sudo certbot certificates

Now your website is secured with an SSL certificate, and Certbot will handle renewals automatically. Enjoy a safer and more professional web presence! 🔒🎉

OOPS in JAVA - Ultimate

Subham — Mon, 04 Nov 2024 05:35:21 +0000

🔥Repo: https://github.com/Subham-Maity/Object-Oriented-Programming-For-Beginners

🔥GitHub: https://github.com/Subham-Maity

🔥Twitter: https://twitter.com/TheSubhamMaity

🔥LinkedIn: https://www.linkedin.com/in/subham-xam

🔥Insta: https://www.instagram.com/subham_xam

✅ Looking for the best notes on OOP concepts in JS? Here’s one for you:

> "OOPS in JS - Ultimate" - Check This

I originally put these notes together back in college, so if you’re working through OOP concepts in Java, they might save you some time. Thought I'd share in case it helps anyone out feel free to check them out!

👉🏽 Extra Notes

⭐ Revision and Quick Short Notes for Interview
🤔 Why Java Platform Independent

👉🏽 Start here

📝 Introduction to Object-Oriented Programming
🧰 Basic Terminologies
🛠️ Creating Our Own Java Class
📖 Chapter 1 - Question-Answer Practice Set
🔐 Access Modifiers, Getters & Setters
🔨 Constructors in Java
📘 Chapter 2 - Question-Answer Practice Set
🧬 Inheritance Overview in Java
🌐 Types of Inheritance
🔄 Constructors in Inheritance
🚀 Method & Method Overloading, Void Keyword
- 🔸 Syntax of a method
- 🔸 Method returns the sum of two numbers
- 🔸 Calling a Method
- 🔸 Process of method invocation
- 🔸 Overloaded function foo
- 🔸 Method overloading Type 1 - By changing the return type
- 🔸 Method overloading Type 1 - By changing the number of arguments passed
- 🔸 Can we overload java main() method
- 🔸 Method Overloading and Type Promotion
📏 Static Keyword
- 🔸 Java Static Variable
- 🔸 With Static Variable
- 🔸 Restriction on Static method
- 🔸 Static Method
- 🔸 Static block
- 🔸 Static Class
🔢 Variable Arguments (VarArgs)
🔁 this & super Keyword
- 🔸 Without This Keyword
- 🔸 With This Keyword
- 🔸 Without Super Keyword
- 🔸 With Super Keyword
🧩 Method Overriding
- 🔸 Without Method Overridin
- 🔸 With Method Overriding
🔄 Overloading and Overriding
📊 Dynamic Method Dispatch
📗 Chapter 3 - Question-Answer Practice Set
🧾 Quick One Question-Answer on Chapter 1, 2 & 3
🔍 Abstract Class & Abstract Methods
🖇️ Introduction to Interfaces
⚖️ Abstract Classes Vs Interfaces
🚫 Why Multiple Inheritance is Not Supported in Java
- 🔸 Try to implement Multiple Inheritance
- 🔸 Multiple Inheritance Using Interface
⚙️ Java Interfaces Example & Default Methods
🏗️ Inheritance in Interfaces
🔀 Polymorphism Concept in Interfaces
📙 Chapter 4 - Question-Answer Practice Set
📝 College Level Q&A on Chapters 1, 2, 3 & 4
🛠️ Projects on Chapters 3 & 4 (Basic & Advance)
💻 Interpreted vs Compiled Languages
📂 Is Java Interpreted or Compiled?
⚙️ Java File Compilation Process
📦 Packages in Java
🛠️ Creating a Custom Package
🔓 Access Modifiers Experiment
- 🔸 AccessModifier
- 🔸 OutSidePackageExperiment
- 🔸 OutSidePackageSubclassExperiment
📘 Chapter 5 - Question-Answer Practice Set
🧾 Quick One Question-Answer on Chapter 5
📘 Wrapper Classes in Java
- 🔸 Converting int to Integer (Primitive to Wrapper)
- 🔸 Converting Integer to int (Wrapper to Primitive)
- 🔸 Autoboxing (Detailed Explanation)
- 🔸 Unboxing (Detailed Explanation)
- 🔸 Demonstrate Wrapping and Unwrapping
🔗 Constructor Chaining in Java
- 🔸 Using Super Keyword in Another Class
- 🔸 Using This Keyword in the Same Class
🔐 Private Constructors and Singleton Classes
- 🔸 Using Private Constructors in Singleton Pattern
- 🔸 Example
🔄 Types of Polymorphism
- 🔸 Compile-time Polymorphism
- 🔸 Run-time Polymorphism
🛡️ Encapsulation Idea
- 🔸 Java Encapsulation
- 🔸 Data Hiding
🔍 Nested Interface in Java
⚙️ Modifiers Types

Is Redux Dead? Why I Kicked Redux Out of Our SaaS App

Subham — Tue, 15 Oct 2024 21:54:19 +0000

🔥GitHub: https://github.com/Subham-Maity

🔥Twitter: https://twitter.com/TheSubhamMaity

🔥LinkedIn: https://www.linkedin.com/in/subham-xam

🔥Insta: https://www.instagram.com/subham_xam

A few months ago, I took the plunge and refactored parts of a SaaS app I’ve been working on for a while. We had Redux in there, doing its thing, managing global state. Even with the newer RTK Query approach, which streamlines Redux’s handling of server state, we found ourselves gravitating toward React Query for its straightforward setup and reduced boilerplate... You know, like when you carry around stuff in your backpack that you haven’t touched in months? That’s how it felt.
But as our app grew, so did the complexity. Redux started to feel less like a solution and more like a problem. We were writing more boilerplate than actual logic.

💡 The Redux Dilemma

One day, while battling yet another Redux-related bug, I stumbled upon React Query. I'd heard a lot of buzz around it, but I never thought it could completely replace Redux. Then I gave it a try.

Before (with Redux):

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: (userId) => `users/${userId}`,
    }),
  }),
})

// Component with RTK Query
const UserProfile = ({ userId }) => {
  const { data, isLoading, error } = api.useGetUserQuery(userId);

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={data} />;
};

After (with React Query):

const useUserData = (userId) => {
  return useQuery(['user', userId], () => api.fetchUser(userId));
};

const UserProfile = ({ userId }) => {
  const { data, isLoading, error } = useUserData(userId);

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <UserInfo user={data} />;
};

While both approaches might look similar in this simple example, React Query's simplicity shows in real-world applications. It doesn't require setting up stores or managing additional architectural patterns - it just works out of the box while giving you powerful caching and state management capabilities.

Instead of manually fetching data, writing reducers, dispatching actions, and then updating the store (old pattern of redux), React Query did most of that heavy lifting for us. Pair that with some well-crafted custom hooks, and we had a lean, mean state-management machine.

🤔 But Wait, Is Redux All Bad?

Now, don't get me wrong. Redux isn't the boogeyman. It's a powerful tool that has its place. If you're building an app with complex client-side state that needs to be shared across many unrelated components, If you’re working with deeply nested state, or if you need a more explicit control over the flow of your app but for 90% of cases, especially for handling server state, React Query + custom hooks is more than enough.

So, why the fuss? Sometimes, as devs, we fall into the trap of using what’s familiar, even when there are better tools out there. That’s what happened with me and Redux. I was stuck in my old ways, thinking Redux was the only way to manage state in larger apps. I mean, the whole internet was saying “Redux or bust!” right?

🎭 The Plot Twist

Here's the kicker: by choosing React Query over Redux (even modern Redux), we actually made our app MORE scalable. Counter-intuitive, right? But think about it – with React Query handling our server state and custom hooks managing local state, we had a clearer separation of concerns. Each part of our app became more modular and easier to reason about, without the overhead of Redux's architecture.

✅ Why We Still Choose React Query

Simplicity: React Query required fewer configurations and dependencies, allowing us to start quickly and avoid setup time.
- You need to include Redux as a dependency
- You need to set up Redux store configuration
- It's integrated with Redux's architecture
Bundle Size: When you only need server state management, React Query offers a lighter solution since you don't need to include the entire Redux ecosystem
Flexibility: With React Query, managing server state felt more intuitive, especially for small, isolated pieces of server data.
Learning Curve: For teams not already using Redux, React Query often provides a gentler learning curve

🚀 Why This Approach is Correct:

RTK Query was developed to bridge the gap between Redux and modern server state tools like React Query. However, for server state management, React Query remains a more streamlined choice, offering specialized features for caching, background updates, and retries without Redux’s added setup. For global client state, you can combine React Query with lightweight libraries like Zustand or even use React's Context API. This approach avoids Redux’s heavier infrastructure, keeping your application’s state management both simpler and more performant by focusing React Query on server state and relying on lighter options for global client state.

🏁 Is Redux dead?

Honestly, in the last few months, I’ve seen very few cases where React Query didn’t meet my needs.

So, is Redux dead? Maybe not, but it's definitely not the all-star it used to be for handling server state in modern React apps.

The beauty of React Query lies in its focused approach to solving server state challenges without the additional complexity of a global state management system.

It's not about Redux being bad - it's about choosing the right tool for the job. In our case, React Query proved to be that tool. React Query bring a new level of simplicity and efficiency that’s hard to ignore. For those not tied to Redux, it might be worth exploring if React Query or other dedicated server state solutions could better meet your app’s needs."

So, there you have it. Our journey from Redux addiction to React Query enlightenment. It wasn't always easy – there were moments of doubt, late-night debugging sessions, and more than a few facepalms. But in the end, it was worth it.

The key isn't choosing what's popular or traditional - it's choosing what's right for your specific needs. For us, that was React Query, and we haven't looked back since.

If you're feeling bogged down by Redux in your own app, I encourage you to take a step back and ask yourself: do you really need it? You might be surprised by the answer.

sometimes less is more. Especially when it comes to state management. Now if you'll excuse me, I have some more reducers to delete. Happy coding!

You can also check: Learn RTK Query

OOPS in JS - Ultimate

Subham — Mon, 23 Sep 2024 23:25:10 +0000

🔥Repo: https://github.com/Subham-Maity/OOPS-in-JS-Ultimate

🔥GitHub: https://github.com/Subham-Maity

🔥Twitter: https://twitter.com/TheSubhamMaity

🔥LinkedIn: https://www.linkedin.com/in/subham-xam

🔥Insta: https://www.instagram.com/subham_xam

✅ Looking for the best notes on OOP concepts in JAVA? Here’s one for you:

> "OOPS in JAVA - Ultimate" - Check This

▶️ Intro

⭐ What is OOPs ?

Object-oriented programming is an approach to solving problems by creating objects .

⭐ 4 Pillars of OOP

Terminologies in OOP

Abstraction - Hiding internal details (show only essential info!)
Encapsulation - The act of putting various components together (in a capsule)
Inheritance - The act of deriving new things from existing things
Polymorphism - One entity, many forms

▶️ Prototypes and proto

JavaScript's objects have a special property called prototype that is either null or references another object

When we try to read a property from an object, and it's missing, JavaScript automatically takes it from the prototype. This is called prototype inheritance

⭐ Setting a Prototype

We can set the prototype by setting __proto__. If we read a property from an object that is not in the object but is present in the prototype, JavaScript will take it from the prototype. If we have a method in the object, it will be called from the object. If it's missing in the object and present in the prototype, it will be called from the prototype.

⭐ Example:

//It will work properly
let p = {
    run : () => {
        console.log("run")
    }
}

p.run()//Output: - run

//Let's define another property
let a = {
    name : " subham"
}

a.run() //TypeError: a.run is not a function

//Now with proto
let b = {
    name : " subham"
}
b.__proto__ = p
b.run() //Output: - run

Simply, you can inherit some object’s prototype in another object. This is called prototype inheritance.

//It will work properly
let p = {
    run : () => {
        console.log("p run")
    }
}

p.run()//Output: - p run

//Now with proto
let b = {
    run : () => {
        console.log("b run")
    }
}
b.__proto__ = p
b.run() //Output: - b run

If a property or method is already present in the object, JavaScript will use that property or method. If it's not present in the object but is present in the prototype, JavaScript will take it from the prototype. In this example, since the run method is already present in the b object, it will print 'b run'.

▶️ Classes and Object

In object-oriented programming, a class is a template definition of the methods and variables in a particular kind of object
In object-oriented programming, an object is a specific instance of a class (or struct) which has been allocated in memory.

⭐ Example:

//class
class GoogleForm {
    submit() {
       console.log(this.name + " " + this.roll + " Your form submitted")
    }
    cancel() {
        console.log(this.name + " " + this.roll +" Your form cancelled")
    }
    fill(given_name , roll) {
        this.name = given_name
        this.roll = roll
    }
}


//object
const student1Form = new GoogleForm()

student1Form.fill("Rahul" , 24)

const student2Form = new GoogleForm()

student2Form.fill("Raj" , 25)

student2Form.cancel()


student1Form.submit()

student2Form.submit()

▶️ Constructor

In JavaScript, a constructor is a special function that creates and initializes objects, setting their initial state and properties.

Let's say they forget to fill the form and click on the submit button it will throw undefined!

class Form {

    submit() {
        console.log(this.name + ": Your form is submitted for train number: " + this.trainno)
    }

    cancel() {
        console.log(this.name + ": This form is cancelled for train number: " + this.trainno)
        this.trainno = 0
    }
    fill(givenname, trainno) {
        this.name = givenname
        this.trainno = trainno
    }

}

let myForm1 = new Form()

let myForm2 = new Form()
//
// myForm1.fill("Gaurav", 1234)
//
// myForm2.fill("Rahul", 5678)

myForm1.submit()

myForm2.submit()

myForm2.cancel()

// Output: undefined: Your form is submitted for train number: undefined
// Output: undefined: Your form is submitted for train number: undefined
// Output: undefined: This form is cancelled for train number: undefined

Now create constructor,

class Form {

    constructor() {
        this.name = "Gaurav"
        this.trainno = 0
    }

    submit() {
        console.log(this.name + ": Your form is submitted for train number: " + this.trainno)
    }

    cancel() {
        console.log(this.name + ": This form is cancelled for train number: " + this.trainno)
        this.trainno = 0
    }
    fill(givenname, trainno) {
        this.name = givenname
        this.trainno = trainno
    }

}

let myForm1 = new Form()

let myForm2 = new Form()

// myForm1.fill("Gaurav", 1234)
//
// myForm2.fill("Rahul", 5678)

myForm1.submit()

myForm2.submit()

myForm2.cancel()

// Output: Gaurav: Your form is submitted for train number: 0
// Output: Gaurav: Your form is submitted for train number: 0
// Output: Gaurav: This form is cancelled for train number: 0

⭐ Types of Constructors

Non-Parameterized Constructor: A constructor that has no arguments.

    class Example {
        constructor() {
            this.property = "default value";
        }
    }

Parameterized Constructor: A constructor that takes parameters.

    class Example {
        constructor(value) {
            this.property = value;
        }
    }

Copy Constructor: JavaScript does not have a built-in copy constructor like C++ or Java. However, you can create a method to copy an object.

    class Example {
        constructor(value) {
            this.property = value;
        }

        copy() {
            return new Example(this.property);
        }
    }

    const original = new Example("original value");
    const copy = original.copy();

Unlike languages like C++, JavaScript does not have destructors. Instead, JavaScript relies on an efficient garbage collector that automatically deallocates memory.

▶️ Inheritance

The capability of a class to derive properties and characteristics from another class is called Inheritance.

⭐ Why ?

If you don't know what is Inheritance

class Animal {
    constructor(name, color , age) {
        this.name = name
        this.color = color
        this.age = age
    }
    run() {
        console.log(this.name + ' is running')
    }

    shout() {

        console.log(this.name + ' is shouting')
    }

    sleep() {
        console.log(this.name + ' is sleeping')
    }
}

//If you are nub developer you will do
class Monkey {
    constructor(name, color) {
        this.name = name
        this.color = color
    }
    run() {
        console.log(this.name + ' is running')
    }

    shout() {

        console.log(this.name + ' is shouting')
    }

    sleep() {
        console.log(this.name + ' is sleeping')
    }

    eatBanana() {
        console.log(this.name + ' is eating banana')
    }
}

const animal_1 = new Monkey('Simba monkey', 'Brown', 2)

const animal_2 = new Animal('Donkey', 'White', 3)

animal_1.eatBanana()

animal_2.shout()

If you know

//Parent Class - Base Class
class Animal {
    constructor(name, color , age) {
        this.name = name
        this.color = color
        this.age = age
    }
    run() {
        console.log(this.name + ' is running')
    }

    shout() {

        console.log(this.name + ' is shouting')
    }

    sleep() {
        console.log(this.name + ' is sleeping')
    }
}

//Child Class - Derived Class
class Monkey extends Animal{
    eatBanana() {
        console.log(this.name + ' is eating banana')
    }
    //you can also add new methods
    hide() {
        console.log(this.name + ' is hiding')
    }
}

const animal_1 = new Monkey('Simba monkey', 'Brown', 2)

const animal_2 = new Animal('Donkey', 'White', 3)

animal_1.eatBanana()
animal_1.run()
animal_1.hide()

animal_2.shout()

⭐ Types of Inheritance

Single Inheritance when one class inherits another class, it is known as single level inheritance.

class Shape {
  area() {
    console.log("Displays Area of Shape");
  }
}

class Triangle extends Shape {
  area(h, b) {
    console.log((1/2) * b * h);
  }
}

const triangle = new Triangle();
triangle.area(10, 5); // Output: 25

Hierarchical Inheritance is defined as the process of deriving more than one class from a base class.

class Shape {
  area() {
    console.log("Displays Area of Shape");
  }
}

class Triangle extends Shape {
  area(h, b) {
    console.log((1/2) * b * h);
  }
}

class Circle extends Shape {
  area(r) {
    console.log(3.14 * r * r);
  }
}

const triangle = new Triangle();
triangle.area(10, 5); // Output: 25

const circle = new Circle();
circle.area(7); // Output: 153.86

Multilevel Inheritance is a process of deriving a class from another derived class.

class Shape {
  area() {
    console.log("Displays Area of Shape");
  }
}

class Triangle extends Shape {
  area(h, b) {
    console.log((1/2) * b * h);
  }
}

class EquilateralTriangle extends Triangle {
  constructor(side) {
    super();
    this.side = side;
  }

  area() {
    console.log((Math.sqrt(3) / 4) * this.side * this.side);
  }
}

const equilateralTriangle = new EquilateralTriangle(5);
equilateralTriangle.area(); // Output: 10.825317547305486

Hybrid Inheritance is a combination of simple, multiple inheritance and hierarchical inheritance. JavaScript does not support multiple inheritance directly, but we can achieve similar behavior using mixins.

class Shape {
  area() {
    console.log("Displays Area of Shape");
  }
}

class Triangle extends Shape {
  area(h, b) {
    console.log((1/2) * b * h);
  }
}

class Circle extends Shape {
  area(r) {
    console.log(3.14 * r * r);
  }
}

const mixin = (Base) => class extends Base {
  perimeter() {
    console.log("Calculates Perimeter");
  }
};

class EquilateralTriangle extends mixin(Triangle) {
  constructor(side) {
    super();
    this.side = side;
  }

  area() {
    console.log((Math.sqrt(3) / 4) * this.side * this.side);
  }
}

const equilateralTriangle = new EquilateralTriangle(5);
equilateralTriangle.area(); // Output: 10.825317547305486
equilateralTriangle.perimeter(); // Output: Calculates Perimeter

▶️ Method Overriding

If the same method is defined in both the superclass and the subclass, then the method of the subclass class overrides the method of the superclass

General

class human {
    constructor(name , age , body_type) {
        this.name = name
        this.age = age
        this.body_type = body_type
    }

    getName() {
        console.log("The name of the human is : ", this.name)
    }

    getAge() {

        console.log("The age of the human is :", this.age)
    }

    getBodyType() {
        console.log("The body type of the human is :", this.body_type)
    }
}

class student extends human {}

const student_1 = new student("Subham" , 24 , "Thin")

student_1.getAge() //The age of the human is : 24

⭐ Super Keyword - Types

The super keyword is used to call the parent class's constructor to access its properties and methods.

Overriding the Constructor

class Human {
    constructor(name, age, bodyType) {
        this.name = name;
        this.age = age;
        this.bodyType = bodyType;
    }

    getName() {
        console.log("The name of the human is:", this.name);
    }

    getAge() {
        console.log("The age of the human is:", this.age);
    }

    getBodyType() {
        console.log("The body type of the human is:", this.bodyType);
    }
}

class Student extends Human {
    constructor() {
        super("Rahul", 80, "Fat");
    }
}

const student1 = new Student();

student1.getName(); // The name of the human is: Rahul

Overriding a Method

class Human {
    constructor(name, age, bodyType) {
        this.name = name;
        this.age = age;
        this.bodyType = bodyType;
    }

    getName() {
        console.log("The name of the human is:", this.name);
    }

    getAge() {
        console.log("The age of the human is:", this.age);
    }

    getBodyType() {
        console.log("The body type of the human is:", this.bodyType);
    }
}

class Student extends Human {
    constructor() {
        super("Rahul", 80, "Fat");
    }

    // Overriding using super keyword in child class
    getAge() {
        super.getAge();
        console.log("The age of the student is:", 20);
    }
}

const student1 = new Student();

student1.getAge(); // The age of the human is: 80
                   // The age of the student is: 20

⭐ Key Points of Method Overriding

Same Method Name: The method in the child class must have the same name as in the parent class.
Same Parameters: The method in the child class must have the same parameter list as the parent class method.
IS-A Relationship: Method overriding only occurs in two classes that have an IS-A relationship (inheritance).
Access Modifiers: The overriding method can have a less restrictive access modifier, but not a more restrictive one.
Super Keyword: You can use the super keyword to call the overridden method from the parent class.

⭐ Extra Notes

Note 1

class human {
    constructor() {
        console.log("Human class constructor")
    }
    eat() {
        console.log("Human can eat")
    }
}
class student extends human {
}
const student_1 = new student()
student_1.eat()

//Human class constructor
// Human can eat

If you don’t explicitly define a constructor in a subclass, JavaScript will automatically create one for you that calls the parent class’s constructor using super().
like this

class human {
    constructor() {
        console.log("Human class constructor")
    }
    eat() {
        console.log("Human can eat")
    }
}
class student extends human {
    constructor(...arg) {
        super(...arg);
    }
}
const student_1 = new student()
student_1.eat()

Note 2

class human {
    constructor() {
        console.log("Human class constructor")
    }
    eat() {
        console.log("Human can eat")
    }
}
class student extends human {
    constructor() {
        console.log("This is student class constructor")
    }
}
const student_1 = new student()
student_1.eat()

// console.log("This is student class constructor")
//ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

You have to use super keyword like this

class human {
    constructor() {
        console.log("Human class constructor")
    }
    eat() {
        console.log("Human can eat")
    }
}
class student extends human {
    constructor() {
        super()
        console.log("This is student class constructor")
    }
}
const student_1 = new student()
student_1.eat()

Note 3

class human {
    constructor(name) {
        console.log("Human class constructor" , name)
        this.name = name
    }
    eat() {
        console.log("Human can eat")
    }
}
class student extends human {
    constructor(name) {
        this.name = name //not allow
        super()
        console.log("Student class constructor" , name)

    }
}
const student_1 = new student("subham")
student_1.eat()

// this.name = name
// ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

After super keyword you can use this

class human {
    constructor(name) {
        console.log("Human class constructor" , name)
        this.name = name
    }
    eat() {
        console.log("Human can eat")
    }
}
class student extends human {
    constructor(name) {
        super()
        this.name = name
        console.log("Student class constructor" , name)

    }
}
const student_1 = new student("subham")
student_1.eat()

// Human class constructor undefined
// Student class constructor subham
// Human can eat

▶️ Method Overloading

Having two or more methods (or functions) in a class with the same name and different arguments (or parameters)

⭐ Can We Overload a Function in JavaScript?

In JavaScript, method overloading as seen in some other languages (like Java) is not natively supported. This means you cannot define multiple methods with the same name but different parameters in the same class. However, you can achieve similar functionality using techniques like checking the number and type of arguments within a single method.

You can't do this in JS

class Calculator {
    add(a, b) {
        return a + b;
    }

    add(a, b, c) {
        return a + b + c;
    }
}

const calc = new Calculator();
console.log(calc.add(1, 2)); // This will throw an error because the first add method is overwritten

If you want, you can achieve by doing this

class Calculator {
    add(...args) {
        if (args.length === 2) {
            return args[0] + args[1];
        } else if (args.length === 3) {
            return args[0] + args[1] + args[2];
        } else {
            throw new Error("Invalid number of arguments");
        }
    }
}

const calc = new Calculator();

console.log(calc.add(1, 2)); // Output: 3
console.log(calc.add(1, 2, 3)); // Output: 6

▶️ Access Modifiers

Access modifier is a keyword that is used to set the accessibility of a class member

⭐ Types of Access Modifiers

Public: Members declared as public are accessible from any other class.
Protected: Members declared as protected are accessible within the same class and by derived class instances.
Private: Members declared as private are accessible only within the same class.

⭐ Accessibility Table

Modifier	Parent Class	Child Class	Outside Class
Public	✔️	✔️	✔️
Protected	✔️	✔️	❌
Private	✔️	❌	❌

⭐ Example

1. Public Members

Public members are accessible from anywhere.

class Parent {
    publicProperty = "I'm public";

    publicMethod() {
        return "This is a public method";
    }
}

class Child extends Parent {
    useParentPublic() {
        console.log(this.publicProperty);
        console.log(this.publicMethod());
    }
}

const parent = new Parent();
const child = new Child();

console.log(parent.publicProperty);  // Output: I'm public
console.log(parent.publicMethod());  // Output: This is a public method
child.useParentPublic();
// Output: 
// I'm public
// This is a public method

In this example, publicProperty and publicMethod are accessible from:

Within the Parent class
Within the Child class
Outside any class

2. Protected Members (Simulated)

In JavaScript, we use an underscore prefix to indicate protected members by convention. They're still technically public, but developers agree not to access them directly outside the class or its subclasses.

class Parent {
    _protectedProperty = "I'm protected";

    _protectedMethod() {
        return "This is a protected method";
    }
}

class Child extends Parent {
    useParentProtected() {
        console.log(this._protectedProperty);
        console.log(this._protectedMethod());
    }
}

const parent = new Parent();
const child = new Child();

child.useParentProtected();
// Output:
// I'm protected
// This is a protected method

// These work, but violate the convention:
console.log(parent._protectedProperty);
console.log(parent._protectedMethod());

In this scenario:

_protectedProperty and _protectedMethod are accessible within Parent
They're also accessible within Child (inheritance)
They're technically accessible outside, but this violates the convention

3. Private Members

Private members are truly private and only accessible within the class they're defined in.

class Parent {
    #privateProperty = "I'm private";

    #privateMethod() {
        return "This is a private method";
    }

    usePrivate() {
        console.log(this.#privateProperty);
        console.log(this.#privateMethod());
    }
}

class Child extends Parent {
    tryToUseParentPrivate() {
        // These would cause errors if uncommented:
        // console.log(this.#privateProperty);
        // console.log(this.#privateMethod());
    }
}

const parent = new Parent();
const child = new Child();

parent.usePrivate();
// Output:
// I'm private
// This is a private method

// These would cause errors:
// console.log(parent.#privateProperty);
// console.log(parent.#privateMethod());
// child.tryToUseParentPrivate();

In this case:

#privateProperty and #privateMethod are only accessible within Parent
They're not accessible in Child, even though it extends Parent
They're not accessible outside the class at all

Key Takeaways

Public members (default) are accessible everywhere.
Protected members (convention with _) are accessible within the class and subclasses, but shouldn't be accessed outside (though technically they can be).
Private members (with #) are only accessible within the defining class, not in subclasses or outside.
When using protected members, they behave like public members in terms of accessibility, but developers agree to treat them as if they were protected.
True privacy and encapsulation are only achieved with private members using the # syntax.

▶️ Static

The static keyword defines a static method or field for a class

A static method is a method that belongs to the class itself, not to any specific instance of the class.

class Animal {
    constructor(name) {
        this.name = Animal.capitalize(name);
    }

    static capitalize(name) {
        return name.charAt(0).toUpperCase() + name.slice(1);
    }

    walk() {
        console.log(`Animal ${this.name} is walking`);
    }
}

const animal = new Animal("lion");
animal.walk(); // Output: Animal Lion is walking

console.log(Animal.capitalize("elephant")); // Output: Elephant

Key points:

The capitalize method is declared as static using the static keyword.
It's called on the class (Animal.capitalize) not on instances.
It can be used inside the constructor or other methods using the class name.

⭐ Inheritance and Static Methods

Static methods are inherited by subclasses:

class Human extends Animal {
    static greet() {
        console.log("Hello!");
    }
}

const human = new Human("john");
human.walk(); // Output: Animal John is walking

console.log(Human.capitalize("sarah")); // Output: Sarah
Human.greet(); // Output: Hello!

Note:

The Human class inherits the static capitalize method from Animal.
Human can also define its own static methods, like greet.

⭐ Calling Static Methods from Non-Static Methods

You can call static methods from non-static methods, but you need to use the class name:

class Calculator {
    static add(a, b) {
        return a + b;
    }

    multiply(a, b) {
        // Using a static method in a non-static method
        return Calculator.add(a, 0) * b;
    }
}

const calc = new Calculator();
console.log(calc.multiply(3, 4)); // Output: 12
console.log(Calculator.add(5, 6)); // Output: 11

⭐ Static Methods vs. Instance Methods

Here's a comparison to illustrate the difference:

class MyClass {
    static staticMethod() {
        return "I'm a static method";
    }

    instanceMethod() {
        return "I'm an instance method";
    }
}

console.log(MyClass.staticMethod()); // Output: I'm a static method

const obj = new MyClass();
console.log(obj.instanceMethod()); // Output: I'm an instance method

// This would throw an error:
// console.log(MyClass.instanceMethod());

// This would also throw an error:
// console.log(obj.staticMethod());

⭐ Use Cases for Static Methods

Utility Functions: Methods that don't require object state.
Factory Methods: Creating instances with special properties.
Cache or Fixed-Configuration: Storing shared data for all instances.

Example of a factory method:

class User {
    constructor(name, role) {
        this.name = name;
        this.role = role;
    }

    static createAdmin(name) {
        return new User(name, "admin");
    }
}

const admin = User.createAdmin("Alice");
console.log(admin.role); // Output: admin

⭐ Key Takeaways

Static methods are defined on the class, not instances.
They're called using the class name: ClassName.methodName().
They can be inherited by subclasses.
They can't directly access instance properties or methods.
They're useful for utility functions, factory methods, and managing class-level data.
You can't call static methods on instances, and you can't call instance methods on the class.

▶️ Getter & Setter

Getters and setters are functions that allow you to get and set object values, respectively

//getter setter
class human {
    constructor(name, age) {
        this._name = name;
    }
    get getName() {
        return this._name;
    }
    set setName(name) {
        this._name = name;
    }
}

const person = new human("", 0);
person.setName = "Raj";
person.setAge = 25;

console.log(person.getName);
console.log(person.getAge);

//Raj
//25

▶️ instanceOf Operator

Check if an object is an instance of a class, subclass, or interface

//getter setter
class human {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    get getName() {
        return this.name;
    }
    set setName(name) {
        this.name = name;
    }
    get getAge() {
        return this.age;
    }
    set setAge(age) {
        this.age = age;
    }
}

const person = new human("", 0);
person.setName = "Raj";
person.setAge = 25;

console.log(person.getName);
console.log(person.getAge);

const person1 = "Subham"

console.log( person instanceof human)//true
console.log( person1 instanceof human)//false

It also returns true for subclass

//getter setter
class human {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    get getName() {
        return this.name;
    }
    set setName(name) {
        this.name = name;
    }
    get getAge() {
        return this.age;
    }
    set setAge(age) {
        this.age = age;
    }
}

class Coder extends human {
    constructor(name, age, language) {
        super(name, age);
        this.language = language;
    }
}

const person = new human("", 0);
const subham = new Coder("subham", 22, "java");
person.setName = "Raj";
person.setAge = 25;


console.log( person instanceof human)
console.log( subham instanceof human)

▶️ Encapsulation

Encapsulation is a way to restrict the direct access to some components of an object

class BankAccount {
    #balance; // Private field

    constructor(initialBalance) {
        this.#balance = initialBalance;
    }

    deposit(amount) {
        if (amount > 0) {
            this.#balance += amount;
        }
    }

    getBalance() {
        return this.#balance;
    }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500
// console.log(account.#balance); // Syntax error: private field

//Encapsulation
const user = {
    firstName: "John",
    lastName: "Doe",
    age: 25,
    getAgeYear: function() {
        return new Date().getFullYear() - this.age;
    }
}
console.log(user.getAgeYear());

▶️ Polymorphism

Polymorphism means "many forms", and it occurs when we have many classes that are related to each other by inheritance.

// Parent class
class Animal {
  makeSound() {
    console.log("The animal makes a sound");
  }
}

// Child classes
class Dog extends Animal {
  makeSound() {
    console.log("The dog barks");
  }
}

class Cat extends Animal {
  makeSound() {
    console.log("The cat meows");
  }
}

// Function to demonstrate polymorphism
function animalSound(animal) {
  animal.makeSound();
}

// Usage
const animal = new Animal();
const dog = new Dog();
const cat = new Cat();

animalSound(animal); // Output: The animal makes a sound
animalSound(dog); // Output: The dog barks
animalSound(cat); // Output: The cat meows

▶️ Abstraction

Abstraction is the concept of hiding complex implementation details and showing only the necessary features of an object.

// Abstraction: Hiding complex implementation details and showing only the necessary features of an object.

// Abstract class
class Vehicle {
    constructor(brand) {
        this.brand = brand;
    }

    // Abstract method
    start() {
        throw new Error("Method 'start()' must be implemented.");
    }

    getBrand() {
        return this.brand;
    }
}

// Concrete class
class Car extends Vehicle {
    start() {
        return `${this.brand} car is starting...`;
    }
}

// Usage
const myCar = new Car("Toyota");
console.log(myCar.getBrand()); // Output: Toyota
console.log(myCar.start());    // Output: Toyota car is starting...

Kth Largest Element in an Array

Subham — Mon, 23 Sep 2024 14:38:36 +0000

#️⃣ Array, Priority Queue, Quick Select

https://leetcode.com/problems/kth-largest-element-in-an-array/description

🔥 Understand Problem

If the array is [8, 6, 12, 9, 3, 4] and k is 2, you need to find the 2nd largest element in this array. First, you will sort the array: [3, 4, 6, 8, 9, 12] The output will be 9 because it is the second-largest element.

✅ Bruteforce

var findKthLargest = function(nums, k) {
    // Sort the array in ascending order
    nums.sort((a, b) => a - b);

    // Return the kth largest element
    return nums[nums.length - k];
};

Explanation:

Sorting the Array: The array is sorted in ascending order using the sort method.
Finding the kth Largest Element: The kth largest element is found by accessing the element at the index nums.length - k.

Time Complexity:

Sorting: The time complexity of sorting an array is (O(nlog n)), where (n) is the length of the array.
Accessing the Element: Accessing an element in an array is O(1).

So, the overall time complexity is O(n log n).

Space Complexity:

In-Place Sorting: The sort method sorts the array in place, so the space complexity is O(1) for the sorting operation.
Overall: Since we are not using any additional data structures, the overall space complexity is O(1).

✅ Better

var findKthLargest = function(nums, k) {
        // Create a min-heap using a priority queue
        let minHeap = new MinPriorityQueue();

        // Add the first k elements to the heap
        for (let i = 0; i < k; i++) {
            //minHeap.enqueue(nums[i]): Adds the element nums[i] to the min-heap.
            minHeap.enqueue(nums[i]);
        }

        // Iterate through the remaining elements
        for (let i = k; i < nums.length; i++) {
            //minHeap.front().element: Retrieves the smallest element in the min-heap without removing it.
            if (minHeap.front().element < nums[i]) {
                // minHeap.dequeue(): Removes the smallest element from the min-heap.
                minHeap.dequeue();
                // Add the current element
                minHeap.enqueue(nums[i]);
            }
        }

        // The root of the heap is the kth largest element
        return minHeap.front().element;
    };

Explanation:

Initial Array: [2, 1, 6, 3, 5, 4]
k = 3: We need to find the 3rd largest element.

Step 1: Add the first k elements to the min-heap

Heap after adding 2: [2]
Heap after adding 1: [1, 2]
Heap after adding 6: [1, 2, 6]

Step 2: Iterate through the remaining elements

Current element = 3
- Heap before comparison: [1, 2, 6]
- Smallest element in heap (minHeap.front().element): 1
- Comparison: 3 > 1
- Action: Remove 1 and add 3
- Heap after update: [2, 6, 3]
Current element = 5
- Heap before comparison: [2, 6, 3]
- Smallest element in heap (minHeap.front().element): 2
- Comparison: 5 > 2
- Action: Remove 2 and add 5
- Heap after update: [3, 6, 5]
Current element = 4
- Heap before comparison: [3, 6, 5]
- Smallest element in heap (minHeap.front().element): 3
- Comparison: 4 > 3
- Action: Remove 3 and add 4
- Heap after update: [4, 6, 5]

Final Step: Return the root of the heap

Heap: [4, 6, 5]
3rd largest element: 4 (the root of the heap)

Time Complexity:

Heap Operations: Inserting and removing elements from the heap takes O(log k) time.
Overall: Since we perform these operations for each of the n elements in the array, the overall time complexity is O(n log k).

Space Complexity:

Heap Storage: The space complexity is O(k) because the heap stores at most k elements.

✅ Best

Note: Even though Leetcode restricts quick select, you should remember this approach because it passes most test cases

//Quick Select Algo

function quickSelect(list, left, right, k)

   if left = right
      return list[left]

   Select a pivotIndex between left and right

   pivotIndex := partition(list, left, right, 
                                  pivotIndex)
   if k = pivotIndex
      return list[k]
   else if k < pivotIndex
      right := pivotIndex - 1
   else
      left := pivotIndex + 1

var findKthLargest = function(nums, k) {
    // Call the quickSelect function to find the kth largest element
    return quickSelect(nums, 0, nums.length - 1, nums.length - k);
};

function quickSelect(nums, low, high, index) {
    // If the low and high pointers are the same, return the element at low
    if (low === high) return nums[low];

    // Partition the array and get the pivot index
    let pivotIndex = partition(nums, low, high);

    // If the pivot index is the target index, return the element at pivot index
    if (pivotIndex === index) {
        return nums[pivotIndex];
    } else if (pivotIndex > index) {
        // If the pivot index is greater than the target index, search in the left partition
        return quickSelect(nums, low, pivotIndex - 1, index);
    } else {
        // If the pivot index is less than the target index, search in the right partition
        return quickSelect(nums, pivotIndex + 1, high, index);
    }
}

function partition(nums, low, high) {
    // Choose the pivot element
    let pivot = nums[high];
    let pointer = low;

    // Rearrange the elements based on the pivot
    for (let i = low; i < high; i++) {
        if (nums[i] <= pivot) {
            [nums[i], nums[pointer]] = [nums[pointer], nums[i]];
            pointer++;
        }
    }

    // Place the pivot element in its correct position
    [nums[pointer], nums[high]] = [nums[high], nums[pointer]];
    return pointer;
}

Explanation:

Initial Array: [3, 2, 1, 5, 6, 4]
k = 2: We need to find the 2nd largest element.

Step 1: Partition the array

Pivot element = 4
Array after partitioning: [3, 2, 1, 4, 6, 5]
Pivot index = 3

Step 2: Recursive Selection

Target index = 4 (since we need the 2nd largest element, which is the 4th index in 0-based indexing)
Pivot index (3) < Target index (4): Search in the right partition [6, 5]

Step 3: Partition the right partition

Pivot element = 5
Array after partitioning: [3, 2, 1, 4, 5, 6]
Pivot index = 4

Final Step: Return the element at the target index

Element at index 4: 5

Time Complexity:

Average Case: The average time complexity of Quickselect is O(n).
Worst Case: The worst-case time complexity is O(n^2), but this is rare with good pivot selection.

Space Complexity:

In-Place: The space complexity is O(1) because the algorithm works in place.

Time Complexity & Space Complexity Understand

Subham — Tue, 10 Sep 2024 15:27:53 +0000

Github

Concept:
Easy Big O Calculation Rules:
How to calculate program's time complexity:
Constraints:
What is space complexity:
How to calculate program's space complexity:
Tips and Tricks for Analyzing Space Complexity:

Concept:

Easy Big O Calculation Rules:

Ignore lower degree terms
Ignore constants

Corrected and formatted calculations:

f(n) = 2n² + 3n → O(n²)
f(n) = 4n⁴ + 3n³ → O(n⁴)
f(n) = n² + log n → O(n²)
f(n) = 3n³ + 2n² + 5 → O(n³)
f(n) = n³/300 → O(n³)
f(n) = 5n²/log n → O(n²)
f(n) = n/4 → O(n)
f(n) = (n+4)/4 → O(n)

Key points:

The highest degree term determines the Big O notation.
Constant coefficients (like 2, 3, 4, 1/300, etc.) are ignored.
Lower degree terms (like n² when n³ is present) are ignored.
Logarithmic terms are considered lower order than polynomial terms.
Division by a constant (like /4) doesn't affect the Big O notation.
Division by a logarithmic term (like /log n) doesn't change the polynomial degree in Big O notation.

How to calculate program's time complexity

1. Print Array

void printArray(int arr[], int n) {
    for(int i = 0; i < n; i++) {
        cout << arr[i] << " ";
    }
    cout << endl;
}

Explanation: The loop runs from 0 to n, meaning it iterates n times.
Time Complexity: O(n)

2. Reverse an Array

void reverse(int arr[], int n) {
    int start = 0;
    int end = n - 1;
    while (start <= end) {
        swap(arr[start], arr[end]);
        start++;
        end--;
    }
}

Explanation: The loop swaps elements from both ends until the middle. This results in approximately n/2 swaps. Since constants are ignored in Big-O notation, it simplifies to O(n).
Time Complexity: O(n)

3. Linear Search

int linearSearch(int arr[], int n, int x) {
    for (int i = 0; i < n; i++) {
        if (arr[i] == x) {
            return i; 
        }
    }
    return -1;
}

Explanation: In the worst case, we may have to check every element of the array, which requires n comparisons.
Time Complexity: O(n)

4. Separate Loops

int a = 0, b = 0;
for (int i = 0; i < N; i++) {
    a = a + rand();
}
for (int j = 0; j < M; j++) {
    b = b + rand();
}

Explanation: The first loop runs N times and the second loop runs M times. Since these are independent loops, their complexities add up.
Time Complexity: O(N) + O(M) = O(N + M)

5. Nested Loop with Independent Loop

int a = 0, b = 0;
for (int i = 0; i < N; i++) {
    for (int j = 0; j < N; j++) {
        a = a + j;
    }
}

for (int k = 0; k < N; k++) {
    b = b + k;
}

Explanation: The first part has a nested loop that runs N * N times, so it has a time complexity of O(N²). The second part has a single loop that runs N times.
Time Complexity: O(N²) + O(N) = O(N²)

6. Nested Loop with Varying Inner Loop

int a = 0;
for (int i = 0; i < N; i++) {
    for (int j = N; j > i; j--) {
        a = a + i + j;
    }
}

Explanation: The outer loop runs N times. The inner loop runs N - i times, which decreases as i increases. This results in a quadratic time complexity because the total number of iterations is proportional to the sum of a series.
Time Complexity: O(N²)

7. Get Minimum and Maximum from Array

#include<iostream>
using namespace std;

int getMin(int num[], int n) {
    int min = INT_MAX;
    for(int i = 0; i < n; i++) {
        if(num[i] < min) {
            min = num[i];
        }
    }
    return min;
}

int getMax(int num[], int n) {
    int max = INT_MIN;
    for(int i = 0; i < n; i++) {
        if(num[i] > max) {
            max = num[i];
        }
    }
    return max; 
}

Explanation: Both getMin and getMax iterate through the array exactly once, performing a comparison at each step.
Time Complexity: O(n) for both functions.

Constraints

1. Basic Benchmark: 10^8 Operations/Second

Modern computers can generally perform around 10^8 operations per second. This is the benchmark for time complexity decisions. Based on this, we estimate what kind of algorithms will perform well given certain input sizes.

2. Input Size Constraints

You'll often see input size constraints like:

1 ≤ n ≤ 1000
1 ≤ n ≤ 10^6
1 ≤ n ≤ 10^9

Each range influences which time complexity is acceptable.

Case 1: 1 ≤ n ≤ 1000

For small input sizes (up to 1000), algorithms with time complexities up to O(n²) are usually acceptable.
Example: If n = 1000, an O(n²) algorithm would perform at most 1000² = 10^6 operations, which is feasible since it's under 10^8.

Suitable time complexities:

O(n)
O(n log n)
O(n²)

Avoid:

O(2ⁿ), O(n!), etc., as they grow extremely fast.

Case 2: 1 ≤ n ≤ 10^6

This is a more common constraint in competitive programming. For n values up to 10^6, algorithms with time complexities around O(n log n) are generally acceptable.
Example: If n = 10^6, an O(n log n) algorithm would perform roughly 10^6 * log(10^6) ≈ 2 × 10^7 operations, which is under the 10^8 threshold.

Suitable time complexities:

O(n)
O(n log n)

Avoid:

O(n²) (as 10^6² = 10^12 operations would take too long).

Case 3: 1 ≤ n ≤ 10^9

This is a large input size, and here you need to ensure that your algorithm runs in O(n) or better, such as O(log n).
Example: For n = 10^9, an O(n) algorithm would perform 10^9 operations, which is close to the upper limit but feasible. However, O(n log n) algorithms might exceed the time limit.

Suitable time complexities:

O(n)
O(log n)
O(1)

Avoid:

O(n log n) and higher, such as O(n²), O(2ⁿ), and O(n!).

3. Common Time Complexities and Their Feasibility

Here’s a summary of how different time complexities behave relative to the input size:

O(1): Constant time, the fastest. Suitable for any input size.
O(log n): Efficient even for very large inputs (e.g., binary search). Suitable up to n = 10^9 or higher.
O(n): Linear time, acceptable for inputs up to n = 10^9.
O(n log n): Slightly slower but often used for sorting algorithms. Suitable for n up to 10^6.
O(n²): Quadratic time, becomes infeasible beyond n = 1000. Suitable only for small inputs.
O(2ⁿ): Exponential time, infeasible beyond very small values of n (e.g., n > 20).
O(n!): Factorial time, grows extremely fast. Suitable only for very small n (e.g., n ≤ 10).

4. Guidelines for Choosing Time Complexity Based on Input Size

For 1 ≤ n ≤ 100: You can afford slower algorithms like O(n²) or even O(2ⁿ).
For 1 ≤ n ≤ 1000: O(n²) is acceptable, but avoid exponential growth algorithms.
For 1 ≤ n ≤ 10^6: Aim for O(n log n) or faster (O(n)).
For 1 ≤ n ≤ 10^9: Stick to O(n) or O(log n) algorithms to ensure your solution runs within the time limit.

5. Example Scenarios

Sorting an Array
- Input size: 1 ≤ n ≤ 10^5
- A sorting algorithm like Merge Sort (O(n log n)) is feasible because n log n for n = 10^5 would yield approximately 2 × 10^6 operations, which is well within the limit.
Finding Pairs in an Array (Brute Force)
- Input size: 1 ≤ n ≤ 10^6
- A brute-force O(n²) solution would perform 10^12 operations for n = 10^6, which would exceed time limits. Instead, use a more efficient approach, like a two-pointer technique or hashing, to reduce the time complexity to O(n).
Binary Search on a Sorted Array
- Input size: 1 ≤ n ≤ 10^9
- A binary search (O(log n)) would perform at most 30 operations for n = 10^9, making it extremely efficient.

Space Complexity

Space complexity refers to the amount of extra memory (space) required by the algorithm, aside from the input data. It is typically expressed in terms of the input size n.

O(1): Constant space, meaning the space required does not grow with input size.
O(n): Linear space, meaning the space grows linearly with the input size.

A simple trick to analyze space complexity:

Look at the memory used by variables, arrays, and recursion.
Only count extra space beyond the input size.

How to calculate program's space complexity

1. Print Array

void printArray(int arr[], int n) {
    for(int i = 0; i < n; i++) {
        cout << arr[i] << " ";
    }
    cout << endl;
}

Explanation: This function does not use any additional space beyond the input array arr. It only uses the input size and a few variables like i, which take constant space.
Space Complexity: O(1) (constant space)

2. Reverse an Array

void reverse(int arr[], int n) {
    int start = 0;
    int end = n - 1;
    while (start <= end) {
        swap(arr[start], arr[end]);
        start++;
        end--;
    }
}

Explanation: The function modifies the array in place, so no additional memory is used apart from the input array and a few constant variables (start, end).
Space Complexity: O(1) (constant space)

3. Linear Search

int linearSearch(int arr[], int n, int x) {
    for (int i = 0; i < n; i++) {
        if (arr[i] == x) {
            return i; 
        }
    }
    return -1;
}

Explanation: The function uses only a constant amount of extra space (loop variable i), so no additional memory is allocated other than the input array.
Space Complexity: O(1) (constant space)

4. Separate Loops

int a = 0, b = 0;
for (int i = 0; i < N; i++) {
    a = a + rand();
}
for (int j = 0; j < M; j++) {
    b = b + rand();
}

Explanation: The loops do not use any additional memory, aside from the two variables a and b and the loop counters i and j. All of these take constant space.
Space Complexity: O(1) (constant space)

5. Nested Loop with Independent Loop

int a = 0, b = 0;
for (int i = 0; i < N; i++) {
    for (int j = 0; j < N; j++) {
        a = a + j;
    }
}
for (int k = 0; k < N; k++) {
    b = b + k;
}

Explanation: Similar to the previous examples, the only extra memory used is for variables (a, b, i, j, k). No additional arrays or complex data structures are created.
Space Complexity: O(1) (constant space)

6. Nested Loop with Varying Inner Loop

int a = 0;
for (int i = 0; i < N; i++) {
    for (int j = N; j > i; j--) {
        a = a + i + j;
    }
}

Explanation: The space complexity remains constant because only a few variables (a, i, j) are used. There is no additional data storage.
Space Complexity: O(1) (constant space)

7. Get Minimum and Maximum from Array

#include<iostream>
using namespace std;

int getMin(int num[], int n) {
    int min = INT_MAX;
    for(int i = 0; i < n; i++) {
        if(num[i] < min) {
            min = num[i];
        }
    }
    return min;
}

int getMax(int num[], int n) {
    int max = INT_MIN;
    for(int i = 0; i < n; i++) {
        if(num[i] > max) {
            max = num[i];
        }
    }
    return max; 
}

Explanation: Both functions use a single variable (min or max) and iterate over the array without requiring any extra memory allocation. The input array is not duplicated or changed.
Space Complexity: O(1) (constant space)

Tips and Tricks for Analyzing Space Complexity

Look for Recursion: Recursive algorithms often use extra memory for the call stack. If a function calls itself n times, the space complexity might be O(n) due to the recursive stack.
Check for Additional Data Structures: If your algorithm creates extra arrays, lists, or other data structures, it increases space complexity. For example:
- Storing a copy of an array → O(n)
- Using a hash table → O(n)
In-Place Algorithms: Algorithms that modify the input directly, without using additional space, typically have O(1) space complexity.
Helper Arrays or Variables: If the algorithm uses an extra array of size n, the space complexity is O(n). If it uses just a few variables, the space complexity is O(1).

Algorithm	Time Complexity	Space Complexity
Print Array	O(n)	O(1)
Reverse an Array	O(n)	O(1)
Linear Search	O(n)	O(1)
Separate Loops	O(N + M)	O(1)
Nested Loop with Independent Loop	O(N²)	O(1)
Nested Loop with Varying Inner Loop	O(N²)	O(1)
Get Minimum and Maximum from Array	O(n)	O(1)

Production Level Context with Next.js (Typescript) 🔥

Subham — Fri, 21 Jun 2024 17:42:52 +0000

🔥Twitter: https://twitter.com/TheSubhamMaity

Setup

First, let's create a file for defining the context (let's call it app-context.ts):

import React from "react";

export interface ContextState {
  name: string;
}

export interface ContextDispatch {
  setName: React.Dispatch<React.SetStateAction<string>>;
}

type ContextProps = ContextState & ContextDispatch;

const defaultState: ContextState = {
  name: "Hello",
};

const defaultDispatch: ContextDispatch = {
  setName: () => {},
};

const defaultContext: ContextProps = {
  ...defaultState,
  ...defaultDispatch,
};

const AppContext = React.createContext<ContextProps>(defaultContext);

export default AppContext;

Now, let's create a file for the provider component (let's call it app-context-provider.tsx):

"use client";
import React, { useState } from "react";
import AppContext, { ContextState, ContextDispatch } from "./appContext";

interface AppProviderProps {
  children: React.ReactNode;
}

const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
  const [name, setName] = useState<string>("Hello");

  const contextState: ContextState = {
    name,
  };

  const contextDispatch: ContextDispatch = {
    setName,
  };

  return (
    <AppContext.Provider value={{ ...contextState, ...contextDispatch }}>
      {children}
    </AppContext.Provider>
  );
};

export default AppProvider;

Finally, let's create a custom hook for using the context (you can put this in a separate file or in the index.ts file):

import { useContext } from "react";
import AppContext from "./appContext";

export function useAppContext() {
  return useContext(AppContext);
}

Now you can use it in your application like this:

Wrap your app or a part of it with the AppProvider:
layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg`}>
        <AppProvider>{children}</AppProvider>
      </body>
    </html>
  );
}

Use the context in your components:

a-component.tsx

"use client";
import React from "react";
import { useAppContext } from "@/context";

const AComponent = () => {
  const { setName } = useAppContext();
  return (
    <div>
      <button
        className="default-button"
        onClick={() => {
          setName("Subham Maity");
        }}
      >
        Change The Name
      </button>
    </div>
  );
};

export default AComponent;

b-component.tsx

"use client";
import React from "react";
import { useAppContext } from "@/context";

const BComponent = () => {
  const { name } = useAppContext();
  return (
    <div>
      <p>{name}</p>
    </div>
  );
};

export default BComponent;

This structure provides better type safety, separates concerns, and is more scalable. It's easier to add new state variables and update functions as your app grows.

Building a Chat with PDF - RAG Application - NextJS and NestJS

Subham — Sun, 02 Jun 2024 11:22:10 +0000

🔥Connect: https://www.subham.online

🔥Twitter: https://twitter.com/TheSubhamMaity

Repo 📚

DEMO

Approach

Introduction

Ever wanted to chat with the content of a PDF, just like you do with ChatGPT? In this blog, I'll show you how I built a system that lets you do exactly that. We'll cover everything from uploading PDFs, processing them to generate vector embeddings, and chatting with the content using a cool interface. This project uses some advanced tech like document processing, vector embeddings, and Docker for easy deployment. Let's dive in!

Project Overview

So, this project is called Chat with PDF - RAG (Retrieval-Augmented Generation). Users can upload PDF files, and the system processes them to generate vector embeddings. These embeddings are stored in a database, and a chat interface uses them to provide context-aware answers to user queries. Everything is containerized with Docker, making it super easy to deploy and scale.

How I Made This Project

Step 1: Setting Up the Environment

First things first, I set up the development environment. Used Node.js, NestJS for the backend, and Next.js for the frontend. We're also using PostgreSQL for data storage, Redis for caching, and BullMQ for handling background tasks.

Step 2: Implementing Document Ingestion

Users can upload PDF files, which get stored in a cloud storage service like AWS S3. The content of these PDFs is extracted and split into smaller chunks.

Step 3: Generating Vector Embeddings

Each content chunk is processed to generate vector embeddings using an API like OpenAI Embeddings. These embeddings are numeric representations that capture the meaning of the text, making it easier to search semantically later.

Step 4: Building the Knowledge Base

The generated embeddings and the corresponding document chunks are stored in a PostgreSQL database. This acts as our knowledge base, making it easy to store and retrieve the embeddings.

Step 5: Implementing the Chat Interface

Users can interact with the PDF content through a chat interface. When a user asks a question, the system converts it into a query embedding and performs a semantic search on the stored document embeddings. The top results are then used to provide context to a large language model (LLM) like GPT-4, which generates a relevant answer.

Step 6: Dockerizing the Application

To ensure the app is easy to deploy and scale, I containerized the backend API and BullMQ worker using Docker. This makes deployment a breeze in any environment that supports Docker.

Logic and Architecture

1. Document Ingestion

User Upload: Users upload a PDF file to S3/Cloudinary.
Extract Content: The content of the PDF is extracted.
Split into Chunks: The extracted content is split into manageable chunks.

2. Generate Embeddings

Generate Embeddings: Each chunk is processed to generate vector embeddings using an embedding API (e.g., OpenAI Embeddings).
Embeddings: These are numeric representations of the chunks, capturing the semantic meaning.

3. Knowledge Base

Store Embeddings: The embeddings and document chunks are stored in a database (like PostgreSQL) that acts as the knowledge base.
Embedding Database: Tools like pgvector, pinecone, faiss, or chromadb can be used for storing and indexing these embeddings.

4. Retrieval

User Question: A user asks a question.
Generate Query Embedding: The question is converted into a vector embedding.
Semantic Search: Using the question embedding, a semantic search is performed on the stored document embeddings.
Ranked Result: Results are ranked based on similarity scores (e.g., cosine similarity).

5. Context to LLM (Large Language Model)

CTX: The top-k similar results are used to provide context to the LLM (e.g., GPT-4, LLaMA 2, Mistral 7B, ChatGPT).
Answer: The LLM uses this context to generate and return a relevant answer to the user.

Example (Entire code in my repo)

With frontend and backend

// 1. Document Ingestion
const uploadedPDF = await uploadFileToS3(pdfFile); // Upload PDF to S3
const pdfContent = await extractContentFromPDF(uploadedPDF.path); // Extract content from PDF
const contentChunks = splitContentIntoChunks(pdfContent); // Split content into smaller chunks

// 2. Generate Embeddings
const embeddingModel = new OpenAIEmbeddings(); // Use OpenAI Embeddings (or any other embedding model)
const embeddings = await Promise.all(contentChunks.map(chunk => embeddingModel.embed(chunk))); // Generate embeddings for each chunk

// 3. Knowledge Base
const vectorStore = new PineconeVectorStore(); // Use Pinecone as the vector store (or any other database/index)
await vectorStore.addDocuments(contentChunks, embeddings); // Store document chunks and embeddings in the vector store

// 4. Retrieval
const userQuestion = "What is the main topic of the PDF?"; // User asks a question
const queryEmbedding = await embeddingModel.embed(userQuestion); // Generate embedding for the user's question
const similarChunks = await vectorStore.search(queryEmbedding, topK=5); // Retrieve top-k similar document chunks

// 5. Context to LLM (Large Language Model)
const llm = new GPT4LLM(); // Use GPT-4 as the LLM (or any other LLM model)
const answer = await llm.generate(similarChunks.map(chunk => chunk.content).join("\n")); // Provide retrieved chunks as context to the LLM to generate an answer
console.log(answer); // Print the generated answer

Conclusion

Building this project was an amazing journey, combining several advanced technologies to create a seamless user experience. From document ingestion and embedding generation to creating a chat interface backed by powerful language models, each step was crucial in making the system robust and user-friendly. I hope this post inspires you to dive into similar projects and explore the vast possibilities of combining document processing and AI.

Scaling Real-Time Communication with Redis Pub/Sub and Socket.IO

Subham — Wed, 08 May 2024 01:32:47 +0000

🔥Connect: https://www.subham.online

🔥Twitter: https://twitter.com/TheSubhamMaity

Problem Statement:

In a scenario where multiple clients (users) need to communicate in real-time, a traditional approach of having a single server would not scale well. As the number of clients increases, the single server would become a bottleneck, leading to performance issues and potential failures. Additionally, if clients are connected to different servers, they would not be able to communicate with each other, resulting in message silos.

Connect 👋

Repo 📚

DEMO

Approach

Multiple Server Instances: Multiple server instances (Server 1, Server 2, Server 3) are deployed to handle the load of connected clients, instead of relying on a single server.
Redis Pub/Sub: A Redis instance acts as a central message broker using its Pub/Sub functionality. Each server instance establishes a connection with Redis, acting as both a publisher and a subscriber.
Publishing Messages: When a client sends a message to the server they are connected to, the server publishes the message to a specific channel (e.g., "chat") in Redis using the Pub/Sub mechanism.
Subscribing to Messages: All other server instances have subscribed to the same channel in Redis. When a message is published, Redis distributes the message to all subscribed servers.
Broadcasting Messages: Each server instance receives the message from Redis and broadcasts it to all the clients connected to that particular server instance.

By utilizing Redis Pub/Sub, the solution decouples message distribution from individual servers. The load is distributed across multiple server instances, ensuring scalability as new instances can be added without affecting communication flow. Clients connected to different server instances can communicate seamlessly, eliminating message silos and enabling real-time communication across the entire system.

Step 1 : Basic Setup (Communication Server-Client)

Commit

server - api/src/chat/chat.gateway.ts

import {
  WebSocketGateway,
  SubscribeMessage,
  MessageBody,
  WebSocketServer,
  OnGatewayConnection, OnGatewayDisconnect,
} from '@nestjs/websockets';
import { ChatService } from './chat.service';
import { Server, Socket } from 'socket.io';
import { Logger } from '@nestjs/common';

/**
 * @WebSocketGateway is a decorator that creates a WebSocket gateway
 * and exposes a specified port (3002) for the WebSocket server.
 * The `cors` option allows cross-origin requests.
 */
@WebSocketGateway(3002,{cors:true})
/*
✅//OnGatewayConnection
 io.on("connection", (socket) => {
    console.log("Client connected");
✅ //OnGatewayDisconnect
 socket.on("disconnect", () => {
      console.log("Client disconnected");
    });
  });
*//**
 * This class implements the OnGatewayConnection and OnGatewayDisconnect interfaces,
 * which provide methods to handle client connections and disconnections.
 *
 * The commented-out code demonstrates how to handle connections and disconnections
 * using the socket.io event listeners `io.on("connection", ...)` and `socket.on("disconnect", ...)`.
 */

export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect{
  private readonly logger = new Logger(ChatGateway.name);
  /**
   * @WebSocketServer() is a decorator that injects the Socket.IO server instance.
   * It allows you to access and interact with the WebSocket server.
   */
  @WebSocketServer() server: Server

  /**
   * This method is called when a new client connects to the WebSocket server.
   * It logs the client's connection, and emits a `user-joined` event to all connected clients,
   * including the client's ID in the event payload.
   */
  handleConnection(client: Socket){
    this.logger.verbose('New client connected', client.id);

    //The event data will only be broadcast to every socket but the sender.
    //instead of this.server.emit we use client.broadcast.emit because we don't need to show the same user that he join the chat again
    //so broadcast the message to all clients except the user who just joined
    client.broadcast.emit( `user-joined`, {
      message: `New user joined the chat: ${client.id}`,
      id: client.id
    })
  }

  /**
   * This method is called when a client disconnects from the WebSocket server.
   * It logs the client's disconnection, and emits a `user-left` event to all connected clients,
   * including the client's ID in the event payload.
   */
  handleDisconnect(client: Socket){
    this.logger.verbose('Client disconnected', client.id);
    this.server.emit( `user-left`, {
      message: `User left the chat: ${client.id}`,
      id: client.id
    })
  }
  /**
   * This method is called when a client sends a message with the event name 'newMessage'.
   * It receives the client socket instance and the message payload.
   *
   * The method logs the received message, broadcasts the message to all connected clients
   * using the 'message' event, and sends a reply to the current client with the "Hello from server" message.
   *
   * It also demonstrates how to broadcast a message to all clients using `this.server.emit("reply", "broadcasting...")`.
   */
  @SubscribeMessage('newMessage')
  handleNewMessage( client: Socket,@MessageBody() message: any) {

    // Log the received message
    this.logger.debug(message);

    // Broadcast the received message to all clients (group chat)
    this.server.emit('message', message); //broadcast to all clients (group chat)
    /**
     //socket.emit("reply", "Hello from server") - Reply to the current client with a "Hello from server" message
     if (client) {
     client.emit("reply", "Hello from server")
     } else {
     console.log('Client is undefined');
     }

     // io.emit("reply", "broadcasting...") - broadcast to all clients
     //reply - event , broadcasting... - arguments
     this.server.emit("reply", "broadcasting...")
     */
  }
}

Client - client/src/components/chat.tsx

'use client';

import React, { useState, useEffect, useRef } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3002');

const ChatComponent = () => {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState<string[]>([]);
  const messagesEndRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    // fn: this.server.emit('message', message)
    // This event listener is triggered when the server broadcasts a message to all clients using 'this.server.emit('message', message)'
    // It receives the broadcast message and appends it to the 'messages' state
    socket.on('message', (data) => {
      //If we directly push the new data into the messages array using the push method (e.g., messages.push(data)),
      // we would be mutating the existing state array.
      // Reacts state updates are designed to be immutable, so mutating the state directly can lead to unexpected behavior and potential bugs.
      //By using the spread operator ...prevMessages, we create a new array that includes all the elements from the previous messages array (prevMessages).
      // This way, we don't lose any existing messages when adding a new
      //...prevMessages is the spread syntax, which spreads the elements of the prevMessages array into a new array.
      //[...prevMessages, data] creates a new array by combining the elements from prevMessages and the new data element.
      // The resulting array [...prevMessages, data] becomes the new value of the messages state.
      setMessages((prevMessages) => [...prevMessages, data]);
    });

    // fn: this.server.emit('user-joined', { message: `New user joined the chat: ${client.id}`, id: client.id })
    // This event listener is triggered when the server emits a 'user-joined' event with a message and client ID
    // It receives the event payload and appends the message to the 'messages' state
    socket.on('user-joined', (data) => {
      setMessages((prevMessages) => [...prevMessages, data.message]);
    });

    // fn: this.server.emit('user-left', { message: `User left the chat: ${client.id}`, id: client.id })
    // This event listener is triggered when the server emits a 'user-left' event with a message and client ID
    // It receives the event payload and appends the message to the 'messages' state
    socket.on('user-left', (data) => {
      setMessages((prevMessages) => [...prevMessages, data.message]);
    });
    // This is a cleanup function that runs when the component is unmounted or when the effect is re-run due to a change in dependencies.
    // It removes the event listeners for 'message', 'user-joined', and 'user-left' events to prevent memory leaks.
    return () => {
      socket.off('message');
      socket.off('user-joined');
      socket.off('user-left');
    };
  }, []);
  // This useEffect hook is responsible for scrolling the message container to the bottom whenever the 'messages' state changes.
  // It ensures that the latest messages are always visible without the user having to manually scroll down.
  useEffect(() => {
    // messagesEndRef.current is a reference to the div element at the end of the message container.
    // The '?' is a safe navigation operator to ensure that messagesEndRef.current is not null or undefined before calling scrollIntoView().
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // fn: @SubscribeMessage('newMessage')
  // This function is triggered when the user submits a message
  // It emits the 'newMessage' event with the message content to the server
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (message.trim()) {
      socket.emit('newMessage', message);
      setMessage('');
    }
  };

  return (
    <div className="align">
      <div className="heading">
        Chat
      </div>
      <div className="msg">
        {messages.map((msg, index) => (
          <div key={index} className="msg-li">
            {msg}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>
      <form onSubmit={handleSubmit} className="form">
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type your message..."
          className="input"
        />
        <button
          type="submit"
          className="btn"
        >
          Send
        </button>
      </form>
    </div>
  );
};

export default ChatComponent;

Step 2 : Setup Context with Component

Commit

Destructure the code

Context - client/src/context/socket-provider.tsx

"use client";

import React, { createContext, useCallback, useEffect, useState } from "react";
import io, { Socket } from "socket.io-client";

// Interface defining the shape of the SocketContext value
// This interface specifies the structure of the data that will be provided by the SocketContext
interface SocketContextValue {
  // sendMessage is a function that takes a string argument and is used to send a message to the server
  sendMessage: (msg: string) => void;
  // messages is an array of strings representing the messages received from the server
  messages: string[];
}

// Creating the SocketContext with a null initial value
// Creates a new React context with an initial value of null
// This context will be used to share the sendMessage function and messages array with other components
export const SocketContext = createContext<SocketContextValue | null>(null);

// SocketProvider component that manages the WebSocket connection and provides context value
// This is a React component that sets up the WebSocket connection, manages its state, and provides the context value
export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  // Using the useState hook to store the socket instance and the array of messages
  const [socket, setSocket] = useState<Socket | null>(null);
  const [messages, setMessages] = useState<string[]>([]);

  // Memoized sendMessage function using useCallback
  // The useCallback hook is used to memoize the sendMessage function
  // This ensures that the function is only recreated when the socket instance changes
  const sendMessage = useCallback((msg: string) => {
    // If the socket instance is available, emit the 'newMessage' event with the provided message
    if (socket) {
      socket.emit("newMessage", msg);
    }
  }, [socket]);

  // Setting up WebSocket connection and event listeners
  // The useEffect hook is used to set up the WebSocket connection and event listeners
  useEffect(() => {
    // Create a new WebSocket connection to the server running at http://localhost:3002
    const newSocket = io("http://localhost:3002");
    // Update the socket state with the new socket instance
    setSocket(newSocket);

    // Event listener for 'message' event
    // When the server sends a message, this event listener is triggered
    // The received message is appended to the messages array using the setMessages function
    newSocket.on("message", (data) => {
      setMessages((prevMessages) => [...prevMessages, data]);
    });

    // Event listener for 'user-joined' event
    // When a new user joins the chat, this event listener is triggered
    // The join message is appended to the messages array
    newSocket.on("user-joined", (data) => {
      setMessages((prevMessages) => [...prevMessages, data.message]);
    });

    // Event listener for 'user-left' event
    // When a user leaves the chat, this event listener is triggered
    // The leave message is appended to the messages array
    newSocket.on("user-left", (data) => {
      setMessages((prevMessages) => [...prevMessages, data.message]);
    });

    // Cleanup function to remove event listeners and disconnect the socket
    // This function is returned from the useEffect hook and will be called when the component unmounts
    // It removes the event listeners and disconnects the WebSocket connection to prevent memory leaks
    return () => {
      newSocket.off("message");
      newSocket.off("user-joined");
      newSocket.off("user-left");
      newSocket.disconnect();
    };
  }, []);

  // Defining the context value object
  // The context value object contains the sendMessage function and the messages array
  const contextValue: SocketContextValue = {
    sendMessage,
    messages,
  };

  // Rendering the SocketContext.Provider with the context value
  // The SocketContext.Provider component provides the context value to its children components
  // Any component wrapped by this provider will have access to the sendMessage function and messages array
  return <SocketContext.Provider value={contextValue}>{children}</SocketContext.Provider>;
};

// Custom hook to access the SocketContext value
// This is a custom hook that provides a convenient way to access the SocketContext value
export const useSocket = () => {
  // Use the useContext hook to retrieve the context value
  const context = React.useContext(SocketContext);

  // If the context value is null, throw an error
  // This ensures that the useSocket hook is only used within a SocketProvider
  if (!context) {
    throw new Error("useSocket must be used within a SocketProvider");
  }

  // Return the context value
  return context;
};

chat.tsx - client/src/components/chat.tsx

"use client";
import React, { useEffect, useRef } from "react";
import { useSocket } from "@/context/socket-provider";
import ChatInput from "@/components/chat-input";

const ChatComponent = () => {
// Accessing the messages state from the SocketContext using the useSocket hook
  const { messages } = useSocket();
  const messagesEndRef = useRef<HTMLDivElement | null>(null);
// Scrolling to the bottom of the message container whenever the messages state changes
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  return (
    <div className="align">
      <div className="heading">Chat</div>
      <div className="msg">
        {messages.map((msg, index) => (
          <div key={index} className="msg-li">
            {msg}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>
      <ChatInput />
    </div>
  );
};

export default ChatComponent;

chat-input.tsx - client/src/components/chat-input.tsx

import React from "react";
import { useSocket } from "@/context/socket-provider";

const ChatInput = () => {
  const [message, setMessage] = React.useState("");
  const { sendMessage } = useSocket();
  // Handling the form submission and sending the message
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (message.trim()) {
      sendMessage(message);
      setMessage("");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="form">
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type your message..."
        className="input"
      />
      <button type="submit" className="btn">
        Send
      </button>
    </form>
  );
};

export default ChatInput;

layout.tsx - client/src/app/layout.tsx

export default function RootLayout({
                                     children,
                                   }: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
    <SocketProvider>
      <body className={inter.className}>{children}</body>
    </SocketProvider>
    </html>
  );
}

Step 3 : Setup Redis(pub-sub)

Commit

.env - scalable_chat_app_nest\api\.env

#Port

PORT=""

#Redis Host

REDIS_HOST=""

REDIS_PORT=

REDIS_USERNAME=""

REDIS_PASSWORD=""

pub-sub - api/src/redis/pubsub.service.ts

import { Injectable } from '@nestjs/common';
import { Redis } from 'ioredis';
import { ConfigService } from '@nestjs/config';

@Injectable()
export class PubSubService {
  private readonly publisher: Redis;
  private readonly subscriber: Redis;

  constructor(private configService: ConfigService) {
    // Get the Redis configuration options from the ConfigService
    const redisHost =
      this.configService.get<string>('REDIS_HOST') || 'localhost';
    const redisPort = this.configService.get<number>('REDIS_PORT') || 6379;
    const redisUsername =
      this.configService.get<string>('REDIS_USERNAME') || '';
    const redisPassword =
      this.configService.get<string>('REDIS_PASSWORD') || '';

    // Connect to Redis with the configuration options
    this.publisher = new Redis({
      host: redisHost,
      port: redisPort,
      username: redisUsername,
      password: redisPassword,
    });
    this.subscriber = new Redis({
      host: redisHost,
      port: redisPort,
      username: redisUsername,
      password: redisPassword,
    });
  }

  publish(channel: string, message: string): void {
    this.publisher.publish(channel, message);
  }

  subscribe(channel: string, callback: (message: string) => void): void {
    this.subscriber.subscribe(channel);
    this.subscriber.on('message', (receivedChannel, receivedMessage) => {
      if (receivedChannel === channel) {
        callback(receivedMessage);
      }
    });
  }
}

modify the chat.gateway.ts - api/src/chat/chat.gateway.ts

import {
  MessageBody,
  OnGatewayConnection,
  OnGatewayDisconnect,
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
import { Logger } from '@nestjs/common';
import { PubSubService } from '../redis/pubsub.service';

@WebSocketGateway(3002, { cors: true })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server: Server;
  private readonly logger = new Logger(ChatGateway.name);
  // Inject the RedisService
  constructor(private pubSubService: PubSubService) {
    this.pubSubService.subscribe('chat', (message) => {
      this.server.emit('message', message);
    });
  }

  handleConnection(client: Socket) {
    this.logger.verbose('New client connected', client.id);
    client.broadcast.emit(`user-joined`, {
      message: `New user joined the chat: ${client.id}`,
      id: client.id,
    });
  }

  handleDisconnect(client: Socket) {
    this.logger.verbose('Client disconnected', client.id);
    this.server.emit(`user-left`, {
      message: `User left the chat: ${client.id}`,
      id: client.id,
    });
  }

  @SubscribeMessage('newMessage')
  async handleNewMessage(@MessageBody() message: any) {
    this.logger.debug(message);
    //Shift this to the redis service
    // this.server.emit('message', message);

    // Publish the message to the Redis channel
    this.pubSubService.publish('chat', JSON.stringify(message));
  }
}

Test

Open/Closed Principle

Subham — Sun, 28 Apr 2024 21:27:41 +0000

Links

REPO
Linkedin
Github

Info : Single-responsibility principle - Wikipedia

Info : Open–closed principle - Wikipedia

**software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification";[1] that is, such an entity can allow its behaviour to be extended without modifying its source code

Open for Extension:
- A class or module should be designed to allow new functionality to be added without modifying its existing code.
- Extensions can include adding new methods, properties, or behaviour.
Closed for Modification:
- Once a class or module is stable and tested, it should remain unchanged.
- Avoid modifying existing code to add new features or alter behaviour.

Violations of the OCP

Consider the following example of a PaymentProcessor class:

class PaymentProcessor {
    processPayment(amount: number, paymentType: string) {
        if (paymentType === 'credit') {
            console.log(`Processing credit payment of ${amount} using credit`);
        } else if (paymentType === 'debit') {
            console.log(`Processing debit payment of ${amount} using debit`);
        } else if (paymentType === 'cash') {
            console.log(`Processing cash payment of ${amount} using cash`);
        } else if (paymentType === 'paypal') {
            console.log(`Processing PayPal payment of ${amount} using PayPal`);
        } else if (paymentType === 'stripe') {
            console.log(`Processing Stripe payment of ${amount} using Stripe`);
        } else {
            console.log(`Invalid payment type ${paymentType}`);
        }
    }
}

const process = new PaymentProcessor();

process.processPayment(100, 'credit');
process.processPayment(200, 'debit');
process.processPayment(300, 'cash');

In this example:

The PaymentProcessor class handles different payment types (credit, debit, cash, PayPal, and Stripe).
If a new payment type is introduced, we need to modify the existing class, violating the OCP.

A Better Approach

To adhere to the OCP, we can use interfaces and separate responsibilities. Here’s an improved version:

interface IPaymentProcessor {
    processPayment(amount: number): void;
}

class PaymentProcessor {
    processor: IPaymentProcessor;

    constructor(paymentProcessor: IPaymentProcessor) {
        this.processor = paymentProcessor;
    }

    processPayment(amount: number) {
        this.processor.processPayment(amount);
    }
}

class CreditCardProcessor implements IPaymentProcessor {
    processPayment(amount: number) {
        console.log(`Processing credit card payment of ${amount}`);
    }
}

class PaypalProcessor implements IPaymentProcessor {
    processPayment(amount: number) {
        console.log(`Processing PayPal payment of ${amount}`);
    }
}

const creditCardProcessor = new CreditCardProcessor();
const paypalProcessor = new PaypalProcessor();
const processor = new PaymentProcessor(creditCardProcessor);

processor.processPayment(100);

In this improved version:

We define an IPaymentProcessor interface with a processPayment method.
The PaymentProcessor class accepts an instance of a payment processor (e.g., CreditCardProcessor or PaypalProcessor).
Each payment processor class adheres to the interface and provides its own implementation.
New payment processors can be added without modifying existing code.

By following the OCP, we achieve better maintainability and flexibility in our software systems. Extensions can be added without disrupting existing functionality, making the system more robust and adaptable to change.