DEV Community: Arjun Kumar

📬 SMTP Configuration Explained

Arjun Kumar — Fri, 27 Feb 2026 06:09:54 +0000

What to Use, When to Use It, and Why It Breaks at 2AM

Email delivery looks simple from the outside. A button says “Send”. A message flies away. Magic. ✨

Behind that button lives SMTP. A protocol older than most frontend frameworks and still more reliable than half of them.

Let’s dissect it properly. Clean. Practical. No fluff.

📡 What Is SMTP?

SMTP stands for Simple Mail Transfer Protocol.

It is the protocol used to send emails between servers and from applications to mail servers.

It does not handle inbox reading. That’s IMAP or POP3.
SMTP is the delivery truck. 🚚

🧩 Core SMTP Configuration Fields

When configuring SMTP in Node.js, NestJS, or any backend, you usually see:

{
  host: "",
  port: 000,
  secure: false,
  auth: {
    user: "",
    pass: ""
  }
}

Let’s decode each part.

1️⃣ host

The SMTP server address.

Examples:
-smtp.gmail.com
-smtp.sendgrid.net
-mail.yourdomain.com

This is where your app connects to send mail.

2️⃣ port

The communication channel. Different ports = different security expectations.

Here’s the real breakdown 👇

Port Usage Secure Value

465 SSL/TLS (immediate encryption) true
587 STARTTLS (recommended) false
2525 Alternative to 587 false
25 Server to server (often blocked) false

🔐 Port 465

port: 465,
secure: true

Encryption starts immediately.

Use when:

Provider explicitly supports SSL on 465

Corporate mail setups

Traditional configurations

🤝 Port 587 (Recommended)

port: 587,
secure: false

Connection starts normal, then upgrades to TLS.

Use when:

Sending transactional emails

Production apps

Gmail, SendGrid, Mailgun setups

This is the industry standard.

🛟 Port 2525

port: 2525,
secure: false

Used when:

587 is blocked by firewall

Cloud providers restrict port 25

Hosting environments limit SMTP traffic

Think of it as the reliable backup lane.

⚠️ Port 25

Old-school SMTP. Mostly used for server-to-server communication.

Avoid for application-level sending unless specifically required.

🔑 secure: true vs secure: false

This setting controls how encryption is initiated.

secure: true

SSL from first byte

Used with port 465

secure: false

Uses STARTTLS

Encryption begins after connection

Used with 587 or 2525

Common mistake:

port: 587,
secure: true ❌

That causes handshake failure.

🔐 auth

Authentication credentials.

auth: {
user: process.env.SMTP_USER,
pass: process.env.SMTP_PASS
}

Best practices:

Never hardcode credentials

Use environment variables

Prefer app passwords for Gmail

Use API-based mail providers in production

🏗 Where to Use SMTP?

1️⃣ Small Apps / MVPs

Use:

Gmail SMTP

Port 587

secure: false

Good for:

Internal tools

Testing

Early-stage projects

2️⃣ Production SaaS / Enterprise Apps

Use:

SendGrid

Mailgun

Amazon SES

Dedicated SMTP relay

Why?

Better deliverability

SPF, DKIM, DMARC support

Rate limiting protection

Analytics & bounce handling

3️⃣ High-Scale Notification Systems

If you’re building something like:

OTP systems

Approval workflows

Finance notifications

Campaign systems

You should:

Separate email service layer

Use queues (BullMQ / RabbitMQ / NATS)

Implement retry logic

Track bounce & failure states

SMTP alone is transport. Reliability comes from architecture.

🧠 Production Best Practices

✅ Always Enable TLS

Even if secure: false, STARTTLS should be enabled.

✅ Configure SPF, DKIM, DMARC

Without these, emails land in spam.

✅ Use a Dedicated Domain

Don’t send from personal Gmail in production.

✅ Handle Failures Gracefully

SMTP servers can throttle or reject.

✅ Use Connection Pooling

In high-volume systems.

Example:

{
pool: true,
maxConnections: 5,
maxMessages: 100
}

🧨 Why SMTP Config Fails

Most common reasons:

Port and secure mismatch

Firewall blocking outbound SMTP

Wrong credentials

TLS version mismatch

Provider rate limits

Debug tip: Always enable logging during setup.

🚀 Example: Clean Production Configuration

{
host: process.env.SMTP_HOST,
port: 587,
secure: false,
auth: {
user: process.env.SMTP_USER,
pass: process.env.SMTP_PASS
},
tls: {
rejectUnauthorized: true
}
}

