DEV Community: Vigneshwaran V

Python Practice: Credit Card Number Validation Using Luhn Algorithm

Vigneshwaran V — Fri, 28 Aug 2026 15:01:04 +0000

Today I practised a Python program to check whether a given credit card number is valid using the Luhn Algorithm.

Question

Write a Python program to validate the given credit card number using the Luhn Algorithm.

Code

num = 4532015112830366
copy = num
total=0
digit=0
while copy>0:
    digit=digit+1
    copy=copy//10

pos=digit

while num>0:
    last=num%10
    if pos%2!=0:
        multi=last*2
        if(multi>9):
            l=multi%10
            f=multi//10
            total=total+l+f
        else:
            total=total+multi
    else:
        total=total+last
    num//=10
    pos-=1

print(f"total: {total}")

if total%10 == 0:
    print("Valid Credit Card Number")
else:
    print("Invalid Credit Card Number")

Output

total: 60
Valid Credit Card Number

Python Practice problems-2

Vigneshwaran V — Thu, 27 Aug 2026 13:44:07 +0000

1. Skip the Number 7 Using `continue`

Question

Write a Python program to check whether a given number is divisible by numbers from 2 to 9, but skip the number 7.

Code

num = int(input('Enter Number: '))
i=2
while (i<=9):
    if i==7:
        i=i+1
        continue
    if num%i==0:
        print(num," is divided by ",i)
    else:
        print(num," is not divided by ",i)

    i=i+1

Output

Enter Number: 42
42  is divided by  2
42  is divided by  3
42  is not divided by  4
42  is not divided by  5
42  is divided by  6
42  is not divided by  8
42  is not divided by  9

2. Find the Lowest and Highest Prime Numbers

Question

Write a Python program to find the lowest prime number starting from 11 and the highest prime number less than or equal to 99.

Code

def isPrime(num):
    if(num<2):
        return False
    i=2
    while i<=num//2:
        if(num%i==0):
            return False
        i=i+1

    return True

num=99
copy=num
i=11
while i<=copy:
    if(isPrime(num)):
        if(isPrime(i)):
            print(f"lowest prime: {i}\nhighest prime: {num}")
            break
        else:
            i=i+1
    else:
        num = num - 1

Output

lowest prime: 11
highest prime: 97

3. Find When All Four Phones Ring Together

Question

Four phones ring every 15, 20, 25, and 30 minutes respectively. Write a Python program to find after how many minutes all four phones ring together.

Assume the starting time is 5 O'clock.

Code

phone1=15
phone2=20
phone3=25
phone4=30
num=1
time=5
while True:
    if num%60==0:
        time=time+1
    if(num%phone1==0 and num%phone2==0 and num%phone3==0 and num%phone4==0):
        print(f"After {num} minutes")
        break
    num=num+1

print(f"{time} O'clock")

Output

After 300 minutes
10 O'clock

4. Check Whether Two Numbers Are Amicable Numbers

Question

Write a Python program to check whether 1184 and 1210 are amicable numbers.

Code

num1=1184
num2=1210

def findAmicable(num):
    fact=0
    i=1
    while i<=num//2:
        if(num%i==0):
            fact=fact+i
        i=i+1
    return fact

if(findAmicable(num1) == num2 and findAmicable(num2) == num1):
    print(f"{num1} and {num2} are amicable numbers")

Output

1184 and 1210 are amicable numbers

Constructor in Java

Vigneshwaran V — Wed, 26 Aug 2026 18:58:53 +0000

What Is Constructor

A constructor in Java is a special method that is automatically called when an object of a class is created. Its main purpose is to initialize the object's data.

Rules:

Constructor name must be the same as the class name.
It does not have a return type (not even void).
It is called automatically when you create an object using the new keyword.
A class can have multiple constructors (constructor overloading).

Example:

class Student {

    String name;
    int age;

    Student() {
        name = "Vignesh";
        age = 22;
    }

    void display() {
        System.out.println("Name: " + name);
        System.out.println("Age: " + age);
    }

    public static void main(String[] args) {

        Student s1 = new Student();

        s1.display();
    }
}

Output:

Name: Vignesh
Age: 22

When we write Student s1 = new Student(); the constructor Student() is automatically called.

So the flow is

new Student() => Student() constructor => name = "Vignesh"
age = 22 => s1 object is initialized

Constructor Overloading

Constructor overloading means having multiple constructors in the same class with different parameter lists.

For example

class Student {

    String name;
    int age;

    // Constructor 1
    Student() {
        name = "Unknown";
        age = 0;
    }

    // Constructor 2
    Student(String n) {
        name = n;
        age = 0;
    }

    // Constructor 3
    Student(String n, int a) {
        name = n;
        age = a;
    }

    void display() {
        System.out.println(name + " " + age);
    }

    public static void main(String[] args) {

        Student s1 = new Student();
        Student s2 = new Student("Vignesh");
        Student s3 = new Student("Arun", 21);

        s1.display();
        s2.display();
        s3.display();
    }
}

Output

Unknown 0
Vignesh 0
Arun 21

Here we have three constructors

Student()
Student(String n)
Student(String n, int a)

They have the same name, but their parameter lists are different,

That's constructor overloading.

this Keyword

Once you understand constructors, this becomes much easier.
The this keyword refers to the current object.
The most common use is when the instance variable and constructor parameter have the same name.

Without this

class Student {

    String name;
    int age;

    Student(String name, int age) {

        name = name;
        age = age;
    }
}

This is a problem because Java cannot distinguish the instance variable from the parameter in the way we intend. Both sides refer to the parameter.

So we use this

this with Constructor

class Student {

    String name;
    int age;

