DEV Community: Manthan Ankolekar

🚀 Deploying a Node.js Product API on Kubernetes with MongoDB

Manthan Ankolekar — Thu, 18 Sep 2025 04:44:38 +0000

Modern apps need to scale effortlessly while staying resilient. Kubernetes (K8s) has become the go-to platform for orchestrating containerized apps, ensuring scalability, self-healing, and portability.

In this guide, we’ll build and deploy a Node.js Product API with MongoDB on Kubernetes. You’ll learn how to containerize the app, define Kubernetes manifests, and enable auto-scaling.

🧩 What We’re Building

A Node.js + Express REST API with CRUD for products
MongoDB database with Mongoose ODM
Dockerized application
Kubernetes resources: Deployment, Service, Ingress, Secrets
Horizontal Pod Autoscaler (HPA) for auto-scaling
Ingress Controller for external access

Here’s the flow:

Client → Ingress → Service → Pod(s) running Node.js API → MongoDB
                   ↑
                HPA scales pods dynamically

📁 Project Structure

nodejs-kubernates/
├── src/
│   ├── config/db.js          # MongoDB connection
│   ├── controllers/          # Business logic
│   ├── models/product.model.js
│   ├── routes/product.routes.js
│   ├── middlewares/          # Error handling, validation
│   └── server.js             # Express entry point
├── k8s/
│   ├── deployment.yaml       # App Deployment
│   ├── service.yaml          # ClusterIP Service
│   ├── ingress.yaml          # Ingress (exposes API)
│   ├── secret.yaml           # MongoDB credentials
│   └── hpa.yaml              # Auto-scaling config
├── Dockerfile
├── docker-compose.yml        # Local dev
└── package.json

📝 Step 1 — Build the Node.js Product API

The Product schema:

const productSchema = new mongoose.Schema({
  name: { type: String, required: true, trim: true },
  description: { type: String, default: '' },
  price: { type: Number, required: true, min: 0 },
  inStock: { type: Boolean, default: true }
}, { timestamps: true });

CRUD endpoints are exposed at /api/products.
Example request:

curl -X POST http://localhost:5000/api/products \
  -H "Content-Type: application/json" \
  -d '{"name":"Laptop","price":999.99,"inStock":true}'

📦 Step 2 — Containerize with Docker

Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
CMD ["node", "src/server.js"]

Build and run locally:

docker build -t nodejs-kubernates .
docker run -p 5000:5000 \
  -e MONGO_URI=mongodb://host.docker.internal:27017/product-api \
  nodejs-kubernates

☸️ Step 3 — Kubernetes Manifests

Deployment (`deployment.yaml`)

apiVersion: apps/v1
kind: Deployment
metadata:
  name: product-api
spec:
  replicas: 2
  selector:
    matchLabels:
      app: product-api
  template:
    metadata:
      labels:
        app: product-api
    spec:
      containers:
        - name: product-api
          image: <REGISTRY>/nodejs-kubernates:latest
          ports:
            - containerPort: 5000
          env:
            - name: MONGO_URI
              valueFrom:
                secretKeyRef:
                  name: app-secrets
                  key: MONGO_URI

Service (`service.yaml`)

apiVersion: v1
kind: Service
metadata:
  name: product-api-svc
spec:
  selector:
    app: product-api
  ports:
    - port: 80
      targetPort: 5000
  type: ClusterIP

Ingress (`ingress.yaml`)

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: product-api-ingress
  annotations:
    kubernetes.io/ingress.class: alb
spec:
  rules:
    - http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: product-api-svc
                port:
                  number: 80

Secrets (`secret.yaml`)

apiVersion: v1
kind: Secret
metadata:
  name: app-secrets
type: Opaque
data:
  MONGO_URI: <base64-encoded-uri>

Encode your Mongo URI:

echo -n "mongodb://user:pass@host:27017/product-api" | base64

HPA (`hpa.yaml`)

apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: product-api-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: product-api
  minReplicas: 2
  maxReplicas: 10
  metrics:
    - type: Resource
      resource:
        name: cpu
        target:
          type: Utilization
          averageUtilization: 70

🚀 Step 4 — Deploy to Kubernetes

Push your Docker image to a registry (DockerHub, AWS ECR, GCP Artifact Registry).
Apply manifests:

kubectl apply -f k8s/

Check status:

kubectl get pods
kubectl get svc
kubectl get ingress

Access the API:

curl http://<INGRESS-HOST>/api/products

📊 Step 5 — Scaling & Monitoring

HPA automatically scales pods between 2–10 based on CPU/memory usage.
Liveness & Readiness probes ensure only healthy pods receive traffic.
Logging & Monitoring: Add Prometheus + Grafana, or pipe logs to ELK/CloudWatch.

🔒 Production Considerations

Use managed MongoDB (Atlas, DocumentDB).
Enable TLS/HTTPS for ingress (cert-manager + Let’s Encrypt).
Store secrets in Kubernetes Secrets or external vaults.
Define resource requests & limits for predictable scaling.
Add a CI/CD pipeline to build, push, and deploy automatically.

🎯 Conclusion

You’ve just deployed a Node.js Product API on Kubernetes with:
✅ Dockerized app
✅ Kubernetes Deployment, Service & Ingress
✅ Secrets for sensitive data
✅ Auto-scaling with HPA

This setup provides a strong foundation for microservices in production.

🔗 GitHub Repository: manthanank/nodejs-kubernates
🧑‍💻 Author: Manthan Ankolekar

🚀 Deploying a Node.js CRUD App on AWS with Terraform

Manthan Ankolekar — Tue, 16 Sep 2025 04:30:00 +0000

Managing cloud infrastructure manually can quickly become messy. Terraform allows us to define infrastructure as code (IaC), making deployments repeatable, version-controlled, and automated.

In this guide, we’ll build a Node.js CRUD API (with Express + MongoDB) and deploy it to AWS ECS Fargate using Terraform.

🧩 What We’re Building

A RESTful Todo API (CRUD endpoints with Express + MongoDB).
Dockerized app pushed to Amazon ECR.
AWS ECS Fargate service running containers in a managed VPC.
Application Load Balancer (ALB) to expose the service.
Secrets Manager for storing MongoDB credentials securely.
CloudWatch Logs for centralized logging.