Simple. Predictable. Stable.

📌 Final Mental Model

SMTP is not email marketing.
SMTP is not analytics.
SMTP is not inbox management.

SMTP is transport.

Think of it like TCP for email.
Reliable when configured properly. Brutal when misconfigured. 📡

If you want, I can also write:

📊 A version comparing SMTP vs Email APIs

🏗 A NestJS-specific SMTP implementation guide

🔐 A deep dive into SPF/DKIM/DMARC

Choose your weapon.

Building My Portfolio Website: A Journey with React, GitHub Integration, and GitHub Pages Deployment

Arjun Kumar — Wed, 25 Jun 2025 05:25:46 +0000

Introduction

I recently built my portfolio website at https://arjun-computer-geek.github.io/ using modern web technologies and wanted to share the technical journey, challenges faced, and solutions implemented. This blog post covers everything from the tech stack to GitHub integration, Dev.to blog integration, and the deployment challenges I encountered.

🎨 The Tech Stack & Design Philosophy

Modern React with TypeScript

I chose React 18 with TypeScript for type safety and better developer experience. The project uses Vite as the build tool for lightning-fast development and optimized production builds.

Beautiful UI with shadcn/ui and Tailwind CSS

The design system is built on shadcn/ui components with Tailwind CSS for styling. This combination provides:

Consistent, accessible components
Dark mode support out of the box
Responsive design with utility classes
Beautiful animations and transitions

Key Design Features

Glass morphism effects with backdrop blur
Gradient backgrounds and text effects
Smooth animations using CSS keyframes
Responsive grid layouts for projects and blog posts
Interactive hover effects and micro-interactions

🔗 GitHub Integration: Real-time Project Data

GitHub API Integration

One of the most exciting features is the real-time GitHub integration. I created a comprehensive GitHub service that fetches:

// Key features of the GitHub integration
- User repositories with filtering (no forks, no archived, public only)
- GitHub statistics (stars, forks, languages)
- Pinned repositories based on configuration
- Experience calculation based on first commit date
- Repository topics and metadata

Implementation Details

The GitHub integration uses React Query (TanStack Query) for efficient data fetching with:

Caching strategies (5-minute stale time, 30-minute garbage collection)
Retry logic with exponential backoff
Error handling and fallback states
Rate limiting considerations

Pinned Repositories System

I implemented a smart pinning system that allows me to highlight specific projects:

// Configuration-based pinning
const PINNED_REPOSITORIES = ["portfolio-website", "awesome-project"];
const PINNED_TOPICS = ["portfolio", "showcase", "featured"];

This system automatically pins repositories based on their name or topics, making it easy to showcase my best work.

📝 Dev.to Blog Integration

Real-time Blog Feed

The portfolio includes a live feed of my Dev.to blog posts using their public API:

// Fetching Dev.to posts
fetch("https://dev.to/api/articles?username=arjun_computer_geek");

Features Implemented

Search functionality across titles, descriptions, and tags
Responsive grid layout for blog cards
Tag filtering and display
Pagination with "View All" functionality
Error handling and loading states

Blog Card Design

Each blog post card features:

Cover image support
Publication date
Tag display (with overflow handling)
Hover effects and animations
Direct link to Dev.to

🚀 GitHub Pages Deployment Challenges & Solutions

The Routing Problem

The biggest challenge was client-side routing on GitHub Pages. GitHub Pages doesn't support server-side routing, which means direct navigation to routes like /projects would result in a 404 error.

Solution: HashRouter Implementation

I implemented a dual-router system:

// Development: Clean URLs with BrowserRouter
// Production: Hash-based URLs with HashRouter
const Router =
  process.env.NODE_ENV === "production" ? HashRouter : BrowserRouter;

404.html Redirect Solution

For direct navigation support, I created a public/404.html file that handles redirects:

<!-- 404.html handles direct navigation -->
<script>
  const path = window.location.pathname;
  if (path !== "/") {
    window.location.href = "/#" + path;
  }
</script>

SPA Routing Solution for GitHub Pages

I implemented a comprehensive SPA routing solution based on the spa-github-pages approach. This solution handles both direct navigation and URL restoration:

<!-- Script in index.html for SPA routing -->
<script type="text/javascript">
  // Single Page Apps for GitHub Pages
  // MIT License
  // https://github.com/rafgraph/spa-github-pages
  // This script checks to see if a redirect is present in the query string,
  // converts it back into the correct url and adds it to the
  // browser's history using window.history.replaceState(...),
  // which won't cause the browser to attempt to load the new url.
  // When the single-page app is loaded further down in this file,
  // the correct url will be waiting in the browser's history for
  // the single-page app to route accordingly.
  (function (l) {
    if (l.search[1] === "/") {
      var decoded = l.search
        .slice(1)
        .split("&")
        .map(function (s) {
          return s.replace(/~and~/g, "&");
        })
        .join("?");
      window.history.replaceState(
        null,
        null,
        l.pathname.slice(0, -1) + decoded + l.hash
      );
    }
  })(window.location);
</script>

This solution works by:

Detecting redirects from the 404.html page
Restoring the original URL in the browser history
Allowing React Router to handle the routing properly
Maintaining clean URLs for users while working with GitHub Pages limitations

How the Complete Routing Solution Works

User visits yoursite.com/projects directly
GitHub Pages serves the 404.html file
404.html script redirects to yoursite.com/#/projects
index.html script restores the URL to yoursite.com/projects
React Router handles the routing to the Projects component

This creates a seamless experience where users can:

Bookmark direct URLs like yoursite.com/projects
Share clean links without hash symbols
Navigate directly to any route
Maintain browser history properly

GitHub Actions Workflow

I set up automated deployment using GitHub Actions:

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: "./dist"

  deploy:
    environment:
      name: github-pages
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/deploy-pages@v4

🎯 Key Features & Components

1. Hero Section

Animated gradient backgrounds
Call-to-action buttons
Social media links

2. About Section

Personal introduction
Skills overview
Professional summary

3. Experience Section

Timeline-based experience display
Company logos and descriptions
Duration calculations

4. Skills Section

Categorized skill display
Progress indicators
Interactive hover effects

5. Projects Section

Featured projects showcase
GitHub integration
Live repository data

6. Blog Section

Dev.to integration
Search functionality
Responsive grid layout

7. Contact Section

Contact form
Social media links
Professional information

🛠️ Development Tools & Workflow

Lovable Integration

I integrated Lovable for component tagging and development workflow optimization:

// Vite config with Lovable
import { componentTagger } from "lovable-tagger";

export default defineConfig(({ mode }) => ({
  plugins: [react(), mode === "development" && componentTagger()].filter(
    Boolean
  ),
}));

📱 Responsive Design & Performance

Mobile-First Approach

Responsive breakpoints for all screen sizes
Touch-friendly interactions
Optimized layouts for mobile devices

Performance Optimizations

Code splitting with React Router
Lazy loading for components
Image optimization and compression
Caching strategies for API calls

🎨 Design System & Styling

Custom CSS Variables

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... more variables */
}

Animation System

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
  }
}

🔧 Configuration & Setup

Environment Configuration

Base URL configuration for GitHub Pages
API endpoints configuration
Development vs production settings

Build Configuration

// vite.config.ts
export default defineConfig({
  base: "/",
  server: {
    host: "::",
    port: 8080,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

🚀 Deployment Process

1. Build Process

npm run build

2. GitHub Pages Configuration

Source: Deploy from a branch
Branch: main
Folder: / (root)

3. Automatic Deployment

GitHub Actions triggers on push to main
Builds the project
Deploys to GitHub Pages
Updates live site automatically

🎯 Lessons Learned & Best Practices

1. Router Configuration

Always test routing in production environment
Use HashRouter for GitHub Pages
Implement proper 404 handling

2. API Integration

Implement proper error handling
Use caching strategies
Consider rate limiting

3. Performance

Optimize bundle size
Implement lazy loading
Use proper caching headers

4. User Experience

Provide loading states
Handle error scenarios gracefully
Ensure accessibility

🔮 Future Enhancements

Planned Features

Blog CMS integration for custom blog posts
Analytics dashboard for portfolio insights
Dark/Light mode toggle
Internationalization support
PWA capabilities

Technical Improvements

Server-side rendering for better SEO
Image optimization with next-gen formats
Advanced caching strategies
Performance monitoring

📚 Resources & References

Technologies Used

Deployment Resources

🎉 Conclusion

Building this portfolio website has been an incredible learning experience. The combination of modern React practices, beautiful UI design, and seamless GitHub integration creates a powerful showcase for my work. The challenges with GitHub Pages routing taught me valuable lessons about deployment strategies and user experience considerations.

The live GitHub integration and Dev.to blog feed make the portfolio dynamic and always up-to-date, while the beautiful design system ensures a professional and engaging user experience.

You can visit the live portfolio at: https://arjun-computer-geek.github.io/

You can explore the complete source code here: https://github.com/arjun-computer-geek/arjun-computer-geek.github.io

Feel free to explore the codebase and reach out if you have any questions about the implementation!

This blog post covers the technical implementation of my portfolio website. The project demonstrates modern web development practices, API integration, and deployment strategies that can be applied to other projects.

🧠 Mastering MongoDB Aggregation

Arjun Kumar — Thu, 01 May 2025 04:58:18 +0000

In this post, we dive deep into MongoDB’s aggregation framework using a practical dataset of users and orders. Below are 8 real-world questions and how you can solve them using stages like $lookup, $unwind, $group, and $project.

📦 Sample Data
📄 Users Collection

[
  { "_id": 1, "name": "Alice", "country": "USA" },
  { "_id": 2, "name": "Bob", "country": "India" },
  { "_id": 3, "name": "Charlie", "country": "India" },
  { "_id": 4, "name": "Diana", "country": "USA" },
  { "_id": 5, "name": "Eve", "country": "UK" }
]

📄 Orders Collection

[
  { "_id": 1, "userId": 1, "amount": 200 },
  { "_id": 2, "userId": 2, "amount": 350 },
  { "_id": 3, "userId": 1, "amount": 150 },
  { "_id": 4, "userId": 3, "amount": 400 },
  { "_id": 5, "userId": 3, "amount": 100 },
  { "_id": 6, "userId": 4, "amount": 300 },
  { "_id": 7, "userId": 5, "amount": 50 }
]

🔍 Question 1: Join users with their orders

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  }
]

✅ Result: Each user now has an orders array.

🔍 Question 2: Unwind orders array

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $unwind: "$orders"
  }
]