    Student(String name, int age) {

        this.name = name;
        this.age = age;
    }

    void display() {
        System.out.println(this.name);
        System.out.println(this.age);
    }

    public static void main(String[] args) {

        Student s1 = new Student("Vignesh", 22);

        s1.display();
    }
}

Output

Vignesh
22

Understand this line

this.name = name;

There are two names.

this.name       =       name
   ↑                       ↑
instance variable       parameter
of current object

So here

this.name = name;

Store the parameter name into the current object's name variable.

this Means Current Object

Consider these Two Objects

Student s1 = new Student("Vignesh", 22);
Student s2 = new Student("Arun", 21);

For s1:

this → s1

For s2:

this → s2

So Therefore here:

this.name

name of the current object

this is a reference variable in Java that refers to the current object. It is commonly used to distinguish instance variables from parameters

References

https://www.geeksforgeeks.org/java/constructors-in-java/
https://www.w3schools.com/java/java_constructors.asp
https://www.programiz.com/java-programming/constructors

Class And Objects in Java

Vigneshwaran V — Wed, 26 Aug 2026 02:44:36 +0000

1.What is a Class?

In Java, a class is a blueprint, template, or prototype used to create objects. It is the foundational building block of Object-Oriented Programming (OOP) that defines the data structure and actions that the resulting objects will possess.

A class is a logical entity, meaning it does not occupy any physical memory space until an object is actively instantiated from it.

Example:
Think of a class as an architectural blueprint for a house. The blueprint itself is not a house—it just details where the doors, windows, and floors go. When you actually build a physical house using that blueprint, you are creating an object (an instance of the class). You can build hundreds of unique houses using that single template.

A class defines:

Data => variables/fields
Behavior => methods

For Example:
Imagine we want to represent a student.

class Student {

    String name;
    int age;

    void study() {
        System.out.println(name + " is studying");
    }
}

Here Student is a class.
It tells us that every Student object can have:

name
age
study()

But the class itself is just the design. We haven't created an actual student yet.

2.What is Object

In Java, an object is a self-contained unit that serves as an instance of a class, combining both data (state) and actions (behavior).

A class acts as a template or blueprint, while an object is the physical realization built from that blueprint. When you instantiate an object, the Java Virtual Machine (JVM) allocates memory for it on the heap space.

In Simple words:
Anything which Existence in the Real World is known as Object.

We create an object using new Keyword:

Student s1 = new Student();

Here:

Student       → Class
s1            → Reference variable
new Student() → Object creation

Then we can give data to the object:

s1.name = "Vicky";
s1.age = 22;

s1.study();

Output:

Vicky is studying

Complete Example

class Student {

    String name;
    int age;

    void study() {
        System.out.println(name + " is studying");
    }
}

class Main {
    public static void main(String[] args) {

        Student s1 = new Student();

        s1.name = "Vicky";
        s1.age = 22;

        System.out.println(s1.name);
        System.out.println(s1.age);

        s1.study();
    }
}

Output

Vicky
22
Vicky is studying

Why do we need objects?

Suppose we want to store information about two students.

We don't need to create two classes.
We create one class:

class Student {
    String name;
    int age;
}

Then create two objects:

Student s1 = new Student();
Student s2 = new Student();

Now each object can have its own data:

s1.name = "Vicky";
s1.age = 22;

s2.name = "Prabhu";
s2.age = 23;

Here, I have one Student class, and I created two objects, s1 and s2, using the Student class.

The Student class defines the state and behavior of Student objects. Each object, such as s1 and s2, has its own state values and can perform the behaviors defined by the class.

Real-world example

Think about a Car.

The design of a car can be represented by a class:

class Car {

    String brand;
    String color;

    void drive() {
        System.out.println(brand + " is driving");
    }
}

Now create objects:

Car car1 = new Car();
Car car2 = new Car();

Give them different values:

car1.brand = "Honda";
car1.color = "Black";

car2.brand = "Toyota";
car2.color = "White";

Both objects are created from the same class, but they have different data.

Class VS Object

There are three things

Student s1 = new Student();
   ↑      ↑       ↑
 class  reference  object
        variable

Student → reference type/class
s1 → reference variable
new Student() → object created in memory The reference variable s1 refers to the object.

A class is a blueprint or user-defined data type that defines the properties and behaviors of an entity. An object is an instance of that class created at runtime.

References

https://www.geeksforgeeks.org/java/classes-objects-java/
https://www.w3schools.com/java/java_classes.asp
https://www.programiz.com/java-programming/class-objects

Python Practice Programs

Vigneshwaran V — Tue, 25 Aug 2026 15:20:13 +0000

In this blog, I have practiced some important Python number-based programs. These programs helped me understand while loops, functions, conditional statements, digit extraction, mathematical operations, and problem-solving logic.

1. Find Two Prime Numbers Whose Sum Is Target

This program tries to find two prime numbers whose sum is equal to the given target number.

Code

def find_prime(no):
    div = 2
    while div <= no//2:
        if no % div == 0:
            return False
        div += 1
    else:
        return True


prime1 = 2
target = 68

i = 1
while i <= target//2:

    result = find_prime(prime1+i)

    if result == True:
        prime2 = prime1+i

        if(prime1+prime2 == target):
            print(prime1, "+", prime2, "=", prime1+prime2)
            break
        else:
            prime1 = prime2
            i = 0

    i = i+1

Output

2 + 66 = 68

Note: The current logic has a mistake because 66 is not a prime number. A correct prime pair for 68 would be 7 + 61 = 68.

2. Neon Number

A Neon Number is a number where the sum of the digits of its square is equal to the original number.

For example:

9² = 81
8 + 1 = 9

