Forem: Sathish A

My Interview Experience at MVI Technologies

Sathish A — Fri, 17 Oct 2025 18:10:50 +0000

Hello everyone,

I want to share my small experience about my interview in MVI Technologies. That day was really awesome and I learn many new things.

First I got one mail from MVI about my interview schedule. I was so happy that time. They give me 5 days time for prepare before interview day. So I start my preparation immediately.

In that days I study Core Java, JDBC, Arrays, and String programs. I practice many examples and try to improve my logic. I was little nervous but I feel I prepare well.

Then the interview day came. That day was really nice. They ask some good questions from file handling and collections. Some questions are mix with small task also, that was nice.

But only problem is time not enough, only 1 hour. Some questions I see first time. I try my best.

These are questions from the interview.

1.Task: Create a Java program that works with product data and calculates category-wise total sales.
Requirements:

Create a text file named products.txt programmatically.

Write product details into the file. Each product has three fields: Category (e.g., Phone, Stationery, Music) Product Name,Product Price

Category Details: There should be 3 categories: Phone, Stationery, Music. Each category should have 3 products with their respective prices. Example: Phone,Samsung,15000

Read the products.txt file and calculate the total price for each category.

Create another text file named summary.txt and write category-wise totals into it. Each line should have the category name and total price.

Example:
Phone : 125000
Stationery : 100
Music : 14200

2.Task:
You are given a string containing letters and digits. Write a program to reverse only the letters in the string while keeping the digits in their original positions.
Rules:

Only alphabetic characters (a–z, A–Z) should be reversed.

Digits (0–9) must remain at the same index as in the original string.

No inbuilt methods like StringBuilder.reverse() should be used; solve it manually using arrays and loops.

Example:
Input: "abcde1234fgh567ijk"
Output: "kjihg1234fed567cba"

3.Task:
Write a Java program that performs the following tasks:

Create a file programmatically and allow the user to enter data.

Store the user input in a Map with the following structure: Key: Long number Value: String word

The user should enter at least 3 entries. Validation Conditions: Condition 1 (Number Key Validation):

The number must be even.

All digits of the number must also be even. Examples of valid numbers: 246864, 888222 Examples of invalid numbers: 248678 (contains 7, 1, 3, etc.), 135792 Condition 2 (String Value Validation):

The word must have exactly 6 letters.

The word must be a palindrome (reads the same forwards and backwards). Example valid words: madam, deeded (length must be exactly 6) If both conditions are satisfied, store the number-word pair in the Map.

After all entries are collected, write the valid data from the Map to another file.

Example Flow:
Enter number: 246864
Enter word: deified
--> Valid, added to map

Enter number: 248678
Enter word: madamm
--> Invalid, not added

4.Task:
Write a Java program that performs the following steps:

Get employee details from the user: Employee ID (integer) Employee Name (string) Employee Salary (double) 2.Store all the entered employees into an ArrayList as objects. Create an Employee class with fields: id, name, and salary. Get input for at least 3 employees from the user.

After storing data in ArrayList, Transfer all data into a LinkedList (one by one using loops — don’t use foreach or streams).

Then, programmatically create a file (e.g., employees.txt) and write all the employee details into the file.

Use only basic collections and file handling — No Map, no Stream, no foreach. Use Iterate interface

I put all answers in my repo. If you want you can check my repo...