✅ Result: Each user-order combination is flattened into individual documents.

🔍 Question 3: Total amount spent by each user

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $unwind: "$orders"
  },
  {
    $group: {
      _id: "$_id",
      totalSpent: { $sum: "$orders.amount" },
      name: { $first: "$name" }
    }
  },
  {
    $project: {
      _id: 0,
      name: 1,
      totalSpent: 1
    }
  }
]

🔍 Question 4: Average order amount per country

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  { $unwind: "$orders" },
  {
    $group: {
      _id: "$country",
      avgSpent: { $avg: "$orders.amount" }
    }
  },
  {
    $project: {
      country: "$_id",
      avgSpent: 1,
      _id: 0
    }
  }
]

🔍 Question 5: Most expensive user (by total spent)

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  { $unwind: "$orders" },
  {
    $group: {
      _id: "$name",
      totalSpent: { $sum: "$orders.amount" }
    }
  },
  { $sort: { totalSpent: -1 } },
  { $limit: 1 }
]

✅ Result: The user who spent the most.

🔍 Question 6: Count how many orders each user made

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $project: {
      name: 1,
      orderCount: { $size: "$orders" }
    }
  }
]

🔍 Question 7: User with highest average order value

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $project: {
      name: 1,
      avgOrderValue: { $avg: "$orders.amount" }
    }
  },
  { $sort: { avgOrderValue: -1 } },
  { $limit: 1 }
]

🔍 Question 8: Total revenue per country

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  { $unwind: "$orders" },
  {
    $group: {
      _id: "$country",
      revenue: { $sum: "$orders.amount" }
    }
  },
  {
    $project: {
      country: "$_id",
      revenue: 1,
      _id: 0
    }
  }
]

🚀 Conclusion

These examples reflect real scenarios you might encounter while analyzing user and order data. MongoDB's aggregation pipeline is extremely flexible for joining, transforming, and summarizing data — no need to switch to SQL for analytics anymore.

🚀 MongoDB Aggregation Challenge - Lookup & Grouping Mastery 🔥

Arjun Kumar — Tue, 29 Apr 2025 05:03:11 +0000

Today’s practice involved joining two collections (users and orders) and mastering lookup, unwind, group, sort, and limit stages in aggregation pipelines!

Here’s the full practice breakdown ⤵️

🗄️ Database Structure:
Collection: users

[
  { "_id": 1, "name": "Alice", "country": "USA" },
  { "_id": 2, "name": "Bob", "country": "Canada" },
  { "_id": 3, "name": "Charlie", "country": "India" }
]

Collection: orders

[
  { "_id": 101, "userId": 1, "amount": 250 },
  { "_id": 102, "userId": 1, "amount": 300 },
  { "_id": 103, "userId": 2, "amount": 400 },
  { "_id": 104, "userId": 3, "amount": 150 },
  { "_id": 105, "userId": 3, "amount": 200 }
]

🧩 Challenge Questions and Answers:

1️⃣ Join users with their orders

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  }
]

✅ Result: Each user document will now have an array of their related orders under "orders".

2️⃣ Unwind the orders

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $unwind: "$orders"
  }
]

✅ Result: Each order becomes a separate document with user data attached (no longer an array).

3️⃣ Calculate total spend by each user

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $unwind: "$orders"
  },
  {
    $group: {
      _id: "$_id",
      totalSpend: { $sum: "$orders.amount" },
      name: { $first: "$name" }
    }
  }
]

✅ Result: Each user now has a totalSpend field showing how much they spent in total!

4️⃣ Calculate average spend per country

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $unwind: "$orders"
  },
  {
    $group: {
      _id: "$country",
      avgSpent: { $avg: "$orders.amount" }
    }
  },
  {
    $project: {
      country: "$_id",
      avgSpent: 1,
      _id: 0
    }
  }
]

✅ Result: Average order amount for each country!

5️⃣ Find the user who spent the most (Most Expensive User)

[
  {
    $lookup: {
      from: "orders",
      localField: "_id",
      foreignField: "userId",
      as: "orders"
    }
  },
  {
    $unwind: "$orders"
  },
  {
    $group: {
      _id: "$_id",
      totalSpend: { $sum: "$orders.amount" },
      name: { $first: "$name" }
    }
  },
  {
    $sort: {
      totalSpend: -1
    }
  },
  {
    $limit: 1
  },
  {
    $project: {
      name: 1,
      totalSpend: 1,
      _id: 0
    }
  }
]

✅ Result: The top spender in the users list!

🎯 Key MongoDB Operators Practiced:

$lookup ➔ for joining collections
$unwind ➔ flatten arrays
$group ➔ aggregate data
$sort ➔ order results
$limit ➔ restrict number of outputs
$project ➔ customize final output

💬 Final Thoughts:
Working with lookup and aggregation pipelines makes MongoDB a very powerful tool for analytics, reporting, and complex data transformations!

🔥 Practice like this strengthens your real-world NoSQL database skills!

Mastering MongoDB Aggregation: 10 Practical Examples with Sample Data

Arjun Kumar — Thu, 24 Apr 2025 05:40:52 +0000

MongoDB's aggregation framework is powerful yet often misunderstood. Whether you're prepping for interviews, building analytics, or learning data science workflows, mastering aggregation is essential. Below are 10 real-world problems, complete with queries and explanations, using a sample dataset of users.

Sample MongoDB Collection: users

[
  { "name": "Alice", "age": 28, "country": "USA", "gender": "female", "signupDate": "2023-12-20T10:15:00Z" },
  { "name": "Bob", "age": 34, "country": "Canada", "gender": "male", "signupDate": "2024-01-15T12:00:00Z" },
  { "name": "Charlie", "age": 22, "country": "India", "gender": "male", "signupDate": "2024-02-05T09:45:00Z" },
  { "name": "Diana", "age": 30, "country": "USA", "gender": "female", "signupDate": "2024-03-01T08:30:00Z" },
  { "name": "Eve", "age": 29, "country": "India", "gender": "female", "signupDate": "2024-01-25T11:20:00Z" },
  { "name": "Frank", "age": 40, "country": "Canada", "gender": "male", "signupDate": "2024-02-10T14:50:00Z" },
  { "name": "Grace", "age": 19, "country": "USA", "gender": "female", "signupDate": "2024-03-10T07:10:00Z" },
  { "name": "Harry", "age": 31, "country": "UK", "gender": "male", "signupDate": "2024-03-12T17:40:00Z" },
  { "name": "Ivy", "age": 27, "country": "India", "gender": "female", "signupDate": "2024-01-01T06:00:00Z" },
  { "name": "Jack", "age": 36, "country": "Canada", "gender": "male", "signupDate": "2024-02-20T18:15:00Z" }
]

1. Count of Users by Country

[
  {
    $group: {
      _id: "$country",
      totalUsers: { $sum: 1 }
    }
  }
]

2. Average Age by Gender

[
  {
    $group: {
      _id: "$gender",
      averageAge: { $avg: "$age" }
    }
  }
]

3. Users Signed Up After February 1, 2024

[
  {
    $addFields: {
      signupDateConverted: {
        $toDate: "$signupDate"
      }
    }
  },
  {
    $match: {
      signupDateConverted: {
        $gte: ISODate("2024-02-01T00:00:00Z")
      }
    }
  }
]

4. Count of Female Users by Country