Here’s the final architecture:

Client → ALB → ECS (Fargate Task) → MongoDB (Atlas/Local)
        ↑
      CloudWatch (logs)

🛠️ Tech Stack

Backend

Node.js + Express
MongoDB + Mongoose
CORS + dotenv

Infrastructure

Docker (containerization)
Terraform (IaC)
AWS ECR (image registry)
AWS ECS Fargate (orchestration)
AWS ALB (load balancing)
AWS Secrets Manager (secure DB credentials)
AWS IAM + Security Groups

📁 Project Structure

Your project is split into two main parts: app code and infra code.

manthanank-nodejs-terraform/
├── server.js                 # Express entry
├── Dockerfile                # Build container
├── config/db.js              # Mongo connection
├── controllers/todoController.js
├── models/Todo.js
├── routes/todoRoutes.js
├── terraform/                # Infrastructure as Code
│   ├── vpc.tf                # VPC + networking
│   ├── ecs.tf                # ECS cluster/service
│   ├── ecr.tf                # ECR repo
│   ├── iam.tf                # IAM roles/policies
│   ├── security.tf           # Security groups
│   ├── logs.tf               # CloudWatch logs
│   ├── secrets.tf            # Secrets Manager
│   ├── variables.tf          # Config vars
│   ├── outputs.tf            # Useful outputs
│   └── provider.tf           # AWS provider setup

📝 Step 1 — Build the Node.js API

Our CRUD endpoints live under /api/todos.
Example schema:

const todoSchema = new mongoose.Schema({
  title: { type: String, required: true, trim: true },
  description: { type: String, default: "" },
  completed: { type: Boolean, default: false },
  createdAt: { type: Date, default: Date.now },
});

Start locally:

npm install
npm run dev

Test:

curl http://localhost:5000/api/todos

📦 Step 2 — Dockerize the App

Dockerfile:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
ENV PORT=5000
EXPOSE 5000
CMD ["node", "server.js"]

Build locally:

docker build -t nodejs-todo-api .
docker run -p 5000:5000 -e MONGO_URI=your_mongo_uri nodejs-todo-api

☁️ Step 3 — Terraform AWS Infrastructure

Initialize

cd terraform
terraform init

Key Resources

ECR — stores our container image (ecr.tf).
ECS Fargate Service — runs containers (ecs.tf).
ALB + Target Group — load balancing (ecs.tf).
VPC + Subnets — networking (vpc.tf).
IAM Roles — ECS execution permissions (iam.tf).
Secrets Manager — injects MONGO_URI securely (secrets.tf).
CloudWatch Logs — for application logs (logs.tf).

🐳 Step 4 — Push Image to ECR

Create the repo:

terraform apply -target=aws_ecr_repository.app -auto-approve

Build & push:

AWS_ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
REGION=ap-south-1
REPO=$AWS_ACCOUNT_ID.dkr.ecr.$REGION.amazonaws.com/node-crud-app
IMAGE_TAG=v1

docker build -t node-crud-app:$IMAGE_TAG .
aws ecr get-login-password --region $REGION | \
  docker login --username AWS --password-stdin $AWS_ACCOUNT_ID.dkr.ecr.$REGION.amazonaws.com
docker tag node-crud-app:$IMAGE_TAG $REPO:$IMAGE_TAG
docker push $REPO:$IMAGE_TAG

🚀 Step 5 — Deploy with Terraform

Apply the full infra:

terraform apply

Grab the output:

terraform output alb_dns

Test:

curl http://<alb_dns>/api/todos

🔄 Step 6 — Deploy Updates

Build and push a new image with IMAGE_TAG=v2.
Update variables.tf → image_tag = "v2".
Run:

terraform apply -var="image_tag=v2"

ECS performs a rolling update behind the ALB.

📊 Monitoring & Logs

CloudWatch Logs: All app logs stream automatically.
ALB Health Checks: Ensure tasks are healthy.
Troubleshooting: Check ECS task logs in CloudWatch if service won’t start.

🔒 Security Best Practices

Use private subnets + NAT Gateway in production.
Restrict Secrets Manager IAM role to a single secret ARN.
Use immutable image tags (v1, v2) instead of latest.
Enable HTTPS on ALB with ACM certificates.

🎯 Conclusion

With just a few .tf files, we’ve automated provisioning of:

Containerized Node.js API
Secure AWS networking & IAM
Load-balanced ECS service
Secrets and logs managed by AWS

This approach scales to any microservice — just add more services, modules, or CI/CD pipelines.

✨ Pro tip: Next step, integrate GitHub Actions or GitLab CI to automatically build/push Docker images and run terraform apply for full CI/CD.

🔗 GitHub Repository: manthanank/nodejs-terraform
🧑‍💻 Author: Manthan Ankolekar

Terraform Setup Guide: Getting Started with Infrastructure as Code

Manthan Ankolekar — Mon, 25 Aug 2025 10:16:48 +0000

Terraform, developed by HashiCorp, is one of the most widely used tools for Infrastructure as Code (IaC). It allows you to define, provision, and manage cloud resources across providers like AWS, Azure, GCP, and many others using simple, declarative configuration files.

If you’re just getting started, this guide will walk you through the setup process of Terraform, from installation to writing your first configuration file.

🔧 Prerequisites

Before diving in, make sure you have:

A working terminal (Linux, macOS, or Windows with WSL/PowerShell).
A cloud provider account (AWS, Azure, or GCP).
Basic understanding of command line operations.

📥 Step 1: Install Terraform

On macOS (using Homebrew)

brew tap hashicorp/tap
brew install hashicorp/tap/terraform

On Linux (Debian/Ubuntu)

sudo apt-get update && sudo apt-get install -y gnupg software-properties-common
wget -O- https://apt.releases.hashicorp.com/gpg | gpg --dearmor | sudo tee /usr/share/keyrings/hashicorp-archive-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/hashicorp-archive-keyring.gpg] https://apt.releases.hashicorp.com $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/hashicorp.list
sudo apt update
sudo apt-get install terraform

On Windows

Download the Terraform binary from Terraform Downloads.
Extract the .zip file.
Add the Terraform binary path to your System Environment Variables.

✅ Verify installation:

terraform -v

📂 Step 2: Configure Cloud Provider Access

Terraform uses provider plugins (like AWS, Azure, GCP). You’ll need credentials to let Terraform interact with your cloud.

AWS Example

Install AWS CLI and configure:

aws configure

Provide:

AWS Access Key ID
AWS Secret Access Key
Default region

Terraform will automatically use these credentials.

📝 Step 3: Create Your First Terraform Project

Create a new project folder:

mkdir terraform-setup && cd terraform-setup

Create a configuration file main.tf:

provider "aws" {
  region = "us-east-1"
}

resource "aws_s3_bucket" "example" {
  bucket = "my-terraform-setup-bucket"
  acl    = "private"
}

This configuration:

Defines AWS as the provider.
Creates a private S3 bucket named my-terraform-setup-bucket.

▶️ Step 4: Initialize Terraform

Run:

terraform init

This downloads necessary plugins (e.g., AWS provider).

🔍 Step 5: Validate and Plan

Check if configuration is valid:

terraform validate

Preview changes:

terraform plan

🚀 Step 6: Apply Configuration

Deploy resources:

terraform apply

Type yes when prompted. Terraform will create the S3 bucket.

🗑 Step 7: Destroy Resources

To clean up:

terraform destroy

Confirm with yes.

🌟 Conclusion

You’ve successfully installed and set up Terraform, configured your first provider, and deployed an AWS S3 bucket. From here, you can scale to more complex infrastructures—VPCs, databases, load balancers, Kubernetes clusters, and beyond.

By mastering Terraform, you’ll gain full control over your infrastructure in a reproducible, version-controlled, and automated way.

Essential Terraform CLI Commands You Should Know

Manthan Ankolekar — Wed, 20 Aug 2025 05:03:24 +0000

Terraform is one of the most popular Infrastructure as Code (IaC) tools, allowing developers and DevOps engineers to define and provision cloud resources in a declarative way. The Terraform CLI (Command Line Interface) is the primary way to interact with Terraform — from initializing projects to applying infrastructure changes.

In this blog, we’ll go through the most commonly used Terraform CLI commands with examples.

1. `terraform init`

The very first command you run in a new Terraform project.
It initializes the working directory, downloads the required provider plugins, and sets up the backend.

terraform init

👉 Run this whenever you start a new project or modify providers/backends.

2. `terraform validate`

Validates the configuration files in your project to ensure there are no syntax or logical errors.

terraform validate

👉 Helps catch issues early before running plan or apply.

3. `terraform plan`

Generates an execution plan showing what actions Terraform will take (create, update, destroy resources).

terraform plan

You can also save the plan to a file:

terraform plan -out=tfplan

👉 Use this before applying changes to confirm what Terraform will do.

4. `terraform apply`

Applies the planned changes to your infrastructure.

terraform apply

Or apply a saved plan:

terraform apply tfplan

👉 This is the command that actually provisions resources.

5. `terraform destroy`

Destroys all resources defined in the Terraform configuration.

terraform destroy

👉 Be careful! This will tear down your infrastructure.

6. `terraform show`

Displays information about your Terraform state or saved plan.

terraform show

👉 Useful for inspecting what’s deployed.

7. `terraform output`

Shows output values defined in your outputs.tf.

terraform output

👉 Great for retrieving information like IP addresses, instance IDs, etc.

8. `terraform state`

Manages the Terraform state file. Common subcommands:

List resources in state:

  terraform state list

Show details about a specific resource:

  terraform state show aws_instance.example

👉 Use this for debugging or manual state inspection.

9. `terraform fmt`

Formats Terraform configuration files (.tf) to a canonical style.

terraform fmt

👉 Helps maintain clean, consistent code formatting.

10. `terraform version`

Displays the currently installed Terraform version.

terraform version

👉 Always good to verify when collaborating across teams.

Quick Reference Table

Command	Purpose
`terraform init`	Initialize project & download providers
`terraform validate`	Validate config files
`terraform plan`	Preview execution plan
`terraform apply`	Apply infrastructure changes
`terraform destroy`	Destroy resources
`terraform show`	Show state or plan
`terraform output`	Display output values
`terraform state`	Manage state file
`terraform fmt`	Format configuration files
`terraform version`	Show Terraform version

Conclusion

Terraform CLI commands are the backbone of working with Infrastructure as Code. By mastering these commands, you’ll be able to confidently manage cloud resources across providers like AWS, Azure, and GCP.

Whether you’re just starting with Terraform or already deploying production workloads, these commands should be part of your daily toolkit.

🚀 Automate Media Uploads to Cloudinary with Node.js: A Complete Guide

Manthan Ankolekar — Thu, 07 Aug 2025 05:12:50 +0000

Managing media uploads manually can be a pain — especially when you're dealing with hundreds of images and videos. Whether you're a content creator, developer, or business owner, storing media in the cloud should be fast, organized, and reliable.

That's where Cloudinary Uploader comes in.

Built with Node.js, this open-source tool automates the process of uploading images and videos from a local folder to Cloudinary. It supports batch processing, multi-format handling, retry logic, and more.

Let’s dive into how it works and how you can get started in minutes.

🌟 Why Use This Uploader?

Here’s what makes Cloudinary Uploader stand out:

🔄 Bulk Upload: Upload dozens or even hundreds of media files in one go.
☁️ Cloud Storage: Securely store media on Cloudinary.
🧠 Smart Detection: Automatically detects and separates images from videos.
📦 Batch Processing: Upload files in customizable batch sizes.
♻️ Retry Mechanism: Automatically retries failed uploads.
📊 Detailed Summary: Get a clear report of success and failure rates.

⚙️ Features at a Glance

Feature	Description
Supported Formats	Images: PNG, JPG, GIF, SVG, WebP, etc. Videos: MP4, AVI, MOV, etc.
Organized Uploads	Uploads are organized into `images/` and `videos/` folders in Cloudinary
Retry Logic	Configurable retry attempts for failed uploads
Batch Configuration	Upload files in batches (default: 10 per batch)
CLI Monitoring	Real-time progress updates in the terminal

📁 Project Structure