Therefore, 9 is a Neon Number.

Code

num = 9
copy = num

num = num * num
result = 0

while num > 0:
    digit = num % 10
    result += digit
    num //= 10

if result == copy:
    print(f"{copy} is neon number")
else:
    print(f"{copy} is not neon number")

Output

9 is neon number

3. Strong Number

A Strong Number is a number where the sum of the factorial of each digit is equal to the original number.

For example:

145

1! + 4! + 5!
= 1 + 24 + 120
= 145

Therefore, 145 is a Strong Number.

Code

num = 145
copy = num
result = 0


def factorial(num):
    res = 1

    while num > 0:
        res = res * num
        num = num - 1

    return res


while num > 0:
    last = num % 10
    result += factorial(last)
    num //= 10


if copy == result:
    print(f"{copy} is Strong number")
else:
    print(f"{copy} is not Strong number")

Output

145 is Strong number

4. Automorphic Number

An Automorphic Number is a number whose square ends with the original number.

For example:

25² = 625

The last two digits are 25, which is the original number.

Therefore, 25 is an Automorphic Number.

Code

num = 25
copy = num
digit = 0

while num > 0:
    digit += 1
    num = num // 10

n = copy
n = n * n
i = 1

while digit > 0:
    i = i * 10
    digit -= 1


if n % i == copy:
    print(f"{copy} is Automorphic Number")
else:
    print(f"{copy} is not Automorphic Number")

Output

25 is Automorphic Number

5. Duck Number

A Duck Number is a number that contains at least one zero.

For example:

Since 1024 contains 0, it is a Duck Number.

Code

num = 1024
copy = num
found = False

while num > 0:
    digit = num % 10

    if digit == 0:
        found = True

    num //= 10


if found:
    print(f"{copy} is Duck Number")
else:
    print(f"{copy} is not Duck Number")

Output

1024 is Duck Number

6. Spy Number

A Spy Number is a number where the sum of its digits is equal to the product of its digits.

For example:

1124

Sum:
1 + 1 + 2 + 4 = 8

Product:
1 × 1 × 2 × 4 = 8

Since both are equal, 1124 is a Spy Number.

Code

num = 1124
copy = num
add = 0
product = 1

while num > 0:
    digit = num % 10

    add += digit
    product *= digit

    num = num // 10


if add == product:
    print(f"{copy} is Spy Number")
else:
    print(f"{copy} is Not Spy Number")

Output

1124 is Spy Number

These number-based programs are a good way to strengthen Python fundamentals.

The main goal of these exercises is not just to get the output, but to understand how loops, conditions, functions, and mathematical operations work together to solve a problem.

Understanding public static void main(String[] args) in Java

Vigneshwaran V — Tue, 25 Aug 2026 03:00:09 +0000

What is the main() method?

The main() method is the entry point of a Java application.

When you run a Java class, the JVM looks for a valid main() method and starts executing the program from there.

public static void main(String[] args) {
    System.out.println("Hello Java");
}

You can think of it as the starting point of a standalone Java application.

When is the main() method called?

The main() method is called when we launch a Java application.
Example:

java Main

The JVM loads the Main class and looks for the appropriate main() method.
If it finds one, execution starts from there:

java Main
   ↓
JVM starts
   ↓
Loads Main class
   ↓
Finds main()
   ↓
Executes main()
   ↓
Program continues

So, you don't normally call main() yourself like:

main();

The JVM invokes it as the application's entry point.

Why do we need the main() method?

The JVM needs to know:

"Where should It start executing this Java application?"

The main() method provides that starting point.
Example:

public class Main {

    public static void main(String[] args) {
        System.out.println("Step 1");
        System.out.println("Step 2");
        System.out.println("Step 3");
    }
}

The JVM starts execution from:

main()

and then executes the statements sequentially.
Without a valid entry-point main() method, a normal standalone Java application cannot start through the java launcher.

How does the main() method work?

public class Main {

    public static void main(String[] args) {
        System.out.println("Hello");
    }
}

You compile it:

javac Main.java

This produces:

Main.class

Then you run:

java Main

The process is approximately:

Main.java
   ↓
javac
   ↓
Main.class
   ↓
java Main
   ↓
JVM
   ↓
Finds main()
   ↓
Executes main()
   ↓
Hello

What does main itself mean?

public static void main(String[] args)

each part has a purpose:

The main() method is the entry point of a standalone Java application. When we run a Java program, the JVM looks for a valid main() method and starts execution from it. We use it to provide the starting point for program execution. The standard signature is public static void main(String[] args).

It is static because the JVM needs to invoke the main() method without creating an object of the class first.

What is String[] args?

String[] args is a String array parameter of the main() method.
String → each value is a String.
[] → it is an array, so it can store multiple Strings.
args → the variable name; it stands for arguments.

So, String[] args means an array of String values passed to the program from the command line.

When is it used?

It is used when we want to pass command-line arguments to a Java program while starting it.

java Main Vicky 5

Here It Looks Like:

args[0] = "Vicky"
args[1] = "5"

Example program:

public class Main {
    public static void main(String[] args) {
        System.out.println(args[0]);
        System.out.println(args[1]);
    }
}

Output:

Vicky
5

Why do we use it?

We use String[] args to allow the program to receive input from outside the program at the time of execution, without hard-coding that input inside the source code.

For Example:

java Calculator 10 20

The program can receive 10 and 20 through args.

How does it work?

When we execute:

java Main Hello Java

Java creates the args array approximately like this:

args
 ├── args[0] → "Hello"
 └── args[1] → "Java"

Then the program can access them using their indexes:

System.out.println(args[0]); // Hello
System.out.println(args[1]); // Java