[(https://gitlab.com/sathish226/java_exercise/-/tree/main/Java/src/mvi_Interview_Questions?ref_type=heads)]

Thank you for reading my small experience.

Keep learning and never give up!!!

TossConf 25 – Day 2: Stalls, Real-World Tech Talks, and Open Source Energy

Sathish A — Sun, 27 Jul 2025 17:54:01 +0000

After enjoying Day 1, I was very excited for Day 2 of TossConf 25. This day was even more special because we were going to set up our own stall and interact with more people.

We got up early, took the bus, and reached St. Joseph’s College on time. The college team welcomed us with a nice breakfast. After eating, we moved to the auditorium to start the sessions.

1st Talk – Vijay Kumar Sir

Topic: Between Ethics and Exploitation – The Infinity War

He gave a deep and thoughtful talk about ethics in open-source.
He shared that he personally used open-source tools for many years but never contributed back, and this made him feel guilty
He admitted feeling guilty for not contributing earlier but said guilt can be a motivation to start helping the community.
His speech made many of us reflect on our role in open source.

2nd Talk – Yagapriyan

Topic: A Short History of Linux

This was a simple and interesting session on how Linux began.
He explained how Linux started from UNIX and became a major part of today's tech world.The talk was short but very informative.At the end, he asked a few questions and gave small gifts to the winners, making it fun.

Track Sessions - I joined Track 1

There were two parallel tracks with different talks. I attended Track 1 and listened to some great sessions.

Talk 1: – Keerthana Rajesh Kumar

Topic: Dissecting Ente – A Deep Dive into the Architecture

She explained the technical structure of a secure photo storage app called Ente.She showed where and how user photos are stored securely.
Used clear diagrams and explained complex parts in simple words.
I learned how apps manage memory and file storage safely.

Talk 2: – Abinaya SV

Topic: What’s Data Engineering? Your First Steps into Open Source

This was a beginner-friendly session on data engineering.She explained what data engineers do in real-time projects.She shared how to start learning data tools and contribute to open-source.
Her slides were very visual, with pictures and examples that made it easy to follow.

We Set Up Our Stall – F-Droid Stall

After the sessions, it was time for our stall!
Our stall name was F-Droid – an open-source app store for Android.There were 29+ stalls around us.I explained F-Droid to many students – how it works, why it's safe, and how it supports privacy.
I felt proud to be part of this and was happy that our stall was one among many amazing ones.

Xonotic Game

At one nearby stall, I learned about Xonotic, an open-source first-person shooting game.It runs smoothly even on low-end laptops.
I had never heard of it before, and I was surprised by how good it looked and performed.

Lunch Time – Biryani!!

Syed bro called us for lunch. We went to the canteen and had delicious biryani. It was a great meal and gave us energy for the rest of the day.

Track 2 – More Talks in the Afternoon

I joined Track 2 and attended more exciting sessions.

Talk 1: Bowrna Prabhakaran

Topic: A Day in the Open Source World

She shared her daily routine as an open-source contributor working with Tamil text tools.She talked about tools like DictPress, MNPhone, and KNPhone.She explained phonetic hash algorithms, used to help with Tamil typing and search.
It was inspiring to see how she contributes to the Tamil tech community.

Talk 2: Naveen Kumar

Topic: Speed It Up – Building Efficient Indexes in MongoDB

This was a technical but very easy-to-understand session about MongoDB indexing.He showed how to create indexes to make MongoDB faster.Explained the difference between single field and compound indexes.He used real-time examples and explained ESR rules clearly.
He ended with a quiz and gave a book to the winner.
Even though I didn’t know much about MongoDB, I understood his explanation very well.

Talk 3: Hari

Topic: Building Web with Batteries Included

He spoke about tools that help build websites quickly.He introduced tools like Builder and Prappy, which make web development easier.
His presentation was simple and smooth, great for people new to web building.

Final Talk – Achnandhi

Topic: What Does Open Really Mean in Open Source AI?

This was a very thoughtful talk about open-source and artificial intelligence.He said that many AI projects share code but do not share datasets.This makes the AI “not fully open”.
He explained how this affects transparency and the freedom to learn and improve AI.

Group Photo & Final Moments

After the final session, we all went to take a group photo. I spoke with many people, including Syed Jafer, Thanga Ayyanar, Mohamed Salman, and Mohan Sir.

We shared our experiences and took a moment to thank Payilagam and Muthuramalingam Sir for giving us this opportunity.

TossConf 25 was one of the biggest and most useful events I have attended. I learned many new things in simple Tamil, explored new tools, and gained real inspiration from open-source contributors.

I look forward to the next event—this time not just as a participant, but maybe as a volunteer and speaker too.

Thank you for reading my blog!
See you in the next event. Have a great day!!

My Day 1 TossConf 25: Exploring Open Source with Tamil Linux Community

Sathish A — Sun, 27 Jul 2025 17:35:47 +0000

Last week on Friday and Saturday, I attended a very special event called TossConf 25, a meetup by the Tamil Linux Community. It was held at St. Joseph’s College, Chennai.

I usually go to tech meetups every Saturday in Chennai. But TossConf 25 was different. It was special for me because we started preparing for it one month before. I was part of the Payilagam team that helped organize the event. We were all excited to take part and contribute.

We went by bus and reached the college on time. Many known faces from the Linux community were there. I met Syed Jafer brother, Thanga Ayyanar brother, Salman brother, and especially Mohan Sir. Many other people also arrived and started talking and networking.

First Talk by Senthil Kumar Sir:

He is an expert in Debian Operating System. His topic was all about:

1.What is Debian OS
2.How Debian started (its history)
3.His personal experience using Debian in daily life

He explained that Debian is a free and stable Linux-based OS used worldwide. He shared how he started using it, and what makes Debian special. His way of explaining was clear, and it was a great start to the event.

Second Talk by Vignesh Sir – SFLC (Software Freedom Law Center)

His topic was about the legal side of technology. He spoke about:

What SFLC does (they provide legal help for free software users).
Why it is important to know your digital rights.
How to contact SFLC if you face any legal issues related to open-source or tech.

His speech was very unique and helpful. He explained that even in open-source, we should know about privacy, licenses, and laws. He gave some real examples and told us how SFLC supports people in such cases.

Tea Break & Workshop Time:

After a short tea break, we moved on to the workshops. Two workshops were happening at the same time, but I chose to attend the one on Nix OS.

Workshop:1 – Nix OS by Viveganandhan VS

This was my first time learning about Nix OS, and the session was amazing.

He explained that Nix OS is a special Linux system where software installation is very clean and doesn't affect other parts of the system.
He used diagrams and pictures to explain how Nix OS works step by step.
He showed how Nix OS helps to manage packages easily, reduce mistakes, and save time.
Even though the topic was advanced, he made it easy to understand with real-life examples.

Before this session, I didn’t know anything about Nix OS. But after this workshop, I got a good idea of what it is and why it’s useful. He didn’t have much time, but he tried to cover everything possible.

Lunch Break:

After the workshop, we had a tasty veg lunch at the college canteen. The college team gave us a warm welcome. It felt nice to sit and relax with other participants and talk about what we had learned so far.

Workshop 2:Assembly Language Workshop by Mohan Sir

This was the session I was waiting for. Even though I reached a bit late, I quickly understood what was going on.

Mohan Sir explained how Assembly Language works and how it’s connected to C programming.
He created a simple example program and showed how the machine understands code at a low level.
He explained each step slowly and clearly, which made it easy for beginners to follow.

It was a very informative and hands-on session. I took full notes and learned how assembly is used with C to control how programs run at the hardware level.

Day 1 Ends – Connections & Memories

At the end of the day, I met many new friends, spoke with senior developers, and interacted with Tamil Linux Community members. We had evening snacks, took some photos together, and then returned home by bus.

It was a wonderful day full of learning, meeting new people, and gaining real knowledge. I enjoyed every moment.But I was even more excited about Day 2, because we were going to put up our own stall and show what we had learned and built!!

Day 2 -> Continue.....

June Ponal, July Kaatre - The JAVA Tech Meetup!!

Sathish A — Sat, 12 Jul 2025 19:26:12 +0000

HI Developers!!

Hi friends, Welcome to my blog. What we are going to see in this blog is that today we went to CODE_ON_JVM meetup at Yuniq Technologies in TICEL bio park and i am going tell you all about it. This is my second meetup.

First of all, I have to say that i studied and grew up in Trichy. But within a month of coming to Chennai. I came to know that there is so much Tech meetups and Hackathons going on. Which makes me very specail. I get to know what is going on in Meetup and I meet a lot of Developers and working proffesionals. This is the main prupose of this meetups. I really like going to meetups like this.

Today we left velachery at 9.00 am and reached the meeting place at 10.00. Then first they gave us a NOTE, PEN, and ID CARD. Then we went inside and sat in the first row. Because only then did the presentation become clear. Today there were two presentations. One on Multi-Threading and Two on Garbage Collection. On below of this we will see clearly about the two topic.

SESSION 1: Concurrency Multithreading Dasavathaaram:

Speaker : Jenifer
Description : Real time example clearly explained how the multi-threading concept works using the character in the film Deasavadhaaram.
Concurrency - The ability of a program to execute multiple tasks or process at the same time.
Thread - A thread is the smallest unit of execution in a program.
Multi-threading - Means running two or more threads simultaneously in a program.
Concepts:
1.Krishnaveni Paati - Deadlock
- Deadlock refers to a situation in multithreaded programming where two or more threads are permonently blocked, each waiting for a resorces that another thread in the group holds.

2.Fletcher - Race Condition

A race condition in java occurs when multiple threads concurrently access and modify shared data, and the final outcome of the program depends on the timing and interleaving of these threads' execution.

3.Govind Ramaswamy - Main Thread

The main thread in java is the default thread that begins execution automatically when a java virtual maching(JVM) starts a program. It is the primary thread from which all other "child" threads can be created or spawned.

4.Avatar Singh - Daemon Thread

A daemon thread in java is a low-prority, background thread that provides services to user thread. Its primary characteristics is that it does not prevent the JVM from exiting.

5.Shinghen Narahashi - Threadpool

A thread pool in java is a managed collection of threads that are readily available to excute tasks. Instead of creating a new thread for every task, which incures overhead, a thread pool reuses existing threads.

6.Vincent Poovaraagan - Synchornization

Synchornization is a mechanism used to control the access of multiple threads to shared resources, ensuring data consistency and preventing race conditions in a multithreaded environment.

7.Balram naidu - Watchdog

Daemon threads in java are well-suited for background tasks like log monitoring because they do not prevent the JVM from exiting when all user threads hava completed.

8.George W.Bush - Exceptional Thread

AN 'exception in thread' indicates that an unhandled exception occured within a specific thread, leading to its termination. This message often appears in the console output when a program encounters a runtime error that was not caught and processed by appropriate exception handling mechanisms.

9.Rangaraj Nambi - AutomicInteger

AtomicInteger is a class in java.util.concurrent.atomic package that provides atomic operations (thread-safe) on integers.

10.K.S.Ravikumar - Semaphore

Semaphore is a synchronization aid that controls access to a shared resources by maintaining a set of permits. It is used to limit the number of threads that can concurrently access a particular resources or section of code.

I have covered it as much as possible, just to make notes. I don't know much about this, but after comparing it, I realize that it would work for this. I hope those who know about mult-threading, it will understand.

TEA BREAK:

After everyone had their biscuits, the meetup continued after a short break. During this break, one of my senior came and asked me about the logical reasoning question that i had asked in his interview. It was very good. I will tell you about it in detail in the next blog.

SESSION 2: Connection Game

This is a good game. The way i'm going to about it is that you're given two or three photos and you have to use them to figure out what the name in technology side. This game was really good and eye-catching.

Example:Above the picture answer is DataBase

SESSION 3: Garbage Collection (GC)

Speaker : Karthik
Description : What does garbage collection do, what are its benefits, and how does it behave when the version is change.

1.What is Garbage Collection?

GC is the automatic process of reclaiming memory used by unreachable objects. Prevents memory leaks and manages memory efficiently.

2.Why is GC Important?

Automatic memory management and Improves application performance. Then avoids memory leaks and crashe its used for essential for scalablity in modern applications.

3.Types of GC in JAVA?

1.Serial GC, 2.Parallel GC, 3.CMS, 4.G1 GC, 5.ZGC, 6.Shenandoah

4.Benefits of GC in JDK 17?

Higher throughput, shorter GC pause times and improved scalablity and predictability.

SESSION 3: Quizz Competition

The end there was a quizz competition. The Questions was all about java. I don't know much about it, but two of my seniors who came with me came first and won the prize. One was named Surya Prabhakar and the other was Vignesh. This game helped me learn java better.

SESSION 4: Group Photo Session

Finally, everyone stood together, took a photo. Bought some stickers and talked to new friends. Then we ate lunch at the hotel and left. Today was a great day for me. I would like to express thanks to Code on JVM Team for conduct the superb meetup.

Thank you for reading my blog Friend. See you in the next intresting blog...

Keep Learning!! Build Connection!!!

Code, Community, and Coffee: A Day at the Java Meetup

Sathish A — Sun, 29 Jun 2025 03:11:37 +0000

Hi Techies! I’ve got something cool to share from my Java meetup

Yesterday, I attended a Java-focused meetup "Code on JVM – Anaivarum Ondraga Code Seivom" (which means "Let’s all code together on JVM" in Tamil). The meetup was organized at Contentstack, who generously provided the venue. It was a full-day event filled with tech talks, fun activities, and great networking.

1.Starting Strong: JAMstack & Strapi

The event started with a presentation on Strapi, an open-source CMS (Content Management System). The speaker explained how Strapi helps developers easily manage and deliver content to websites and mobile apps.

Why websites become slow?

When a website is built using traditional methods (like PHP + MySQL), every time a user visits a page, the server has to process many tasks – fetch content, apply styling, run logic, etc. This increases loading time.
But with JAMstack, we separate these tasks. It uses JavaScript for logic, APIs for data, and Markup (HTML) for design – making the site fast and scalable.

Example: Imagine your favorite news app. Instead of building every page from scratch, the data is already available in Strapi as an API. So, the app can just fetch and display the news instantly – fast and smooth!

2.Bug Screening Challenge – Test Your Eyes!

Next, we had a fun team activity: the "Error Screening Challenge." Teams were shown a piece of buggy code on screen and had just 45 seconds to fix it.

I was part of a team called “The JVM Five.” We worked together, but honestly, I didn’t perform my best. Still, it was a valuable experience.

Here’s a realistic code example from that session:

Buggy Code:

public class Calculator {
    public static void main(String[] args) {
        int a = 10;
        int b = 0;
        int result = a / b;
        System.out.println("Result: " + result);
    }
}

Problem:

This code will throw a divide by zero error because we can't divide any number by zero.

Fixed Code:

public class Calculator {
    public static void main(String[] args) {
        int a = 10;
        int b = 0;

        if (b != 0) {
            int result = a / b;
            System.out.println("Result: " + result);
        } else {
            System.out.println("Error: Cannot divide by zero!");
        }
    }
}

This is how we use basic conditional checks to prevent runtime errors.

3.Break Time – Snacks, Juice & Small Talks

After the challenge, we had a short break with juice and snacks. A good moment to refresh and network with fellow developers.

4.From Traditional to Digital – The Power of Data Pipelines

One of the managers from Contentstack gave a session on data pipelines and how the digital world has evolved.

He compared:

Traditional Era – Data was stored in files and handled manually.
Middle Era – Databases became common, and Excel or Access were used to analyze data.
Now (Digital Era) – We use real-time tools like Snowflake, BigQuery, Kafka, and dashboards to manage and analyze huge volumes of data automatically.

Example: Think about how customer data was collected before – handwritten forms. Today, when you use an app, your location, clicks, searches – everything is tracked and sent to a data pipeline in real-time for analysis. That’s the power of today’s data systems!

5.Java Multi-threading – Tea Shop Waiter Example

The next speaker explained Java Multithreading in a simple and brilliant way using a tea shop analogy.

Analogy:

Imagine a tea shop with only one waiter. If five customers come, he serves one by one, so everyone has to wait. This is like single-threading in Java – one task at a time.

But now, imagine three waiters in the shop. They can take and serve orders at the same time. This is multithreading – Java can run multiple tasks simultaneously using threads.

6.Spring AI and LLM – The Future of Java + AI

One of the most interesting talks was on Spring AI and how it connects with LLMs (Large Language Models) like ChatGPT, Claude, and Ollama.

The speaker created a React + Next.js page that showed all three AI tools in one interface and compared their responses.

Key Points:

Spring AI helps Java developers use AI tools in their applications.
LLMs like ChatGPT can generate smart text, answer questions, write code, etc.
The speaker showed how to integrate these models into apps and when to use which one.

Example: He gave an example where a user asks the same question to ChatGPT, Claude, and Ollama – and all three gave different styles of answers. He explained which one is better depending on your project needs.

His speaking style and demo were impressive – he made a complex topic simple and exciting.

7.Photo Time & Missed PostgreSQL Session

After all the sessions, we took group photos to celebrate the event and capture the memories.

We had one more session planned on PostgreSQL, but due to the event running late, we couldn’t attend it. I felt bad missing it, but I’ve made up my mind to definitely attend it next time.

The Day:

Even though I didn’t perform well in the coding challenge, I learned a lot from others and enjoyed every moment of the day. Being part of "The JVM Five" team was fun. This day was full of knowledge, fun, and inspiration.

Special thanks to the Payilagam team for sponsoring and encouraging us to participate in this event. Their support means a lot and helps learners like me grow in the tech world.

See you in the next tech journey, Keep Learing!!

Real-Life Java Loop Scenarios - Thanks to MY Senior Neelakandan...

Sathish A — Wed, 25 Jun 2025 16:05:08 +0000

Hello developers!!

Today I practiced Java loops with the help of my senior, Neelakandan, who gave me tricky logic-based questions. These questions were not from textbooks - they were based on real-time thinking. That helped me understand the loop concept very clearly.

So in this blog, I’m going to share 4 Java loop codes with real-world scenarios, clear logic, and code explanation. Let’s dive in!

Scenario 1: Count Repeated Value (Like Survey Feedback)

Inspired by Neelakandan brother's question to test repetition counting using while loop.

Real-world Scenario:

Imagine a survey where users selected different values. We want to count how many times a particular value (like "70") was selected.

Code:

public class Main {
    public static void main(String[] args) {
        int key = 70;
        int[] num = {1, 2, 70, 3, 70, 4, 70};
        int count = 0;
        int i = 0;
        while (i < num.length) {
            if (num[i] == key) {
                count++;
            }
            i++;
        }
        System.out.println(count);
    }
}

Output:
      3

Explanation:

The loop checks each value in the array. If the number matches the key (70), it increases the count. We used a while loop to scan the array one by one.

Scenario 2: Find Big Number in a List (Like Scoreboard Highest Score)

Real-world Scenario:

You have a list of scores. You want to identify the highest score while the list is being read one by one.

Code:

class Main {
    public static void main(String[] args) {
        int[] a = {2, 4, 30, 1, 40, 70, 100, 10};
        int big = a[0];
        int i = 0;
        while (i < a.length) {
            if (a[i] > big) {
                big = a[i];
                System.out.println(big);
            }
            i++;
        }
    }
}

Output:
4
30
40
70
100

Explanation:

We start with the first number as the biggest. Then, in the loop, we compare and update it if we find a bigger one. It prints whenever a new big value is found.

Scenario 3: Dosa Offer Balance Calculation (Like Cashback System)

This idea was a fun one given by Neelakandan - a dosa shop balance increasing by offer logic.

You have ₹12 and you go to a dosa shop that gives 50% cashback every time you eat. Do this 3 times. What is your final balance?

Code:

class Main {
    public static void main(String[] args) {
        int balance = 12;
        int i = 1;
        int temp;
        while (i <= 3) {
            temp = balance / 2;
            balance = balance + temp;
            i++;
        }
        System.out.print(balance);
    }
}

Output:
      42

Explanation:

Each time we divide the current balance by 2 and add it back. This repeats 3 times. Perfect use of while loop to simulate limited offer cycles.

Scenario 4: Gold Value Cutting Down (Like Daily Price Halving)

Simulate a gold value decreasing over time.

Gold value starts at ₹3000. Each day, the value reduces to half of the previous day's value. Do this for 7 days.

Code:

public class Main {
    public static void main(String[] args) {
        int value = 3000;
        int i = 1;
        int temp;
        while (i <= 7) {
            temp = value / 2;
            value = temp;
            System.out.println(value);
            i++;
        }
    }
}

Output:
1500
750
375
187
93
46
23

Explanation:

This code uses a while loop to cut the value into half each day. It's a great example of progressive reduction using loops.

Key Points:

These 4 examples helped me truly understand how powerful loops are when solving real-time problems. Special thanks to Neelakandan Brother for pushing me to think like a developer instead of just writing code.

Every loop has a story:

for loop = fixed steps.
while loop = unknown steps.
Logic = apply your brain , not just your fingers.

Every line of code teaches something new!.

React Learning Blog : Props Drilling, useRef, and useContext Explained Simply.

Sathish A — Tue, 24 Jun 2025 12:51:49 +0000

Hello Everyone!!

Today, I learned some important React concepts. I will share them in simple words so that beginners can also understand easily.

1.What is Props Drilling?

In React, data is passed from a parent component to a child using props.

But sometimes, we want to send this data to a deeply nested child component. In that case, the data has to go through many components — even if some components don’t use this data.
This is called Props Drilling.

Example:

function App() {
  const message = "Hello Sathish!";
  return <Parent message={message} />;
}

function Parent({ message }) {
  return <Child message={message} />;
}

function Child({ message }) {
  return <GrandChild message={message} />;
}

function GrandChild({ message }) {
  return <p>{message}</p>;
}

In this example, message is passed from App to GrandChild through Parent and Child.
But Parent and Child are not using this data — they are just passing it.
This is called props drilling.

2.Important Hook: useRef

The useRef hook helps us directly access a DOM element like an input box.
We can get the value or focus the input without re-rendering the component.

Example:

import { useRef } from "react";

function UseRefDemo() {
  const inputElement = useRef(null);

  const showValue = () => {
    if (inputElement.current) {
      console.log(inputElement.current.value);
    }
  };

  return (
    <div>
      <input type="text" ref={inputElement} />
      <button onClick={showValue}>Show Value</button>
    </div>
  );
}

When you type something in the input box and click the button, the value will be printed in the console.

3.Important Hook: useContext

The useContext hook solves the props drilling problem.
Instead of passing data manually, we can share data between components easily using Context API.

Step-by-Step Example:

Step 1: Create Context

import { createContext } from "react";
export const UserContext = createContext();

Step 2: Provide Context Value

import { UserContext } from "./UserContext";
import Child from "./Child";

function App() {
  return (
    <UserContext.Provider value={"Hello Sathish from Context!"}>
      <Child />
    </UserContext.Provider>
  );
}

export default App;

Step 3: Use Context in Child

import { useContext } from "react";
import { UserContext } from "./UserContext";

function Child() {
  const message = useContext(UserContext);
  return <p>{message}</p>;
}

export default Child;

Now Child gets the value directly — no need to pass props from Parent or App!

Recap:

Props Drilling — passing data manually from parent to child to grandchild.
useRef — directly access DOM elements (like input box) without re-rendering.
useContext — solve props drilling problem by sharing data easily across components.

Keywords:

React, Props Drilling, useRef, useContext, React Hooks, Context API

React becomes simple when you break it into small pieces — learn step by step, and everything will be clear.

My Frontend Developer Interview Experience at Redisolve Technologies (23.06.2025)

Sathish A — Mon, 23 Jun 2025 12:43:21 +0000

Hi Friends!!

On 23rd June 2025, I attended an interview for the position of Frontend Developer at Redisolve Technologies. It was a good learning experience where I was asked important frontend concepts.

In this blog, I am going to explain all the questions asked in detail with simple words and real examples, so even beginners can understand and learn easily. Let's dive in!

1.How to Optimize Webpage for Performance?

A website must load fast and smoothly for a good user experience.
To optimize performance, we can compress images (like WebP), minify JS/CSS/HTML, and use lazy loading for images and videos. We can also use a CDN to serve content faster and enable browser caching.

Example: Lazy Loading Image

<img src="image.webp" loading="lazy" alt="Sample Image">

2.How to Handle CORS in JavaScript?

CORS (Cross-Origin Resource Sharing) is a browser rule that blocks access to resources from a different origin (domain) unless the server allows it. If the server allows it, it sends this header:

Access-Control-Allow-Origin:

Example Using fetch:

fetch('https://api.example.com/data', { mode: 'cors' })
  .then(res => res.json())
  .then(data => console.log(data));

3.What is Closure? How does it Work?

A closure means an inner function can access variables from the outer function even after the outer function has finished running.
Closures are useful to create private variables or remember previous data.

Example:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter(); // 1
counter(); // 2

4.Client Side Rendering vs Server Side Rendering

-Client Side Rendering (CSR): JS builds the page in the browser.
-Server Side Rendering (SSR): Page built on server, ready HTML sent to browser.

Example:

CSR – React App using Vite.
SSR – Next.js App that sends ready HTML.

5.How to Manage Version and Collaborate in Git?

Git allows teams to work on the same project using branches.
Developers create branches, commit changes, then merge to main branch.

Example:

git checkout -b feature-login
git add .
git commit -m "Added login feature"
git push origin feature-login

6.Explain NPM and Yarn

Both are package managers for JavaScript projects.
npm is default with Node.js, while Yarn was made for speed and security.
You can install libraries, update or remove them easily.

Example:

npm install react
yarn add react

7.How to Debug Frontend Applications?

Debugging finds and fixes errors.
You can use console.log(), browser DevTools (Elements, Network, Sources), and breakpoints to check code flow.

Example:

console.log("Debugging here");

8.Synchronous vs Asynchronous in JS

Synchronous: Code runs line by line, blocking the next line.
Asynchronous: Runs in background (API calls, setTimeout).

Example:

console.log("Start");
setTimeout(() => console.log("Async"), 1000);
console.log("End");

9.How Does Event Loop Work in JavaScript?

The event loop lets JS handle async operations like setTimeout, promises.
Synchronous code runs first; then event loop runs callbacks from queue.

Example:

console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');

10.Explain CSS Positions: relative, absolute, fixed

CSS positions decide how an element is placed in a page.

-relative: Moves based on its original place.
-absolute: Moves based on the nearest ancestor with position set.
-fixed: Stays fixed to the window even during scroll.

Example:

.relative { position: relative; top: 10px; }
.absolute { position: absolute; top: 10px; left: 10px; }
.fixed { position: fixed; bottom: 0; right: 0; }

11.What is Media Query?

Media queries make your website responsive — looking good on all devices (mobiles, tablets, desktops).
It changes styles based on screen width or height.

Example:

@media (max-width: 600px) {
  body { background: lightblue; }
}

12.What is SPA?

SPA (Single Page Application) loads one HTML file and updates content using JavaScript without refreshing the entire page.
React, Angular, Vue are frameworks for SPA.

Example: Gmail, Facebook — no page reloads when you switch tabs or open mails.

13.Build Tools: Webpack and Vite

Build tools bundle JS, CSS into fewer files to load faster.
Webpack is older, heavy but powerful; Vite is faster with modern features.

Vite Example:

npm create vite@latest

14.Difference Between Development and Production

Development: Unminified code, full error logs, easy debugging.

Production: Minified, optimized, fast loading, errors hidden from users.

Example:

npm run dev   # Development Mode
npm run build # Production Mode

15.Difference Between ID and Class in HTML.

-ID: Unique, used once (#id).
-Class: Can be reused for multiple elements (.class).Example:

Example:

<div id="header"></div>
<div class="box"></div>

16.How to Use Box Model in CSS?

The box model shows how content, padding, border, and margin create space around elements.
Adjusting padding/margin controls spacing and layout.

Example:

div {
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
}

17.Difference: Arrow Function vs Traditional Function

Arrow functions are short and do not have their own this.
Traditional functions have their own this and can be hoisted.

Example:

const greet = () => console.log("Hello");
function greetOld() { console.log("Hello"); }

18.Explain em, rem, px in CSS

-px: Fixed size.
-em: Relative to parent element’s font size.
-rem: Relative to root (html) font size.

Example:

html { font-size: 16px; }
p { font-size: 2rem; } /* 32px */

19.What are Template Literals?

Template literals help write multi-line strings and use variables easily.
Use backticks () and ${} to embed expressions.

Example:

const name = "Sathish";
console.log(`Welcome, ${name}!`);

20.var, let, const in JavaScript

var: Function-scoped, can redeclare.

let/const: Block-scoped; const can’t be reassigned.

Example:

var x = 5; let y = 10; const z = 15;

[(https://redisolve.com/)]

The End!!

This interview helped me revise important frontend concepts like closures, event loop, git, CSS box model, and build tools. These are must-know topics for every frontend developer. I suggest every learner practice these deeply with examples to build strong confidence.

Learning never exhausts the mind. Every interview is a new lesson!!.

My First Hackathon Experience: Building a GitHub Workflow Tool at ThoughtWorks

Sathish A — Sun, 22 Jun 2025 07:15:21 +0000

Hi Developers!!

Yesterday was a very special day for me. I attended my first hackathon. I am a fresher, so everything was new and exciting.

This hackathon was organized by ThoughtWorks Technologies. I went there with my full team, but later I joined a different team. I did not know anyone before, but everyone was friendly and helpful.

In my new team, there were four people:

1.Manikandan - A seasoned full-stack developer with impressive problem-solving skills
2.Mithun - A senior programmer with years of industry experience
3.Arun - A fellow fresher who, like me, was eager to learn and contribute

Our Project: GitHub Workflow Management System

The Problem We Solved:

Developers often struggle with tracking bugs and managing task assignments
Team leads need a centralized system to raise tickets and monitor progress
Integration between code commits and project management is often fragmented

Our Solution:
We built a comprehensive workflow management tool with the following features:

1.User Authentication System:

Secure login functionality
Role-based access (Team Lead, Developer, etc.)

2.Dashboard Interface:

Clean, intuitive UI displaying project overview
Latest commit messages from connected repositories
Real-time status updates

3.Ticket Management System

Team leads can create and assign tickets for bugs/features
Developers can update status and add comments
Priority-based task organization

4.GitHub Integration

Direct connection to repositories
Commit message tracking
Branch management visibility

The application functioned similar to popular tools like Trello but with deeper GitHub integration and specific focus on development workflows.

Technical Implementation:

Tech Stack Used:
Frontend: React.js with modern hooks
Backend: Node.js with Express
Database: MongoDB for flexible data storage
Integration: GitHub API for repository connections
Styling: CSS3 with responsive design principles.

GitFlow Tool:

What I Learned from This Hackathon?

How to work in a new team with unknown people
How senior developers solve real coding problems
Basics of React, Node.js, and MongoDB in real projects
How to fetch commit messages from GitHub using APIs
How to handle the task flow like raising and assigning bugs (Trello model)

I also learned the importance of teamwork, communication, and project management during a hackathon.

About the Day:

It was a wonderful day full of learning. I met new friends, learned new tech tools, and understood how real developers build applications.
I want to join more hackathons in the future and improve my coding and problem-solving skills.

Special Thanks To:

A heartfelt thanks to the Payilagam team for their valuable guidance and support in helping us participate in the hackathon.Then especially Manikandan Brother, who explained many things to me as a fresher.

Learn, Build, Collaborate - the hackathon way!!

My React Learning - Day [XI] (Component Drill, useEffect, CSS, JSON Handling)

Sathish A — Fri, 20 Jun 2025 16:47:02 +0000

Hello Coders!!

Today I learned some very useful and important concepts in React which are helpful to build real projects easily. Let me share them in simple words.

1.Component Drilling

In React, when I want to pass data from Parent to Child components, we use props.
But when data needs to go deeply (Parent → Child → Grandchild...), this process is called Component Drilling.

Example:

function Parent() {
  const msg = "Hello from Parent";
  return <Child message={msg} />;
}

function Child({ message }) {
  return <GrandChild message={message} />;
}

function GrandChild({ message }) {
  return <p>{message}</p>;
}

Data passed from Parent → Child → Grandchild.

2.useEffect Hook

I also learned about useEffect. It runs side-effects like fetching data, changing the title, etc.

Example:

import { useEffect } from 'react';

function Demo() {
  useEffect(() => {
    console.log("Component Mounted");
  }, []);

  return <h1>useEffect Example</h1>;
}

Here, the message runs only once when the component loads.

3.Writing CSS in React

I understood 3 ways to add CSS:

1.Inline CSS:

const style = { color: 'red' };
<h1 style={style}>Hello CSS</h1>

2.External CSS file:

import './App.css';

3.CSS Modules (for component-level styling):

import styles from './App.module.css';
<h1 className={styles.heading}>CSS Module</h1>

4.Creating & Connecting JSON File

I learned how to create a simple JSON file inside React project:

data.json:

[
  { "id": 1, "name": "Sathish" },
  { "id": 2, "name": "React" }
]

How to use JSON in a component:

import data from './data.json';

function DataComponent() {
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

JSON data shown in the component properly.

5.Component - Connected to JSON - Output

In today's class example — we created only one component, imported JSON file, used map() function to display data on screen. Simple and clear output.

End of the Day:

Today's session helped me understand how data moves between components, how to handle side-effects using useEffect, how to write CSS in React, and how to connect JSON files to React components — these are real project basics. I feel more confident to build small apps now!!

Keep calm and code on...!!

React Learning Blog- Mini Project: Bulb On/Off Toggle App using `useState`

Sathish A — Thu, 19 Jun 2025 15:25:23 +0000

Today's Learning
In today’s React session, I practiced how to dynamically change UI based on state using the useState Hook. To make this concept clear, I built a small but interesting mini-project – A Bulb On/Off Toggle App.

Mini Project Explanation

1.Project Name: Bulb On/Off Toggle
2.Main Concepts Used:

React Functional Component
useState Hook
Conditional Rendering
onClick Event Handling

Key Code Breakdown

import { useState } from "react";

function Bulb() {
  const [bulbOnOff, setBulbOnOff] = useState(true);

  return (
    <div>
      <img 
        src={
          bulbOnOff
            ? "https://toppng.com/uploads/preview/light-bulb-on-off-png-115539402943y50vxr5yi.png"
            : "https://toppng.com/uploads/preview/light-bulb-on-off-png-11553940171g57vp25a8k.png"
        }
      />
      <button onClick={() => setBulbOnOff(!bulbOnOff)}>
        {bulbOnOff ? "On" : "Off"}
      </button>
    </div>
  );
}

export default Bulb;

Topics Covered Today

Topic	Description
`useState` Hook	To manage the bulb's state (On/Off).
State Initialization	`const [bulbOnOff, setBulbOnOff] = useState(true)`
Event Handling	Button `onClick` to toggle bulb state.
Conditional Rendering	Change the bulb image and button text based on state.

What I Learned Today

How to use the useState Hook to control the component's data.
How to change an image dynamically using conditional rendering (? : operator).
Handling user interaction via onClick event.
How to change button text based on state.

My Thoughts

This small project helped me clearly understand state manipulation and dynamic rendering in React. It made me feel confident in using the useState Hook for real UI changes.

"Every bug is a hidden lesson..."

My Node.js - First Interview Experience & Important Concepts!

Sathish A — Wed, 18 Jun 2025 17:45:01 +0000

Hello, friends!!

Today I attended my first Node.js interview round as part of my backend development journey. Since Node.js is closely related to JavaScript, most of the interview questions covered both JavaScript and Node.js basics.

This interview made me realize how important it is to understand core concepts before diving deeper into backend development.

Let me share what I learned and some important topics with short explanations!!

JavaScript & Node.js Topics from the Interview:

1.Function Declaration vs Function Expression:

Declaration: You can call the function before it's defined (hoisting).
Expression: Stored in a variable; cannot call before definition.

2.setTimeout() in JavaScript:

Executes a function after a delay (in milliseconds).

Example:

setTimeout(() => { console.log("Hello after 2 seconds"); }, 2000);

3.Selecting Elements from DOM:

Example:

document.getElementById('id');  
document.querySelector('.class');

4.Async/Await in JS:

Makes asynchronous code look synchronous and clean.
Used with Promises.

5.Callback Function:

A function passed as an argument to another function and executed later.

6.What is Node.js?

Runtime environment to run JS outside the browser.
Uses Google’s V8 Engine.

7.Why Node.js uses V8 Engine?

V8 makes JS execution fast and efficient.

8.Why Node.js is Single-threaded?

Handles tasks using Event Loop and Non-blocking I/O, so no need for multiple threads.

9.Can you access DOM in Node.js?

❌ No, because Node.js runs on the server, not in the browser.

10.Simple HTTP Server in Node.js:

const http = require('http');
http.createServer((req, res) => {
  res.write('Hello World');
  res.end();
}).listen(3000);

11.Synchronous vs Asynchronous Functions:

Synchronous: Blocks execution.
Asynchronous: Does not block execution.

12.HTTP Methods:

GET, POST, PUT, DELETE.

13.‘this’ Keyword in JavaScript

Refers to the current object.
In global scope: window object (browser).

14.undefined vs null

undefined: Variable declared but not assigned.
null: Assigned as "no value".

15.== vs ===

== compares only value (type conversion).
=== compares value + type (strict).

16.Truthy & Falsy Values:

Falsy: 0, "", null, undefined, NaN, false.
Everything else is truthy.

17.Global vs Local Scope

Global: Accessible everywhere.
Local: Accessible only inside functions or blocks.

18.Startup vs Big Companies - My Preference:

1.Startups = Learning, Growth, Multi-tasking
2.Big Companies = Stability, Process, Big Teams
3.For now, I prefer startups to learn and grow fast!

Takeaway for the Day:

"Strong JavaScript knowledge is the foundation for learning Node.js. I’ll keep practicing small tasks daily!"

Learn!!. Build!!. Repeat!!...