cloudinary-uploader/
├── images/           # Place your media files here
├── index.js          # Main script
├── .env              # Your Cloudinary credentials (not committed)
├── .env.example      # Example for setting up your env file
├── package.json      # Project metadata and dependencies
└── README.md         # Project documentation

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/manthanank/cloudinary-uploader.git
cd cloudinary-uploader

2. Install Dependencies

npm install

3. Configure Environment Variables

Create a .env file based on the provided .env.example:

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Find these credentials in your Cloudinary dashboard.

🖼️ Uploading Media

Place all your images and videos inside the images/ folder.
Run the uploader:

npm start

You’ll see real-time logs like:

📁 Found 150 media files to upload
🖼️  Images: 120
🎥 Videos: 30
⚙️  Processing in batches of 10 files
🔄 Retry attempts: 3
...
🎥 Uploaded video1.mp4 (video): https://res.cloudinary.com/demo/video/upload/videos/video1.mp4

🛠️ Customization Options

📐 Batch Size & Retry Attempts

You can adjust these in index.js:

const BATCH_SIZE = 10;       // Upload 10 files per batch
const RETRY_ATTEMPTS = 3;    // Retry failed uploads 3 times
const RETRY_DELAY = 2000;    // Delay between retries (in ms)

➕ Add More File Types

To support additional formats, modify the extension arrays:

const IMAGE_EXTENSIONS = [...];
const VIDEO_EXTENSIONS = [...];

🧪 Error Handling & Troubleshooting

Problem	Solution
❌ Folder not found	Ensure `images/` exists
❌ Invalid credentials	Check your `.env` file
❌ Upload failed	Check file format, size, internet connection
❌ Resource type error	Verify correct file extension

📊 Upload Summary

At the end of each run, you’ll see a detailed summary:

📊 Upload Summary:
🖼️  Images - ✅ Successful: 118, ❌ Failed: 2
🎥 Videos - ✅ Successful: 30, ❌ Failed: 0
📈 Overall Success Rate: 98.7%

🔐 Security Best Practices

Never commit your .env file to version control
Store your credentials securely (e.g., use CI/CD secrets in production)
Cloudinary uses secure URLs by default for all media

📦 Tech Stack

Node.js: Core runtime
Cloudinary SDK: Media upload API
dotenv: Load environment variables
fs & path: File system utilities

🧑‍💻 Contributing

Want to improve this project?

Fork the repo
Create a new feature branch
Commit and push your changes
Submit a pull request 🚀

📘 Final Thoughts

If you're tired of dragging and dropping files into a web dashboard, Cloudinary Uploader offers a powerful alternative. With just one command, you can upload hundreds of images and videos into organized Cloudinary folders — complete with progress tracking and error handling.

Give it a try and streamline your media management today.

🔗 GitHub Repository: manthanank/cloudinary-uploader
🧑‍💻 Author: Manthan Ankolekar

🚀 Building an AI-Powered Resume Optimizer with Angular, Node.js & Gemini

Manthan Ankolekar — Wed, 23 Jul 2025 04:47:09 +0000

Struggling to tailor your resume for specific job postings? I built an AI-powered Resume Optimizer that helps you analyze your resume against any job description using Google Gemini. Here's how I built it using the MEAN stack (MongoDB-free) with Angular standalone components, Tailwind CSS, and Google’s Generative AI API.

💡 Why I Built This

Every job role has unique expectations, but most resumes stay generic. I wanted to automate the process of matching resumes with job descriptions, highlighting what's missing, and suggesting improvements—all with the power of AI.

🛠 Tech Stack

Layer	Stack
Frontend	Angular 20, Standalone Components, Tailwind CSS, Signals, Reactive Forms
Backend	Node.js, Express, Multer
AI Engine	Google Gemini via `@google/genai`
Parsing	`pdf-parse` and `mammoth` for file extraction

🧠 Features

✅ Upload Resume (PDF or DOCX)
✅ Upload or Paste Job Description
✅ Get AI analysis:
- Match Score
- Missing Keywords
- Tailored Suggestions
🌗 Dark Mode Support
📱 Fully Responsive UI

🧩 System Architecture

[Angular UI] --> [Express API] --> [Gemini API]
                    |
             [PDF/DOCX Parser]

🖥️ Frontend Highlights

Standalone Angular Components
Signals for local state (resumeFile, jdFile, etc.)
Native control flow (@if, @else) over structural directives
Reactive Forms for input validation
Markdown rendering using ngx-markdown for AI response formatting

const form = fb.nonNullable.group({ jdText: '' });
const resumeFile = signal<File | null>(null);
const result = signal<string | null>(null);

🔧 Backend Highlights

File parsing using pdf-parse (PDF) and mammoth (DOCX)
Gemini prompt format:

Compare the following resume and job description. Provide:
- Match score (0-100)
- Missing keywords
- Suggested improvements

AI integration via @google/genai:

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
const response = await ai.models.generateContent({ model: 'gemini-2.5-flash', contents: prompt });

🚀 How to Run It Locally

🔗 Clone the Project

git clone https://github.com/manthanank/resume-optimizer.git
cd resume-optimizer

⚙️ Backend Setup

cd backend
npm install
cp .env.example .env
# Add your GEMINI_API_KEY
npm run dev

🌐 Frontend Setup

cd frontend
npm install
ng serve

🌐 Hosted Live (Demo)

Frontend: https://resume-optimizer-app.vercel.app
Backend API: https://resume-optimizer-api.vercel.app

📦 Future Improvements

🔐 Auth for saving resume history
📝 Editable resume templates
📄 PDF download of feedback
🌍 Multi-language support

📃 License

MIT — Free to use and modify. Contributions welcome!

✨ Final Thoughts

This project taught me how to combine real-time file processing with AI content generation in a full-stack TypeScript environment. Whether you're building something for HR, job seekers, or just love AI—this app is a perfect side project to learn from.

👉 Want to try it?
🔗 GitHub Repo
🚀 Live Demo

Exploring Binary Assignment Operators with Angular v20.1.0 🚀

Manthan Ankolekar — Mon, 21 Jul 2025 06:32:47 +0000

If you're learning JavaScript or Angular and want to better understand how binary assignment operators work, this simple interactive Angular project is just for you.

We often use operators like +=, *=, ||=, and ??= in our code—but rarely see them in action visually. That’s where this app comes in. Built with Angular 20, it's a lightweight demo that helps you learn through interaction, not just theory.