String[] args is a String array parameter of the main method. It is used to receive command-line arguments when we run a Java program. We use it when we want to pass input to the program during execution instead of hard-coding it. Each command-line argument is stored as a String in the args array and can be accessed using its index.

Note:

args is just a variable name. You can technically write:

public static void main(String[] anything)

and it will work. args is simply the conventional name.

References:

https://www.geeksforgeeks.org/java/java-main-method-public-static-void-main-string-args/
https://medium.com/@sunkavallisowjanya/what-does-public-static-void-main-string-args-df5790cb037c

From Dev to Ops: A Day of Learning, Networking, and Teamwork

Vigneshwaran V — Sat, 22 Aug 2026 19:58:51 +0000

Today, I had the opportunity to attend the From Dev to Ops Tech Meetup at Comcast, Chennai, and it turned out to be a really enjoyable and valuable experience.

As someone who is continuously exploring different areas of software development and DevOps, the meetup introduced me to two topics that were relatively new to me: Platform Engineering and “There Is No Agent.” Both sessions gave me new perspectives on how modern software engineering is evolving.

Platform Engineering 101

The first session, “Platform Engineering 101” by Mohammad Salmaan, introduced me to the concept of Platform Engineering.

One idea that particularly stood out to me was:

Platform engineers build infrastructure as a product for developers.

Instead of expecting every developer to understand and manage complex infrastructure, platform engineering focuses on creating an internal platform that makes development and deployment easier, faster, and more consistent.

This changed the way I looked at infrastructure. I had mostly thought about infrastructure as something developers or DevOps teams configure and maintain. But the idea of treating the platform itself as a product designed for developers was something new and interesting for me.

The session helped me understand how platform engineering can create a better developer experience while also improving standardization, automation, and efficiency.

There Is No Agent

The second session, “There Is No Agent” by Parani and Ansari, was another interesting and thought-provoking session.

The discussion introduced ideas around AI agents, deterministic systems, and non-deterministic LLMs. One concept that caught my attention was the difference between how traditional software behaves and how LLM-based systems behave.

Traditional software generally follows deterministic rules — given the same input and conditions, we expect the same output.

LLMs, on the other hand, are non-deterministic, meaning their responses can vary even when the input is similar.

The session challenged some of the assumptions we commonly make about the term “AI agent” and encouraged us to think more deeply about what actually makes a system an agent.

For me, this was a completely new perspective, and it made me curious to explore AI agents and LLM-based systems in more depth.

Learning Beyond the Sessions

The meetup wasn't only about technical talks.

They also conducted a team activity, where I got the opportunity to work with teammates whom I had just met. It was a great way to communicate, collaborate, and build new connections.

And the best part?

Our team won the activity! 🏆

Winning was definitely exciting, but the bigger takeaway for me was the experience of working together with new people and building a network within the tech community.

More Than Just a Meetup

What I enjoyed most about this meetup was the combination of technical learning, networking, teamwork, and fun.

Both sessions introduced me to concepts that were new to me, and they encouraged me to look beyond the technologies I already know and explore new areas of the software industry.

Events like these remind me that learning doesn't happen only through courses, tutorials, or documentation. Sometimes, listening to people who are working with these technologies, discussing ideas with other learners, and participating in activities can give us completely new perspectives.

Overall, From Dev to Ops was a wonderful experience, and I'm glad I attended.

A day filled with:

Learning → Exploring → Networking → Teamwork

Looking forward to attending more tech meetups, learning from the community, and continuing my journey of continuous learning.

useState and useEffect - React

Vigneshwaran V — Fri, 07 Aug 2026 17:13:44 +0000

useState

The useState hook is a built-in React function that allows you to add and manage local state within functional components. It tracks data that changes over time and automatically re-renders the component whenever that data is updated.

useState is a React Hook that lets you add and manage state in a functional component.

Syntax

const [state, setState] = useState(initialValue);

state: The variable holding the current state value.
setState: The function used to update the state variable.
initialValue: The initial value given to the state variable during the first render. It can be a string, number, boolean, array, object, or null.

Example : Counter

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

How it works

useState(0) initializes count to 0.
Clicking the button calls setCount(count + 1).
React updates count and re-renders the component.
The new value appears on the screen.

Updating State

setCount(count + 1);

Why use useState?

Without useState

let count = 0;
count++;

The UI won't update because React doesn't know the value changed.

With useState

const [count, setCount] = useState(0);

setCount(count + 1);

React knows the state changed and updates the UI automatically.

useState stores data that changes over time.
Calling the setter function (setState) triggers a re-render.
Never modify state directly.

useEffect

The useEffect Hook is a built-in React function that lets you perform side effects in functional components. Side effects are operations that happen outside the normal rendering process, such as fetching data from an API, updating the document title, setting timers, or adding event listeners.

useEffect is a React Hook that lets you perform side effects in a functional component.

Syntax

useEffect(() => {
  // Side effect code
}, [dependencies]);

Callback Function: Contains the side effect code that React executes.
Dependency Array: Controls when the effect should run. It is optional.

Example: Update Document Title

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

How it works

useState(0) initializes count to 0.
When the component renders for the first time, useEffect runs after React updates the UI.
Clicking the button calls setCount(count + 1).
React updates the count value and re-renders the component.
Since count changed, useEffect runs again.
The browser tab title is updated with the latest count.

Updating Side Effects

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Why use useEffect?

Without useEffect

document.title = `Count: ${count}`;

If you write this directly inside the component, it runs every time the component renders, even when it isn't necessary.

With useEffect

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

React runs the effect only when count changes, making your application more efficient.