[
  { $match: { gender: "female" } },
  {
    $group: {
      _id: "$country",
      femalePerCountry: { $sum: 1 }
    }
  }
]

5. Group by Country After Sorting by Signup Date (Descending)

[
  { $sort: { signupDate: -1 } },
  {
    $group: {
      _id: "$country"
    }
  }
]

6. Get the 3 Earliest Signups

[
  { $sort: { signupDate: 1 } },
  { $limit: 3 }
]

7. All Indian Users Sorted by Age Descending

[
  { $match: { country: "India" } },
  { $sort: { age: -1 } }
]

8. Count of Users Grouped by Month of Signup

[
  {
    $project: {
      monthYear: {
        $dateToString: {
          format: "%Y-%m",
          date: { $toDate: "$signupDate" }
        }
      }
    }
  },
  {
    $group: {
      _id: "$monthYear",
      userCount: { $sum: 1 }
    }
  },
  { $sort: { _id: 1 } }
]

9. Average Age of Users Signed Up in 2024

[
  {
    $project: {
      year: {
        $dateToString: {
          format: "%Y",
          date: { $toDate: "$signupDate" }
        }
      },
      age: 1,
      name: 1,
      signupDate: 1
    }
  },
  { $match: { year: "2024" } },
  {
    $group: {
      _id: "$year",
      avgAge: { $avg: "$age" }
    }
  }
]

10. Count of Users Aged 25 to 35 Grouped by Gender

[
  {
    $match: {
      age: { $gte: 25, $lte: 35 }
    }
  },
  {
    $group: {
      _id: "$gender",
      count: { $sum: 1 }
    }
  }
]

MongoDB aggregations are incredibly versatile. From basic groupings to complex date manipulations, they can power dashboards, reports, and analytics. Bookmark this post for reference and practice daily!

Happy querying! 🚀

Passing Data from Child to Parent in Svelte: A Comprehensive Guide

Arjun Kumar — Thu, 19 Sep 2024 13:22:56 +0000

In Svelte, data flow is generally one-directional—from parent to child. However, there are times when we need to pass data from child to parent, and we can use custom events for this. Another convenient way to synchronize data between child and parent is through two-way binding. This allows the parent to maintain control over the data, while the child updates it.

In this blog post, we will explore two methods for passing data from child to parent: using custom events and using two-way binding.

Method 1: Passing Data with Custom Events

Let's first see how to pass data from a child to a parent using custom events. In this scenario, we will use a simple counter component that sends updated count data to the parent component.

Step 1: The Child Component

In the child component (Counter.svelte), we define a counter and use Svelte's createEventDispatcher to emit an event to the parent when the count is updated.

<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();
    let count = 0;

    function increment() {
        count += 1;
        dispatch('increment', { count });
    }
</script>

<button on:click={increment}>
    Count: {count}
</button>

Step 2: The Parent Component

In the parent component, we listen for the custom increment event and update the parent's state accordingly.

<script>
    let totalCount = 0;

    function handleIncrement(event) {
        totalCount = event.detail.count;
    }
</script>

<h1>Total Count: {totalCount}</h1>
<Counter on:increment={handleIncrement} />

Method 2: Two-Way Binding

Another approach to pass data between child and parent components is by using two-way binding. This allows the parent component to directly bind a variable to the child component's property, and any changes in the child will automatically update the parent.

Let's see how this works with an example where we bind a name property between parent and child components.

Step 1: The Child Component (`Box.svelte`)

Here, the child component accepts a person prop, which is bound to a parent variable using bind: syntax.

<script>
    export let person;
</script>

<input bind:value={person} placeholder="Enter your name" />

Step 2: The Parent Component

In the parent component, we declare a variable p and bind it to the person prop in the Box component. We also create a reactive statement to display the uppercase version of the name.

<script>
    import Box from './Box.svelte';
    let p = 'MyName';

    // Reactive statement to compute the uppercase version of p
    $: nameUpper = p.toUpperCase();
</script>

<!-- Bind p to person in the child component -->
<Box bind:person={p} />

<p>Reactive value in the parent component: {nameUpper}</p>

<hr />

Explanation

Reactive Statement: We use the reactive $: syntax in Svelte to automatically update the nameUpper variable whenever p changes.
Two-Way Binding: By using the bind: directive in the parent (<Box bind:person={p} />), any change in the child component's person prop will automatically update p in the parent.

Example in Action:

Initially, the parent p is set to "MyName". This is passed to the child, and the input box displays "MyName".
When you type a new name in the input box, the person variable in the child updates, which also updates p in the parent. This change triggers the reactive statement $: nameUpper = p.toUpperCase() in the parent, and the uppercase name is displayed in real-time.