💡 What Does the App Do?

This Angular app demonstrates:

Mathematical operations like increment, decrement, multiply, square.
Logical operations like setting a message only if empty, or resetting a flag only if true.
Nullish coalescing behavior using ??=.

It uses Angular’s built-in event bindings to update values instantly on button click and reflects those changes on the screen.

🧱 Project Overview

manthanank-angular-examples/
├── src/
│   └── app/
│       ├── app.ts
│       ├── app.html
│       ├── app.css
│       └── app.config.ts
├── angular.json
├── package.json
└── README.md

🖥️ The User Interface

The UI is clean and split into three sections:

1. 🔢 Count Operations

<button (click)="count += 1">Increment (+1)</button>
<button (click)="count -= 1">Decrement (-1)</button>
<button (click)="count *= multiplier">Multiply</button>
<button (click)="count **= 2">Square</button>

These buttons perform typical arithmetic updates on a count variable.

2. 💬 Message Controls

<button (click)="message ||= 'Hello, Angular!'">Set Message if Empty</button>
<button (click)="message &&= ''">Clear Message if Exists</button>

You can conditionally set or clear a message based on its current value.

3. ✅ Boolean Logic

<button (click)="condition ??= true">Set if Undefined / Null</button>
<button (click)="condition &&= false">Reset if True</button>

A neat way to visualize boolean flag logic!

⚙️ How to Run the App

Step 1: Clone the Repo

git clone https://github.com/manthanank/angular-examples.git
cd angular-examples

Step 2: Install Dependencies

npm install

Step 3: Run the Development Server

ng serve

Visit http://localhost:4200 in your browser to see it live.

✅ Running Tests

Execute unit tests with:

ng test

This runs the included specs using Karma and Jasmine.

📚 What You’ll Learn

Core Angular concepts like component structure, event binding, and template rendering
Practical use of JavaScript operators like ||=, &&=, ??=, +=, **=
A modular and clean Angular 20 project setup

🏁 Final Words

Learning doesn't always have to be complex. This Angular app is a simple and visual way to deepen your understanding of binary assignment operators—and sharpen your Angular skills at the same time.

🔗 Check out the code here: GitHub Repo

🚀 Build a Prompt Generator App with Angular, Tailwind CSS & Google Gemini API

Manthan Ankolekar — Thu, 17 Jul 2025 05:02:51 +0000

If you're looking to explore Generative AI in your Angular apps, this blog is for you! Learn how I built a modern, full-featured Prompt Generator using Angular, Tailwind CSS, and the Gemini API—with a secure Node.js/Express backend to keep things safe.

🌟 What Is the Prompt Generator?

The Prompt Generator is a web app that allows you to:

✅ Generate creative, formal, funny, or concise AI prompts
✅ Copy or save prompts to favorites
✅ View history of generated prompts
✅ Toggle between light and dark mode
✅ Enjoy a responsive and modern UI with Tailwind CSS
✅ Use a secure backend to protect your API key

Live Demo: prompt-generator-application.vercel.app
GitHub Repo: https://github.com/manthanank/prompt-generator

🏗️ Tech Stack

Frontend: Angular 20+, Tailwind CSS 4, ngx-markdown
Backend: Node.js + Express
AI Engine: Google Gemini Pro (via @google/genai SDK)

🔒 Why Use a Backend?

Google's Gemini API requires your API key. Exposing it in frontend code is risky. That's why this app routes all AI requests through a secure Express server, hosted on Vercel.

📁 Project Structure

prompt-generator/
├── backend/          → Express API for Gemini
├── src/              → Angular frontend
│   ├── app/          → Standalone Angular components
│   ├── environments/ → Environment config
│   └── styles.css    → Tailwind + Dark mode styles

🔧 Setup & Installation

1. Clone the Repository

git clone https://github.com/manthanank/prompt-generator.git
cd prompt-generator

2. Install Frontend & Backend Dependencies

npm install
cd backend
npm install

3. Configure the Environment

Create a .env file inside backend/:

GEMINI_API_KEY=your_gemini_api_key_here
PORT=3000

4. Start Development Servers

# In backend/
npm start

# In frontend (root)
npm start

🧠 How It Works

🧾 Prompt Generation Flow:

User Input: Choose style + enter description
API Call: Angular sends prompt to Express backend
Gemini API: Generates high-quality content
Display: Angular shows the markdown-formatted result
Extras: History, Favorites, Copy to Clipboard, Dark Mode

✨ Highlight Features

🗂️ Prompt Styles

Choose from:

Creative
Formal
Funny
Concise

Each style is prepended to the user’s input to guide the AI.

const styledInput = `Generate a ${style.toLowerCase()} prompt for: ${userInput}`;

📜 Markdown Rendering with ngx-markdown

Gemini returns responses with headings, lists, and bold text. To display this nicely, we use ngx-markdown:

<markdown [data]="generatedPrompt"></markdown>

💡 Favorites & History with localStorage

Save your best prompts or revisit recent ones!

localStorage.setItem('favorites', JSON.stringify(this.favoritePrompts));

🌓 Dark Mode with Tailwind + Signals

Using Angular Signals and Tailwind dark classes:

toggleDarkMode() {
  this.darkMode.update(d => !d);
  document.documentElement.classList.toggle('dark', this.darkMode());
}

🔐 Backend: Express + Gemini API

Secure route that proxies requests to Gemini:

app.post('/generate-content', async (req, res) => {
  const { userPrompt } = req.body;
  const response = await ai.models.generateContent({
    model: 'gemini-2.5-flash',
    contents: userPrompt,
  });
  res.json({ text: response.text });
});

Hosted via Vercel with a vercel.json config.

🌍 Deployment Options

✅ Frontend: GitHub Pages / Vercel / Netlify
✅ Backend: Vercel Serverless Function or Railway
✅ Environment: Environment-safe with .env & build-time env usage

📸 Screenshots

(Add screenshots of UI, light/dark modes, mobile view, etc.)

🧩 Future Enhancements

✍️ Prompt Templates
🔐 Login with Google (Firebase Auth)
📊 Prompt analytics
🗃️ Export to PDF or Markdown