useEffect is used to perform side effects after rendering.
It keeps side-effect code separate from rendering logic.
The dependency array helps control when the effect should run.

Dependency Array

The dependency array decides when useEffect should execute.

1. No Dependency Array

useEffect(() => {
  console.log("Runs after every render");
});

Output

Runs after the initial render.
Runs again after every re-render.

2. Empty Dependency Array

useEffect(() => {
  console.log("Runs only once");
}, []);

Output

Runs only once after the component is mounted.
Commonly used for API calls or initial setup.

3. Dependency Array with Values

useEffect(() => {
  console.log("Count changed");
}, [count]);

Output

Runs after the first render.
Runs again only when count changes.
Does not run when other state variables change.

Cleanup Function

Some side effects continue running even after a component is removed. A cleanup function allows React to remove those side effects.

import { useEffect } from "react";

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("Running...");
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <h1>Timer Started</h1>;
}

export default Timer;

How it works

setInterval() starts a timer.
The cleanup function is returned from useEffect.
React calls the cleanup function before the component unmounts.
clearInterval() stops the timer and prevents memory leaks.

Common Uses of useEffect

Fetch data from an API.
Update the document title.
Start and stop timers.
Add and remove event listeners.

NOTE

useEffect is used for performing side effects.
It runs after React renders the component.
The dependency array controls when the effect runs.
A cleanup function removes side effects when they are no longer needed.
useEffect helps keep your components clean, organized, and efficient.

The useState Hook is used to create and manage state in React functional components, allowing the UI to update whenever the state changes. The useEffect Hook is used to perform side effects such as fetching data, updating the document title, or working with timers after a component renders. Together, these Hooks form the foundation of modern React development, helping you build dynamic, interactive, and maintainable applications.

References

https://www.geeksforgeeks.org/reactjs/reactjs-usestate-hook/
https://www.geeksforgeeks.org/reactjs/reactjs-useeffect-hook/
https://www.w3schools.com/react/react_usestate.asp
https://www.w3schools.com/react/react_useeffect.asp

Understanding Vite, Components, and NPM - React

Vigneshwaran V — Wed, 15 Jul 2026 19:45:39 +0000

Vite

Vite (pronounced "veet") is a French word meaning "fast" or "quickly". In web development, Vite is a modern frontend build tool created by Evan You, the creator of Vue.js. It provides a faster and more efficient development experience by offering instant server startup, fast Hot Module Replacement (HMR), and optimized production builds. Vite is commonly used with frameworks such as React, Vue, Svelte, and others.

Before tools like Vite, developers used Create React App (CRA) to set up React projects. However, CRA can be slower for large applications. Vite solves this problem by offering faster startup times and instant updates during development.

Why Use Vite?

Faster project creation
Instant server startup
Fast Hot Module Replacement (HMR)
Optimized production builds
Easy configuration

Hot Module Replacement (HMR)
Suppose you change

<h1>Hello React</h1>

<h1>Hello Vignesh</h1>

As soon as you save the file, Vite updates the page without a full refresh.

This is called Hot Module Replacement (HMR).

Creating a React Project Using Vite

npm create vite@latest

Select:

Framework: React
Variant: JavaScript

Then run:

cd project-name
npm install
npm run dev

Vite starts a development server and provides a local URL where you can view your React application.

Basic Vite React Project Structure

my-app/
│
├── node_modules/
├── public/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── index.html

main.jsx

Entry point of the React application

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

App.jsx
Your main component

function App() {
  return <h1>Hello React</h1>;
}

export default App;

What is NPM?

NPM (Node Package Manager) is the default package manager for Node.js. It helps developers install, manage, update, and share packages (libraries) that are used in JavaScript and React applications.

When creating a React project with Vite, NPM is used to install all the required dependencies and run project scripts.

Why Do We Use NPM?
NPM makes development easier by allowing developers to,

Install third-party libraries and frameworks
Manage project dependencies
Update packages to newer versions
Run project scripts and commands
Share reusable code with the JavaScript community.

Common NPM Commands
Install all project dependencies

npm install

Start the development server

npm run dev

Install a specific package

npm install axios

Create a production build

npm run build

Creates an optimized production build of the application.

What is a Package?

A package is a reusable piece of code published to the NPM registry.

What is the NPM Registry?
The NPM Registry is a large online database that stores millions of JavaScript packages and libraries. It acts as a central repository where developers can publish, share, and download packages for use in their projects.
When you run a command like:

npm install react

NPM connects to the registry, downloads the React package, and installs it into your project.

How It Works

Developer
    ↓
npm install react
    ↓
NPM Registry
    ↓
Downloads React Package
    ↓
Installed in Project

Why is the NPM Registry Important?

Provides access to millions of open-source packages.
Allows developers to reuse existing code instead of building everything from scratch.
Makes package installation and updates simple.
Enables developers to publish their own packages for others to use.

The NPM Registry is an online repository that stores and distributes JavaScript packages, allowing developers to install, share, and manage dependencies in their projects.

Examples

React
Axios
Express
Lodash

You can install them using NPM:

npm install react
npm install axios

package.json
NPM uses a file called package.json to store project information and dependencies.
Example

{
  "name": "react-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^19.0.0"
  }
}

This file helps NPM know which packages are required for the project.

NPM is an essential tool in modern JavaScript development. It simplifies dependency management, helps run project scripts, and provides access to millions of open-source packages, making application development faster and more efficient.

What is Component

A Component is a reusable and independent piece of UI (User Interface) in a React application. Components allow developers to break a large user interface into smaller, manageable, and reusable parts.

In React, a component is typically a JavaScript function whose name starts with a capital letter and returns JSX to describe the UI that should be rendered.

For example, a website may contain