Conclusion

By using custom events and two-way binding, you can easily pass data from child to parent components in Svelte. For more complex or multi-component data sharing, you can consider using stores. However, for simple parent-child communication, these techniques are effective and easy to implement.

In summary:

Use custom events when you need to notify the parent of a change in the child component.
Use two-way binding when you want to directly synchronize a variable between the parent and child.

How to solve Authentication Issues When Deploying Node.js and Svelte to Production on Heroku?

Arjun Kumar — Thu, 12 Sep 2024 13:18:30 +0000

As developers, we often encounter unexpected challenges when moving our applications from local development to production environments. Recently, I faced a perplexing issue with authentication in a Node.js and Svelte application using Passport.js. Here's the journey of troubleshooting and the surprising solution that finally resolved the problem.

The Setup

Our application stack:

Backend: Node.js with Express
Frontend: Svelte
Authentication: Passport.js

Everything worked flawlessly in the local development environment. The authentication flow was smooth, and we were ready to deploy to production. Little did we know the hurdles that awaited us.

The Production Puzzle

Upon deploying to production (in this case, Heroku), our authentication suddenly stopped working. The application that ran perfectly on localhost was now failing in the real world. It was time to put on our detective hats and dive into troubleshooting mode.

The Troubleshooting Journey

1. CORS Issues

The first suspect was CORS (Cross-Origin Resource Sharing). We double-checked our CORS configuration on the backend:

app.use(cors({ origin: 'https://your-frontend-url.com', credentials: true }));

2. Fetch API Credentials

We ensured that our frontend Fetch API calls included the credentials: 'include' option:

fetch('https://your-api-url.com/login', {
  method: 'POST',
  credentials: 'include',
  // other options...
})

3. Vite Config Proxy

We even tried setting up a proxy in our Svelte app's vite.config.js:

export default defineConfig({
  // other config...
  server: {
    proxy: {
      '/api': {
        target: 'https://your-api-url.com',
        changeOrigin: true,
        secure: false,
      }
    }
  }
});

4. Cookie Settings

We experimented with various cookie settings:

app.use(session({
  // other options...
  cookie: {
    secure: true, // We tried both true and false
    sameSite: 'none', // We tried different options here
  }
}));

The Unexpected Solution

After hours of frustration and countless blog posts, the solution emerged from an unexpected place. The issue wasn't with CORS, fetch credentials, or cookie settings. The culprit was a single line of code that we hadn't considered:

app.set('trust proxy', 1);

This line is crucial when your application is behind a reverse proxy, which is the case with Heroku. Without it, Express doesn't know it's behind a proxy and can't properly set secure cookies or determine the correct protocol (http vs https).

Why This Worked

Heroku uses a reverse proxy to handle incoming requests before they reach your application. This means that from your app's perspective, all requests appear to come from the proxy rather than the original client.

By setting trust proxy, we're telling Express to trust the X-Forwarded-* headers set by the proxy. This allows Express to:

Correctly determine if the connection is secure (https).
Set the secure flag on cookies when appropriate.
Use the correct IP address for request logging and other purposes.

Lessons Learned

Understand Your Hosting Environment: Different hosting platforms may have unique configurations that affect your application.
Read Documentation Thoroughly: The solution was mentioned in Express.js documentation, but it's easy to overlook when you're not specifically looking for it.
Don't Assume: Just because something works locally doesn't mean it will work in production without adjustments.
Keep Learning: The web development landscape is vast, and there's always more to learn about the intricacies of deployment and production environments.

Conclusion

While troubleshooting can be frustrating, it's also an opportunity to deepen our understanding of the systems we work with. This experience highlighted the importance of considering the entire stack, including the hosting environment, when deploying web applications.

Remember, if you're deploying to a platform that uses a reverse proxy (like Heroku), don't forget to set trust proxy in your Express application. It might just save you hours of debugging!

React Lifecycle methods

Arjun Kumar — Sat, 23 Jul 2022 14:03:00 +0000

Are you unable to understand these lifecycle of component?
So here I am. I will explain the concept of react lifecycle.

In this post, you'll learn more about the React component lifecycle and the different methods within each phase (for class-based components), focusing particularly on methods and hooks.

Lifecycle of Components

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are: Mounting, Updating, and Unmounting.

You can see the visual representation of these methods in below image.

Mounting Phase

The mounting phase is when a new component is created and inserted into the DOM or, in other words, when the life of a component begins. This can only happen once, and is often called “initial render.”