📜 License

MIT © Manthan Ankolekar

🙌 Final Thoughts

Building this project was a great exercise in combining the power of:

Angular Standalone Components + Signals
Tailwind’s dark mode utility
AI text generation via Google Gemini
And clean local storage features

🔗 Check it out: prompt-generator-application.vercel.app
📦 View the Code: github.com/manthanank/prompt-generator

🚗 Build a Ride Cost Calculator App with Angular 20 and Tailwind CSS 4

Manthan Ankolekar — Mon, 30 Jun 2025 04:35:50 +0000

Managing fuel expenses is essential whether you're a frequent commuter or a casual rider. In this blog, I’ll walk you through how I built a modern Ride Cost Calculator App using Angular 20, Tailwind CSS 4, and the latest signals API from Angular.

This sleek, mobile-responsive app helps you estimate ride costs, track history, and even export or print receipts.

🔗 Source Code: GitHub – manthanank/ride-cost-calculator-app
🚀 Live Demo: ride-cost-calculator-app.vercel.app

✨ Features at a Glance

🚀 Real-time fuel cost calculation
📊 Persistent ride history (local storage)
📁 Export ride history as CSV
🖨️ Print ride receipts
🌍 Choose currency (₹/\$/€) and unit (km/mi)
🌓 Toggle light/dark mode
🔁 Responsive design for all screen sizes

🔧 Tech Stack

Angular 20 – Standalone components & Signals
Tailwind CSS 4 – Utility-first styling
TypeScript – Strictly typed reactive app
PostCSS – Tailwind configuration

🧮 How the Calculator Works

The calculator uses this formula:

Total Cost = (Distance / Mileage) × Petrol Price

Supports:

Distance in km or miles
Fuel prices in ₹, \$, €
Mileage in km/l

The app auto-converts miles to kilometers before calculation and provides a cost breakdown with fuel efficiency tips.

📊 Ride History with Export & Print

Every ride you calculate is saved locally and appears in a history list. From there, you can:

🧾 Print a ride receipt
📥 Export all records as a CSV
🧹 Clear history with one click

CSV export is handled by dynamically generating a blob and creating a download link. Printing is done in a new browser window with minimal styling.

🌓 Dark Mode & Signals

The app uses Angular Signals to track and react to state changes like theme preference, ride input, and form reset. Theme mode is persisted in localStorage:

const newTheme = isDarkMode() ? 'light' : 'dark';
localStorage.setItem('theme-preference', newTheme);

🗂️ Project Structure

ride-cost-calculator-app/
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── models/
│   │   └── services/
│   ├── environments/
│   └── styles.css  ← Tailwind imported here
├── public/
├── angular.json
├── package.json
└── .postcssrc.json

▶️ Get Started

Clone & Install

git clone https://github.com/manthanank/ride-cost-calculator-app.git
cd ride-cost-calculator-app
npm install

Run Locally

ng serve
# Open http://localhost:4200

Build for Production

ng build --configuration production

💬 Final Thoughts

This Ride Cost Calculator App is more than just a fuel estimator. It's a demonstration of modern Angular capabilities using signals, defer blocks, and standalone architecture, all styled elegantly with Tailwind CSS.

Whether you're tracking daily commutes or planning a road trip, this tool brings clarity to your fuel expenses — with a delightful user experience.

🔗 Check it out: ride-cost-calculator-app.vercel.app
📦 View the Code: github.com/manthanank/ride-cost-calculator-app

Peeking Under the Hood: How to List Your npm Packages

Manthan Ankolekar — Fri, 30 May 2025 07:07:22 +0000

As developers, we spend a lot of time installing packages. Whether it's a new framework, a handy utility, or a build tool, npm install is a command we type almost subconsciously. But how often do we stop to consider what's actually installed on our system or within our projects?

Knowing how to list your npm packages is more than just curiosity; it's a fundamental skill for debugging, understanding project dependencies, and maintaining a healthy development environment. Let's dive into the essential commands you need to master.

Why List Your npm Packages?

Before we get to the "how," let's quickly touch on the "why":

Debugging: Is your build failing? A conflicting package version might be the culprit. Listing packages helps you identify what's actually installed.
Auditing: Want to check if a specific package (or an outdated version) is lurking in your project?
Understanding Dependencies: For new team members, listing packages provides a quick overview of a project's ecosystem.
Cleanup: Identifying globally installed packages you no longer use can help keep your system tidy.

The Essential `npm list` Command

The core command for this task is npm list. However, used on its own, it can sometimes feel like drinking from a firehose, especially in large projects. That's why we use some helpful flags to refine the output.

1. Listing Global Packages: Your System-Wide Tools

Global packages are those installed with the -g flag, making them accessible from any directory on your system. Think of them as your development Swiss Army knife – CLI tools like create-react-app, nodemon, or prettier.

To see what's installed globally at the top level:

npm list -g --depth=0

list: The primary command.
-g: Tells npm to look for global packages.
--depth=0: This is crucial! It limits the output to only the top-level packages, preventing a massive, nested tree of dependencies you likely don't care about at this level.

The output will be concise, showing just the main global packages you've installed.

2. Listing Local Project Packages: What Powers Your Current Project

When you run npm install without the -g flag inside a project directory, packages are installed locally within that project's node_modules folder. These are the specific dependencies required for that particular project to run.

To see the top-level dependencies of your current project (those listed directly in your package.json file):

npm list --depth=0

Notice the absence of -g here. This command assumes you're running it within your project's root directory. It will show you packages like react, express, webpack, etc., without showing their dependencies.

3. The Full Local Dependency Tree: When You Need All the Details

Sometimes, you do need to see the entire dependency graph – including all the nested packages that your direct dependencies rely on. This can be useful for deep debugging or understanding the full footprint of your node_modules folder.

To see absolutely everything installed locally in your current project:

npm list

Fair warning: For even moderately sized projects, the output of npm list without --depth=0 can be incredibly long and overwhelming. Use this when you genuinely need to trace a specific sub-dependency.

4. Listing Packages in a Specific Directory (Optional)

If you need to inspect packages in a project directory other than your current one, you can use the --prefix flag:

npm list --prefix /path/to/your/other/project --depth=0

Replace /path/to/your/other/project with the actual path.