Navbar
Sidebar
Footer
Product Card
Login Form
Instead of writing all the code in one file, React lets us create each part as a separate component.

Example

function Header() {
    return <h1>Welcome to React</h1>;
}

export default Header;

This Header component can be used anywhere in the application,

function App() {
    return (
        <div>
            <Header />
            <Header />
        </div>
    );
}

Why Do We Use Components?

Reusability – Create once, use multiple times.
Maintainability – Easier to manage and update code.
Readability – Keeps code clean and organized.
Scalability – Helps build large applications efficiently.

Types of Components

1. Functional Components (Most commonly used)

function Welcome() {
    return <h1>Hello React</h1>;
}

2. Class Components (Older approach)

class Welcome extends React.Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

Difference Between Functional Components and Class Components
Both Functional Components and Class Components are used to create UI in React. The main difference is in how they are written and how they manage state and lifecycle features.

A Component is a reusable, independent piece of UI in React that helps build applications by dividing the interface into smaller and manageable parts.

References

https://www.jspanther.com/blog/what-is-vite/
https://blog.stackblitz.com/posts/what-is-vite-introduction/
https://www.w3schools.com/whatis/whatis_npm.asp
https://www.w3schools.com/react/react_components.asp
https://www.geeksforgeeks.org/reactjs/reactjs-components/

Let's Learn React

Vigneshwaran V — Wed, 15 Jul 2026 18:28:35 +0000

React.js is a free, open-source JavaScript library used for building interactive user interfaces (UIs), primarily for single-page applications. Maintained by Meta and a global developer community, it allows developers to create fast, scalable front-end web applications by managing how data is displayed on the screen.

With React, we create websites using components , which are reusable pieces of UI.

Example
Instead of writing the same HTML multiple times,

<header>My Website</header>
<header>My Website</header>
<header>My Website</header>

In React

function Header() {
    return <header>My Website</header>;
}

Now you can reuse

wherever needed.

Why Do We Need React When We Already Have JavaScript?
JavaScript can build websites, but as applications become larger, managing everything becomes difficult.
Imagine building:

Amazon
Instagram
Netflix
LinkedIn
Using only HTML, CSS, and JavaScript.
here we face some problems with our JS:

1. Too Much DOM Manipulation

In JavaScript

document.getElementById("name").innerText = "Vignesh";

For a large application, you'll write hundreds or thousands of such DOM updates.
React handles DOM updates automatically.

2. Code Becomes Difficult to Maintain

Without React

// Navbar code
// Sidebar code
// Footer code
// Product code
// Cart code

Everything grows into large files.
React divides the UI into small reusable components:

<Navbar />
<Sidebar />
<Product />
<Cart />
<Footer />

This makes code cleaner.

3. Reusability

Without React
You copy and paste UI repeatedly.
Example: ** some applications have the same navbar or sidebar, for that you need to copy that sections or that div to all your pages in your application like(home page, products, cart, orders, wishlist).
**With React

<Navbar />
<Sidebar />

Create once, use anywhere.

Better Performance

React uses a Virtual DOM.

Instead of updating the entire webpage, React updates only the changed part.
This improves performance.
What is Virtual DOM?
React creates a lightweight copy of the real DOM called the Virtual DOM.

Main Features of React

1. Component-Based Architecture
React applications are built using components.

function Navbar() {
    return <h1>Navbar</h1>;
}

Benefits

Reusable
Maintainable
Easy to test

2. JSX
JavaScript XML
It allows us to write HTML-like code inside JavaScript.

function App() {
    return <h1>Hello React</h1>;
}

Without JSX

React.createElement("h1", null, "Hello React");

JSX is easier to read.

3. Virtual DOM
React updates only necessary elements.

Result

Faster rendering
Better performance

4. One-Way Data Flow
Data flows

Parent → Child

Example

<Child name="Vishnu" />

This makes applications easier to understand and debug.

5. State Management
State stores data that can change.

const [count, setCount] = useState(0);

When state changes

setCount(1);

React automatically updates the UI.
No manual DOM manipulation needed.

6. Declarative Programming
In JavaScript

let p = document.getElementById("msg");
p.innerText = "Hello";

In React

<p>{message}</p>

Just update the data

setMessage("Hello");

React updates the UI automatically.

7. Reusable Components
Create once

function Card() {
    return <h2>Product</h2>;
}

Use many times

<Card />
<Card />
<Card />

React is a JavaScript library used to build fast, reusable, and interactive user interfaces using components, JSX, state management, and a Virtual DOM for efficient rendering.

Referneces

https://www.geeksforgeeks.org/reactjs/reactjs-introduction/
https://www.w3schools.com/react/react_intro.asp

Async & Await in JS

Vigneshwaran V — Mon, 13 Jul 2026 09:43:55 +0000

async and await are JavaScript keywords that provide a cleaner, more readable way to handle asynchronous operations without relying on complex Promise chains (.then() and .catch()). They make asynchronous code look and behave more like traditional synchronous code, which simplifies writing and maintaining your applications.
Async
async (Asynchronous): Placed before a function declaration to turn it into an asynchronous function. An async function always returns a Promise. If you return a normal value, JavaScript automatically wraps it inside a resolved Promise.
Await
await (Wait for resolution): Used inside an async function to pause code execution until a Promise resolves or rejects. It allows you to assign the resolved value of a Promise directly to a variable.

We use async/await to make asynchronous code look and behave more like normal synchronous code, making it easier to read and maintain.

We use async/await to execute multiple dependent asynchronous operations in a simple top-to-bottom manner. It allows us to wait for the result of one Promise before using it in the next step, making the code easier to read and manage.