React has four built-in methods that gets called, in this order, when mounting a component:

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

The render() method is required and will always be called, the others are optional and will be called if we define them.

1. constructor

The constructor() method is called before anything else, when the component is initiated, and it is the natural place to set up the initial state and other initial values.

Example

The constructor method is called, by React, every time you make a component:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

2. getDerivedStateFromProps

The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.

This is the natural place to set the state object based on the initial props.

In many cases, your component’s state will be derivative of its props. This is where the getDerivedStateFromProps method comes in. This method allows you to modify the state value with any props value. It's most useful for changes in props over time, and we’ll learn later that it’s also useful in the update phase.

It takes state as an argument, and returns an object with changes to the state.

The method getDerivedStateFromProps accepts two arguments: props and state, and returns an object, or null if no change is needed. These values are passed directly to the method, so there’s no need for it to have access to the instance of the class (or any other part of the class) and thus is considered a static method.

The example below starts with the favorite color being "red", but the getDerivedStateFromProps() method updates the favorite color based on the favcol attribute:

Example

The getDerivedStateFromProps method is called right before the render method:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

3. render

The render() method is required, and is the method that actually outputs the HTML to the DOM.

Example

A simple component with a simple render() method:

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

4. componentDidMount

The componentDidMount() method is called after the component is rendered.
componentDidMount is the last lifecycle method called in the mounting phase. It’s called right after the component is rendered or mounted to the DOM.

With this method, you're allowed to add side effects like sending network requests or updating the component's state. Additionally, the componentDidMount method allows you to make subscriptions like subscribing to the Redux store. You can also call the this.setState method right away; however this will cause a re-render as it kicks in the update phase, since the state has changed.

Note :

You need to be careful with componentDidMount because it may cause unnecessary re-renders.

Example

At first my favorite color is red, but give me a second, and it is yellow instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Updating Phase

The Updating phase is triggered when component's props or state changes.
React has five built-in methods that gets called, in this order, when a component is updated:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

The render() method is required and will always be called, the others are optional and will be called if you define them.

1. getDerivedStateFromProps

In the update phase, the first lifecycle method called is getDerivedStateFromProps. This method is useful if you have updated props and you want to reflect that in the component's state.

For instance, a component’s state may depend on the value of its props. With getDerivedStateFromProps, before the component was even re-rendered, its state can reflect those changes and can be shown (if applicable) to the newly updated component.

This is still the natural place to set the state object based on the initial props.

The example below has a button that changes the favorite color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the favcol attribute, the favorite color is still rendered as yellow:

Example

If the component gets updated, the getDerivedStateFromProps() method is called:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

2. shouldComponentUpdate

In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not.

The default value is true.

The example below shows what happens when the shouldComponentUpdate() method returns false:

Example

Stop the component from rendering at any update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Example

Same example as above, but this time the shouldComponentUpdate() method returns true instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

3. render

The render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

The example below has a button that changes the favorite color to blue:

Example

Click the button to make a change in the component's state:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

4. getSnapshotBeforeUpdate

In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.

If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".

This action triggers the update phase, and since this component has a getSnapshotBeforeUpdate() method, this method is executed, and writes a message to the empty DIV1 element.

Then the componentDidUpdate() method is executed and writes a message in the empty DIV2 element:

Example

Use the getSnapshotBeforeUpdate() method to find out what the state object looked like before the update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

5. componentDidUpdate

The componentDidUpdate method is called after the component is updated in the DOM.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and the color becomes "yellow".

This action triggers the update phase, and since this component has a componentDidUpdate method, this method is executed and writes a message in the empty DIV element:

Example

The componentDidUpdate method is called after the update has been rendered in the DOM:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Unmounting Phase

The unmounting phase is the third and final phase of a React component. At this phase, the component is removed from the DOM. Unmounting only has one lifecycle method involved: componentWillUnmount.

componentWillUnmount

componentWillUnmount is invoked right before the component is unmounted or removed from the DOM. It’s meant for any necessary clean up of the component, like unsubscribing to any subscriptions (i.e., Redux) or canceling any network requests. Once this method is done executing, the component will be destroyed.

Example

The componentWillUnmount method is called when the component is about to be removed from the DOM.

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('root'));

Conclusion

In React, a component can enter three different phases that make up its lifecycle. These phases are mounting, updating, and unmounting. Each phase has lifecycle methods invoked, where you can work on different things related to the component, like its props and state, or actually mounting the component to the DOM (with the render method). However, these methods are only for class-based components.