Best Practices

Start with --depth=0: Most of the time, you only care about the top-level packages. This flag will save you a lot of scrolling.
Understand Global vs. Local: Always be mindful of whether you're dealing with global tools or project-specific dependencies.
Use npm list for troubleshooting: It's a powerful first step when something isn't quite right with your dependencies.

Conclusion

The npm list command, especially when combined with the --depth=0 flag, is an indispensable tool in any developer's arsenal. It empowers you to quickly understand your development environment, whether you're managing global utilities or navigating the intricate web of project dependencies. So go ahead, peek under the hood – you might be surprised by what you find!

Getting Started with Angular: Installing and Creating Your First Project

Manthan Ankolekar — Sat, 24 May 2025 05:45:00 +0000

Angular is a powerful front-end framework for building web applications with TypeScript. Whether you're just starting out or returning to Angular after a break, setting up your development environment properly is the first step. This guide walks you through installing the Angular CLI and creating a new project tailored to your needs.

Installation

The Angular CLI (Command Line Interface) is the recommended way to start Angular development. It provides commands to generate components, services, and modules, and to build, test, and serve your application.

Install the Angular CLI globally using your preferred package manager:

Using npm:

npm install -g @angular/cli

Using pnpm:

pnpm install -g @angular/cli

Using yarn:

yarn global add @angular/cli

Using bun:

bun install -g @angular/cli

Installing a Specific Version

If you need a specific Angular CLI version, replace version-number with your desired version:

npm install -g @angular/cli@version-number

Updating Angular CLI

To update to the latest version:

npm install -g @angular/cli@latest

Verifying Installation

To verify that the CLI is installed and to check the version:

ng version

Creating a New Angular Project

You can create a new Angular project using the ng new command. Replace [PROJECT NAME] with your desired project name.

Basic command:

ng new [PROJECT NAME]

With options:

Without standalone components (Angular v17+):

  ng new [PROJECT NAME] --standalone=false

Without routing:

  ng new [PROJECT NAME] --routing=false

Without testing setup:

  ng new [PROJECT NAME] --skip-tests=true

Without installing dependencies:

  ng new [PROJECT NAME] --skip-install=true

Without Git initialization:

  ng new [PROJECT NAME] --skip-git=true

With experimental zoneless mode:

  ng new [PROJECT NAME] --experimental-zoneless

Note: Standalone components were introduced in Angular v14 and became the default in Angular v17. Use the --standalone flag to toggle this behavior during project creation.

Running Your Application

After your project is created, navigate to the project directory:

cd [PROJECT NAME]

Then start the development server:

ng serve

Open your browser and go to:
http://localhost:4200

Conclusion

With the Angular CLI installed and your first project created, you're now ready to dive into building modern web applications with Angular. Stay tuned for more posts exploring components, routing, services, and beyond!

Mastering Angular's New Control Flow with TypeScript Code Examples

Manthan Ankolekar — Tue, 25 Mar 2025 05:09:21 +0000

With the introduction of Angular v17, the framework brings a new control flow syntax that replaces *ngIf, *ngFor, and *ngSwitch with @if, @for, and @switch. This makes Angular templates more readable, maintainable, and closer to JavaScript.

In this blog, we'll explore these features with practical TypeScript examples and how to implement them in real-world Angular applications.

Important Update: The traditional structural directives (*ngIf, *ngFor, and *ngSwitch) will be deprecated in Angular v20. Now is the time to migrate your code to the new control flow syntax.

1. Setting Up an Angular Component

Let's create a simple User Dashboard component that displays user details, a list of orders, and order status.

✅ TypeScript (`dashboard.component.ts`)

import { Component } from '@angular/core';

interface Order {
    id: number;
    status: 'pending' | 'shipped' | 'delivered';
}

interface User {
    name: string;
    isLoggedIn: boolean;
    role: 'admin' | 'user';
    orders: Order[];
}