Without async/await (using Promise)

   <script>
        function getUserById(id){
            console.log("Got User id: ",id);

            return new Promise((resolve,rejcet)=>{
                setTimeout(()=>{
                    resolve({id:id, name: 'vicky'});
                },1000)
            })
        }

        function getSubcriptions(id){
            console.log("Got User Subscriptions for: ",id);

            return new Promise((resolve, reject) => {
                setTimeout(()=>{
                    resolve([
                        {id:1, title:'netfilx'},
                        {id:2, title:'hotstar'},
                        {id:3, title:'AmazonPrime'}
                    ]);
                },2000)
            })
        }

        function calculateTotal(subcriptions){
            console.log("Subscriptions: ",subcriptions);

            return new Promise((resolve, reject) => {
                setTimeout(()=>{
                    resolve(subcriptions.length * 100);
                },3000)
            })
        }

        getUserById(1)
        .then(getSubcriptions)
        .then(calculateTotal)
        .then(cost =>{
            console.log("total Cost: ",cost);
        })
    </script>

Ouput

Got User id:  1
promise.html:22 Got User Subscriptions for:  {id: 1, name: 'vicky'}
promise.html:36 Subscriptions:  (3) [{…}, {…}, {…}]
promise.html:49 total Cost:  300

With async/await (using Promise)

    <script>
        function getUserById(id) {
            console.log("Got User id: ", id);

            return new Promise((resolve, rejcet) => {
                setTimeout(() => {
                    resolve({ id: id, name: 'vicky' });
                }, 1000)
            })
        }

        function getSubcriptions(id) {
            console.log("Got User Subscriptions for: ", id);

            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve([
                        { id: 1, title: 'netfilx' },
                        { id: 2, title: 'hotstar' },
                        { id: 3, title: 'AmazonPrime' }
                    ]);
                }, 2000)
            })
        }

        function calculateTotal(subcriptions) {
            console.log("Subscriptions: ", subcriptions);

            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(subcriptions.length * 100);
                }, 3000)
            })
        }

        async function displayTotalCost() {
            try {
                //call the promise one by one 
                const userInfo = await getUserById(1);
                const subcriptions = await getSubcriptions(userInfo);
                const total = await calculateTotal(subcriptions);

                console.log("total Cost: ", total);
                console.log("Everything is Fetched...");
            } catch (error) {
                console.error("Catch-block: ",error);
            }

        }

        displayTotalCost();
    </script>

Output

Got User id:  1
promise_With_Async.html:24 Got User Subscriptions for:  {id: 1, name: 'vicky'}
promise_With_Async.html:38 Subscriptions:  (3) [{…}, {…}, {…}]
promise_With_Async.html:54 total Cost:  300
promise_With_Async.html:55 Everything is Fetched...

In our example:

Get the user details.
Get that user's subscriptions.
Calculate the total cost using those subscriptions.
Display the result.
Each step depends on the previous step, so await is useful.

Why use async/await here?

1. Better Readability
Without async/await

getUserById(1)
    .then(userInfo => {
        return getSubcriptions(userInfo);
    })
    .then(subscriptions => {
        return calculateTotal(subscriptions);
    })
    .then(total => {
        console.log(total);
    });

With async/await

const userInfo = await getUserById(1);
const subscriptions = await getSubcriptions(userInfo);
const total = await calculateTotal(subscriptions);

2. Handles Dependent Operations Easily
Your operations depend on each other:

User
  ↓
Subscriptions
  ↓
Total Cost

You cannot calculate the total before getting subscriptions.
await naturally enforces this order.

const userInfo = await getUserById(1);
const subscriptions = await getSubcriptions(userInfo);
const total = await calculateTotal(subscriptions);

3. Easier Error Handling
A single try...catch can handle errors from all three Promises.

try {
    const userInfo = await getUserById(1);
    const subscriptions = await getSubcriptions(userInfo);
    const total = await calculateTotal(subscriptions);
} catch(error) {
    console.log(error);
}

Without async/await, you'd usually handle errors with .catch().
4. Code Looks Synchronous
Although each function takes time:

getUserById       -> 1 second
getSubcriptions  -> 2 seconds
calculateTotal   -> 3 seconds

the code looks like:

step1();
step2();
step3();

which is easier for us to understand.

In this example, async/await is used because each operation depends on the result of the previous operation. It makes the asynchronous workflow (Get User → Get Subscriptions → Calculate Total) easier to read, maintain, and handle errors compared to Promise chaining with .then().

References
https://www.geeksforgeeks.org/javascript/async-await-function-in-javascript/
https://www.w3schools.com/js/js_async_await.asp

Promise in Js

Vigneshwaran V — Thu, 09 Jul 2026 07:34:13 +0000

A JavaScript Promise is an object representing the eventual completion or failure of an asynchronous operation. It acts as a temporary placeholder for a value that is not available yet, allowing you to write asynchronous code that resembles synchronous logic.

Think of it like ordering food online:

Pending → Order placed, waiting for preparation.
Fulfilled → Food delivered successfully.
Rejected → Order failed or canceled.

JavaScript uses Promises to handle tasks that take time, such as:

Fetching data from an API
Reading files
Database operations
Timers (setTimeout)

A Promise is a placeholder for a value that will be available now, later, or never.

Why Do We Use Promises?

JavaScript executes code line by line (single-threaded).
Some operations take time:

Fetching student details from a server
Loading marks
Loading attendance
Loading fee information

Without Promises, we would use nested callbacks, leading to Callback Hell.

Understanding with One Real Example

Imagine a Student Portal.
We need:

Student Profile
Student Marks
Student Attendance
Each request takes time.

Callback Hell