@Component({
    selector: 'app-dashboard',
    standalone: true,
    templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
    user: User | null = {
        name: 'John Doe',
        isLoggedIn: true,
        role: 'user',
        orders: [
            { id: 1, status: 'pending' },
            { id: 2, status: 'shipped' },
            { id: 3, status: 'delivered' },
        ],
    };

    toggleUser() {
        this.user = this.user ? null : {
            name: 'John Doe',
            isLoggedIn: true,
            role: 'user',
            orders: [
                { id: 1, status: 'pending' },
                { id: 2, status: 'shipped' },
                { id: 3, status: 'delivered' },
            ],
        };
    }
}

2. Using `@if` for Conditional Rendering

We'll use @if to check if a user is logged in and display the appropriate UI.

✅ Template (`dashboard.component.html`)

<button (click)="toggleUser()">Toggle User</button>

@if (user) {
    <h2>Welcome, {{ user.name }}!</h2>
    <p>You are logged in as {{ user.role }}.</p>
} @else {
    <p>Please log in to access your dashboard.</p>
}

✨ Benefits of @if

No need for <ng-container> wrappers.
Uses a syntax similar to JavaScript if-else.

3. Using `@for` to Loop Through Orders

We'll display a list of orders using @for.

✅ Template for @for

@if (user) {
    <h3>Your Orders:</h3>
    <ul>
        @for (order of user.orders; track order.id) {
            <li>Order #{{ order.id }} - {{ order.status }}</li>
        } @empty {
            <li>No orders found.</li>
        }
    </ul>
}

✨ Benefits of @for

track order.id improves performance.
@empty handles cases when there are no items.

4. Using `@switch` to Handle Order Status

We'll use @switch to display different messages based on order status.

✅ Template

<ul>
    @for (order of user?.orders ?? []; track order.id) {
        <li>
            Order #{{ order.id }} - 
            @switch (order.status) {
                @case ('pending') { <span class="text-warning">Pending</span> }
                @case ('shipped') { <span class="text-info">Shipped</span> }
                @case ('delivered') { <span class="text-success">Delivered</span> }
                @default { <span class="text-muted">Unknown</span> }
            }
        </li>
    }
</ul>

✨ Benefits of @switch

Eliminates excessive *ngSwitchCase directives.
Closely mirrors JavaScript switch syntax.

5. Full Working Example

✅ Complete Implementation: TypeScript (`dashboard.component.ts`)

import { Component } from '@angular/core';

interface Order {
    id: number;
    status: 'pending' | 'shipped' | 'delivered';
}

interface User {
    name: string;
    isLoggedIn: boolean;
    role: 'admin' | 'user';
    orders: Order[];
}

@Component({
    selector: 'app-dashboard',
    standalone: true,
    templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
    user: User | null = {
        name: 'John Doe',
        isLoggedIn: true,
        role: 'user',
        orders: [
            { id: 1, status: 'pending' },
            { id: 2, status: 'shipped' },
            { id: 3, status: 'delivered' },
        ],
    };

    toggleUser() {
        this.user = this.user ? null : {
            name: 'John Doe',
            isLoggedIn: true,
            role: 'user',
            orders: [
                { id: 1, status: 'pending' },
                { id: 2, status: 'shipped' },
                { id: 3, status: 'delivered' },
            ],
        };
    }
}

✅ HTML (`dashboard.component.html`)

<button (click)="toggleUser()">Toggle User</button>

@if (user) {
    <h2>Welcome, {{ user.name }}!</h2>
    <p>You are logged in as {{ user.role }}.</p>

    <h3>Your Orders:</h3>
    <ul>
        @for (order of user.orders; track order.id) {
            <li>
                Order #{{ order.id }} - 
                @switch (order.status) {
                    @case ('pending') { <span class="text-warning">Pending</span> }
                    @case ('shipped') { <span class="text-info">Shipped</span> }
                    @case ('delivered') { <span class="text-success">Delivered</span> }
                    @default { <span class="text-muted">Unknown</span> }
                }
            </li>
        } @empty {
            <li>No orders found.</li>
        }
    </ul>
} @else {
    <p>Please log in to access your dashboard.</p>
}

6. Key Takeaways

✅ More Readable – No more * prefixes, making it JavaScript-like.

✅ Less Boilerplate – No need for extra <ng-container> elements.

✅ Better Performance – Faster change detection and rendering.

✅ Improved Debugging – Clearer syntax simplifies troubleshooting.

✅ Future-Proof – Legacy syntax will be deprecated in Angular v20.

7. How to Enable the New Control Flow?

The new control flow is enabled by default in Angular v17+. If you're using an older version, upgrade your Angular project:

ng update @angular/core @angular/cli

ng generate @angular/core:control-flow

Once updated, you can start using @if, @for, and @switch in your templates.

Final Thoughts

Angular's new control flow is a game-changer, making templates cleaner, more readable, and more efficient. With the upcoming deprecation of the old syntax in Angular v20, now is the perfect time to embrace these changes. Whether you're working on a small project or a large enterprise app, adopting this syntax will make your Angular development experience smoother and faster while ensuring your codebase stays current with Angular's evolution.

8. Exploring the Code

Visit the GitHub repository to explore the code in detail.

9. Live Demo

Check out the working example on StackBlitz

10. Additional Resources

Angular New Control Flow Documentation

Feel free to leave comments or questions below! 👋

DEV Community: Manthan Ankolekar

🚀 Deploying a Node.js Product API on Kubernetes with MongoDB

🧩 What We’re Building

📁 Project Structure

📝 Step 1 — Build the Node.js Product API

📦 Step 2 — Containerize with Docker

☸️ Step 3 — Kubernetes Manifests

Deployment (deployment.yaml)

Service (service.yaml)

Ingress (ingress.yaml)

Secrets (secret.yaml)

HPA (hpa.yaml)

🚀 Step 4 — Deploy to Kubernetes

📊 Step 5 — Scaling & Monitoring

🔒 Production Considerations

🎯 Conclusion

🚀 Deploying a Node.js CRUD App on AWS with Terraform

🧩 What We’re Building

🛠️ Tech Stack

📁 Project Structure

📝 Step 1 — Build the Node.js API

📦 Step 2 — Dockerize the App

☁️ Step 3 — Terraform AWS Infrastructure

Initialize

Key Resources

🐳 Step 4 — Push Image to ECR

🚀 Step 5 — Deploy with Terraform

🔄 Step 6 — Deploy Updates

📊 Monitoring & Logs

🔒 Security Best Practices

🎯 Conclusion

Terraform Setup Guide: Getting Started with Infrastructure as Code

🔧 Prerequisites

📥 Step 1: Install Terraform

On macOS (using Homebrew)

On Linux (Debian/Ubuntu)

On Windows

📂 Step 2: Configure Cloud Provider Access

AWS Example

📝 Step 3: Create Your First Terraform Project

▶️ Step 4: Initialize Terraform

🔍 Step 5: Validate and Plan

🚀 Step 6: Apply Configuration

🗑 Step 7: Destroy Resources

🌟 Conclusion

Essential Terraform CLI Commands You Should Know

1. terraform init

2. terraform validate

3. terraform plan

4. terraform apply

5. terraform destroy

6. terraform show

7. terraform output

8. terraform state

9. terraform fmt

10. terraform version

Quick Reference Table

Conclusion

🚀 Automate Media Uploads to Cloudinary with Node.js: A Complete Guide

🌟 Why Use This Uploader?

⚙️ Features at a Glance

📁 Project Structure

🚀 Getting Started

1. Clone the Repository

2. Install Dependencies

3. Configure Environment Variables

🖼️ Uploading Media

🛠️ Customization Options

📐 Batch Size & Retry Attempts

➕ Add More File Types

🧪 Error Handling & Troubleshooting

📊 Upload Summary

🔐 Security Best Practices

📦 Tech Stack

🧑‍💻 Contributing

📘 Final Thoughts

🚀 Building an AI-Powered Resume Optimizer with Angular, Node.js & Gemini

💡 Why I Built This

🛠 Tech Stack

🧠 Features

Deployment (`deployment.yaml`)

Service (`service.yaml`)

Ingress (`ingress.yaml`)

Secrets (`secret.yaml`)

HPA (`hpa.yaml`)

1. `terraform init`

2. `terraform validate`

3. `terraform plan`

4. `terraform apply`

5. `terraform destroy`

6. `terraform show`

7. `terraform output`

8. `terraform state`

9. `terraform fmt`

10. `terraform version`

The Essential `npm list` Command