function getProfile(callback) {

    setTimeout(() => {
        console.log("Profile Loaded");
        callback();
    }, 1000);

}

function getMarks(callback) {

    setTimeout(() => {
        console.log("Marks Loaded");
        callback();
    }, 1000);

}

function getAttendance(callback) {

    setTimeout(() => {
        console.log("Attendance Loaded");
        callback();
    }, 1000);

}

getProfile(() => {

    getMarks(() => {

        getAttendance(() => {

            console.log("Student Dashboard Ready");

        });

    });

});

Ouput

Profile Loaded
Marks Loaded
Attendance Loaded
Student Dashboard Ready

Problem:

getProfile
   ↓
getMarks
   ↓
getAttendance
   ↓
Dashboard

As tasks increase, nesting becomes messy.

Promise Version

Convert each operation into a Promise.

function getProfile() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Profile Loaded");
        }, 1000);

    });

}

function getMarks() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Marks Loaded");
        }, 1000);

    });

}

function getAttendance() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Attendance Loaded");
        }, 1000);

    });

}

//Promise Chaining

//Tasks depend on each other.

getProfile()
.then(result =>{
    console.log(result);
    return getMarks();
})
.then(result=>{
    console.log(result);
    return getAttendance();
})
.then(result=>{
    console.log(result);
    console.log("Student Dashboard Ready");
})

Output

Profile Loaded
Marks Loaded
Attendance Loaded
Student Dashboard Ready

Much cleaner than Callback Hell.

see the below example code and how its working in all the static functions of Promise.

function getProfile() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Profile Loaded");
        }, 1000);

    });

}

function getMarks() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Marks Loaded");
        }, 1000);

    });

}

function getAttendance() {

    return new Promise(resolve => {

        setTimeout(() => {
            resolve("Attendance Loaded");
        }, 1000);

    });

}

Promise.all()

Use when ALL tasks must succeed.
Example:
Profile, Marks, and Attendance can load simultaneously.

Promise.all([
    getProfile(),
    getMarks(),
    getAttendance()
])
.then(results => {

    console.log(results);

});

Output:

[ "Profile Loaded", "Marks Loaded", "Attendance Loaded" ]

Rule

All Success → Success
One Failure → Entire Promise Fails

Example:

Promise.all([
    getProfile(),
    Promise.reject("Marks Server Down"),
    getAttendance()
])
.then(result=>{
    console.log(result);
})
.catch(error => {

    console.log(error);

});

Output

Marks Server Down

Promise.allSettled()

Use when you want every result, even failed ones.

Promise.allSettled([
    getProfile(),
    Promise.reject("Marks Server Down"),
    getAttendance()
])
.then(results => {

    console.log(results);

});

Output

[
  { status: "fulfilled", value: "Profile Loaded"},
  { status: "rejected", reason: "Marks Server Down"},
  { status: "fulfilled", value: "Attendance Loaded"}
]

Rule

Success + Failure
      ↓
Return Everything

Useful for dashboards where some widgets can fail.

Promise.race()

Use when you only care about the FIRST response.
Suppose data comes from multiple servers.

const server1 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 1"), 3000)
    );

const server2 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 2"), 1000)
    );

const server3 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 3"), 2000)
    );

Promise.race([
    server1,
    server2,
    server3
])
.then(result => {

    console.log(result);

});

Output

Server 2

Rule

First Settled Wins

Success or failure doesn't matter.

Promise.any()

Use when you need the FIRST SUCCESS.

const server1 =
    Promise.reject("Server 1 Failed");

const server2 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 2 Success"), 2000)
    );

const server3 =
    new Promise(resolve =>
        setTimeout(() => resolve("Server 3 Success"), 3000)
    );

Promise.any([
    server1,
    server2,
    server3
])
.then(result => {

    console.log(result);

});

Output

Server 2 Success

Rule

Ignore Failures
Return First Success

Only fails if ALL promises fail.

These are static methods of the Promise object that help you work with multiple promises at the same time.

References

https://www.geeksforgeeks.org/javascript/javascript-promise/
https://www.w3schools.com/js/js_promise.asp
https://www.programiz.com/javascript/promise

DEV Community: Vigneshwaran V

Python Practice: Credit Card Number Validation Using Luhn Algorithm

Question

Code

Output

Python Practice problems-2

1. Skip the Number 7 Using continue

Question

Code

Output

2. Find the Lowest and Highest Prime Numbers

Question

Code

Output

3. Find When All Four Phones Ring Together

Question

Code

Output

4. Check Whether Two Numbers Are Amicable Numbers

Question

Code

Output

Constructor in Java

What Is Constructor

Rules:

Example:

Constructor Overloading

this Keyword

Without this

this with Constructor

this Means Current Object

References

Class And Objects in Java

1.What is a Class?

2.What is Object

Complete Example

Why do we need objects?

Real-world example

Class VS Object

There are three things

References

Python Practice Programs

1. Find Two Prime Numbers Whose Sum Is Target

Code

Output

2. Neon Number

Code

Output

3. Strong Number

Code

Output

4. Automorphic Number

Code

Output

5. Duck Number

Code

Output

6. Spy Number

Code

Output

Understanding public static void main(String[] args) in Java

What is the main() method?

When is the main() method called?

Why do we need the main() method?

How does the main() method work?

What does main itself mean?

What is String[] args?

When is it used?

Why do we use it?

How does it work?

Note:

References:

From Dev to Ops: A Day of Learning, Networking, and Teamwork

Platform Engineering 101

There Is No Agent

Learning Beyond the Sessions

More Than Just a Meetup

useState and useEffect - React

useState

Example : Counter

1. Skip the Number 7 Using `continue`