DEV Community: Jayashree

Building a Student Marks Dashboard using React and Spring Boot

Jayashree — Thu, 25 Jun 2026 11:39:00 +0000

As part of my Full Stack Development learning journey, I built a Student Marks Dashboard by integrating a React frontend with a Spring Boot backend. This project helped me understand how a modern web application communicates between the client side and server side using REST APIs.

The main goal of this project was to fetch student names and marks from the backend and display them dynamically in a table on the frontend. Even though the application is small, it covers several important concepts such as API creation, CORS handling, data fetching, state management, and dynamic rendering in React.

Technologies Used

React.js
Axios
Spring Boot
Java Collections (Map, LinkedHashMap)
REST API
HTML Table
JavaScript ES6
React Hooks (useState, useEffect)

Backend Development with Spring Boot

For the backend, I created a Spring Boot REST controller that exposes a /students endpoint. This endpoint returns student names and marks in the form of a LinkedHashMap.

Using LinkedHashMap was useful because it preserves the insertion order of the data. That means the student records will appear in the same order in which they were added, which makes the output more predictable and easier to read.

@GetMapping("/students")
public Map<String,Integer> getStudents() {
    Map<String,Integer> students = new LinkedHashMap<>();

    students.put("Vidhya",99);
    students.put("Arun",85);
    students.put("Priya",92);
    students.put("Karthik",78);
    students.put("Divya",88);
    students.put("Vijay",95);
    students.put("Anu",81);
    students.put("Rahul",89);
    students.put("Meena",90);
    students.put("Suresh",76);
    students.put("Nisha",87);

    return students;
}

The @RestController annotation plays an important role here. It tells Spring Boot that this class will handle REST requests and that the return value of the methods should be written directly into the HTTP response body. Since the method returns a Map<String, Integer>, Spring Boot automatically converts it into JSON format.

Sample JSON Response

When the /students endpoint is called, the backend sends the following JSON response:

{
  "Vidhya": 99,
  "Arun": 85,
  "Priya": 92,
  "Karthik": 78,
  "Divya": 88,
  "Vijay": 95,
  "Anu": 81,
  "Rahul": 89,
  "Meena": 90,
  "Suresh": 76,
  "Nisha": 87
}

This JSON response is easy for the frontend to consume and display in a structured format.

Enabling Cross-Origin Requests

Since the React application runs on http://localhost:5173 and the Spring Boot application runs on http://localhost:8080, both applications are running on different ports. In browser-based applications, this creates a Cross-Origin Resource Sharing (CORS) issue because the frontend and backend are treated as different origins.

To solve this, I used the @CrossOrigin annotation in the controller:

@CrossOrigin(origins="http://localhost:5173")

This annotation allows requests from the React frontend to access the Spring Boot backend without being blocked by the browser. Without this configuration, the API call from React would fail due to CORS restrictions.

Frontend Development with React

On the frontend, I used React to build the user interface and Axios to fetch data from the backend API. React Hooks made the implementation clean and simple.

I used useState to store the student data and useEffect to make the API call when the component loads.

useEffect(() => {
  axios("http://localhost:8080/students")
    .then((response) => setStudents(response.data));
}, []);

Here, useEffect runs only once because the dependency array is empty ([]). This means the API request is triggered when the component is first rendered. Once the response is received, the data is stored in the students state using setStudents.

Initially, I declared the state as an empty object:

const [students, setStudents] = useState({});

This is because the backend returns an object in JSON format, and storing it as an object in React makes it easier to work with later.

Converting Object Data into Table Rows

Since the API response is an object and not an array, I used Object.entries() to convert the object into an array of key-value pairs. This is necessary because React can easily map over arrays to generate UI elements dynamically.

Object.entries(students).map(([name, mark]) => (
  <tr key={name}>
    <td>{name}</td>
    <td>{mark}</td>
  </tr>
))

This approach allows the table to render each student record dynamically without hardcoding any values. Every time the backend data changes, the frontend table will automatically reflect the updated values.

The complete table structure looks like this:

<table border="2">
  <thead>
    <tr>
      <th>Name</th>
      <th>Mark</th>
    </tr>
  </thead>
  <tbody>
    {Object.entries(students).map(([name, mark]) => (
      <tr key={name}>
        <td>{name}</td>
        <td>{mark}</td>
      </tr>
    ))}
  </tbody>
</table>

This gives a clean and readable output in the browser.

What I Learned

This project helped me strengthen my understanding of full stack development and the interaction between frontend and backend technologies.

Creating REST APIs using Spring Boot
Returning structured data using Map and LinkedHashMap
Using @GetMapping to expose API endpoints
Handling CORS issues with @CrossOrigin
Fetching backend data using Axios in React
Managing component state with useState
Triggering API calls with useEffect
Converting JavaScript objects into arrays using Object.entries()
Rendering dynamic data in React tables
Understanding how JSON data flows from backend to frontend

Conclusion

This Student Marks Dashboard project gave me practical experience in building a full stack application from scratch. It showed me how a React frontend can communicate with a Spring Boot backend through REST APIs and how data can be transferred in JSON format and displayed dynamically in the UI.

Even though the project is simple, it covers many important concepts that are used in real-world applications. It also improved my confidence in working with React, Axios, Spring Boot, and API integration.

This kind of project is a great starting point for anyone learning full stack development because it connects theory with practical implementation.

ReactJS #SpringBoot #Java #RESTAPI #FullStackDevelopment #WebDevelopment #Axios #LearningInPublic

Understanding Spring and Spring Boot: A Beginner-Friendly Guide

Jayashree — Wed, 24 Jun 2026 09:48:04 +0000

When I first started learning Java development, I often came across two terms: Spring and Spring Boot. At first, I assumed they were the same thing, but as I explored further, I realized that Spring Boot is actually built on top of the Spring Framework and makes development much easier.

In this blog, I'll share my understanding of both technologies in a simple and beginner-friendly way.

What is Spring?

Spring is one of the most popular Java frameworks used for building enterprise applications. It provides a collection of tools and features that help developers create scalable, secure, and maintainable applications.

One of the biggest advantages of Spring is Dependency Injection (DI). Instead of manually creating objects and managing dependencies, Spring handles them automatically, making the code cleaner and easier to maintain.

Some key features of Spring include:

Dependency Injection (DI)
Inversion of Control (IoC)
Spring MVC for web applications
Transaction management
Security support
Integration with databases and other technologies

Although Spring offers powerful features, setting up a project often requires a lot of configuration, XML files, and dependency management. This can sometimes feel overwhelming for beginners.

Why Was Spring Boot Introduced?

As developers started using Spring more widely, configuring projects became repetitive and time-consuming. To solve this problem, Spring Boot was introduced.

Spring Boot simplifies the development process by reducing configuration and providing sensible defaults. It allows developers to create production-ready applications quickly with minimal setup.

In simple terms:

Spring is the foundation, and Spring Boot is a tool that makes working with Spring faster and easier.

Key Features of Spring Boot

1. Auto Configuration

Spring Boot automatically configures many components based on the dependencies added to the project. This eliminates the need for extensive manual configuration.

2. Starter Dependencies

Instead of adding multiple libraries individually, Spring Boot provides starter packages such as:

spring-boot-starter-web
spring-boot-starter-data-jpa
spring-boot-starter-security

These starters include all the required dependencies for specific functionalities.

3. Embedded Servers

Spring Boot comes with embedded servers like:

Tomcat
Jetty
Undertow

This means applications can run independently without deploying them to an external server.

4. Production-Ready Features

Spring Boot includes features like:

Health checks
Metrics
Monitoring
Externalized configuration

These capabilities make applications easier to manage in production environments.

Spring vs Spring Boot

Configuration: Spring → More manual configuration | Spring Boot → Minimal configuration
Setup Time: Spring → Higher | Spring Boot → Faster
Server: Spring → Requires external server | Spring Boot → Embedded server available
Dependency Management: Spring → Manual | Spring Boot → Starter dependencies
Development Speed: Spring → Moderate | Spring Boot → High
Suitable For: Spring → Large enterprise applications | Spring Boot → Rapid application development

Which One Should You Learn?

If you're beginning your Java backend journey, it's helpful to understand the basics of the Spring Framework first. Once you understand concepts like Dependency Injection and Spring MVC, learning Spring Boot becomes much easier.

Today, most modern Java applications are built using Spring Boot because it speeds up development and reduces boilerplate code.

Final Thoughts

Spring laid the foundation for building robust Java applications, while Spring Boot simplified the process and made development more developer-friendly. Understanding both technologies is valuable for anyone aspiring to become a Java Full Stack Developer.

As a beginner, I found Spring Boot much easier to start with, but learning the core concepts of Spring helped me appreciate how everything works behind the scenes.

If you're starting your Java backend journey, don't worry about mastering everything at once. Start with the basics, build small projects, and gradually explore the powerful ecosystem that Spring and Spring Boot offer.

Happy Coding!

Building a Simple Java JDBC Project with MySQL: Displaying Cricket Players and Scores

Jayashree — Tue, 23 Jun 2026 07:00:14 +0000

While learning Java, I wanted to understand how Java connects with a database and retrieves data. Instead of using a random example, I created a small cricket project. The idea was simple: store Indian and Afghanistan players' scores in MySQL and display them through Java.

Step 1: Creating the Database

First, I created a database named cricket.

CREATE DATABASE cricket;
USE cricket;

Then, I created two tables:

CREATE TABLE india (
    player_name VARCHAR(50),
    score INT
);

CREATE TABLE afghanistan (
    player_name VARCHAR(50),
    score INT
);

After that, I inserted player data into both tables.

Step 2: Connecting Java with MySQL

To connect Java with MySQL, I used JDBC.

String url = "jdbc:mysql://localhost:3306/cricket";
String user = "root";
String password = "root";

Connection con = DriverManager.getConnection(url, user, password);

This line creates a connection between the Java application and the MySQL database.

Step 3: Creating a Statement Object

Once the connection is established, we need a Statement object to send SQL queries to the database.

Statement st = con.createStatement();

Think of it as a messenger that sends SQL commands from Java to MySQL.

Step 4: Writing the SQL Query

Since player data was stored in two different tables, I used UNION ALL to combine them.

String query =
"SELECT 'India' AS country, player_name, score FROM india " +
"UNION ALL " +
"SELECT 'Afghanistan' AS country, player_name, score FROM afghanistan";

The AS country part adds a country name because the tables themselves contain only player names and scores.

Step 5: Executing the Query

ResultSet rs = st.executeQuery(query);

The executeQuery() method sends the query to MySQL and returns the result in a ResultSet object.

Step 6: Reading Data from ResultSet

while (rs.next()) {
    System.out.println(
        rs.getString("country") + " " +
        rs.getString("player_name") + " " +
        rs.getInt("score"));
}

rs.next() moves row by row through the result.

Methods like:

rs.getString("country");
rs.getString("player_name");
rs.getInt("score");

retrieve column values from each row.

Formatting the Output

To make the output look neat, I used printf().

System.out.printf("%-15s %-25s %-10s%n",
                  "Country", "Player", "Score");

while (rs.next()) {
    System.out.printf("%-15s %-25s %-10d%n",
            rs.getString("country"),
            rs.getString("player_name"),
            rs.getInt("score"));
}

Output:

Country Player Score

India Rohit Sharma 76
India Shubman Gill 187
India Virat Kohli 154
Afghanistan Rahmanullah Gurbaz 170
Afghanistan Azmatullah Omarzai 140

Filtering Players with Scores Above 100

I also tried displaying only players who scored more than 100.

String query =
"SELECT 'India' AS country, player_name, score FROM india WHERE score > 100 " +
"UNION ALL " +
"SELECT 'Afghanistan' AS country, player_name, score FROM afghanistan WHERE score > 100";

This returned only the top performers.

What I Learned

Through this mini project, I got hands-on experience with:

MySQL database creation
Table creation and inserting data
JDBC connection
Statement and ResultSet
Executing SQL queries
Combining tables using UNION ALL
Reading records with while(rs.next())
Formatting output with printf()
Filtering records using WHERE

Although it was a simple project, it helped me understand how Java applications interact with databases in real-world scenarios. It also gave me a solid foundation for learning advanced JDBC concepts like PreparedStatement, transactions, and CRUD operations.

React Form Component – Blog Explanation with Code

Jayashree — Wed, 17 Jun 2026 06:51:41 +0000

This component is a simple user registration form built using React. It shows how to manage form data using state, handle input changes, and perform basic validation.

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

  // Handle input change
  function getdata(e) {
    const { name, value } = e.target;

    setUserdata({
      ...userdata,
      [name]: value
    });
  }

  // Validate form
  function validate() {
    const { name, age, mobile, email, dob, password } = userdata;

    if (name && age && mobile && email && dob && password) {
      alert("Submitted successfully...");
    } else {
      alert("Please fill all fields");
    }
  }

  // Handle Enter key submit
  function handlekey(e) {
    if (e.key === "Enter") {
      validate();
    }
  }

  return (
    <div>
      <form onKeyDown={handlekey}>
        <label>Enter your name</label><br />
        <input
          name="name"
          type="text"
          onChange={getdata}
          value={userdata.name}
        /><br />

        <label>Enter your age</label><br />
        <input
          name="age"
          type="text"
          onChange={getdata}
          value={userdata.age}
        /><br />

        <label>Enter your mobile</label><br />
        <input
          name="mobile"
          type="number"
          onChange={getdata}
          value={userdata.mobile}
        /><br />

        <label>Enter your email</label><br />
        <input
          name="email"
          type="email"
          onChange={getdata}
          value={userdata.email}
        /><br />

        <label>Enter your date of birth</label><br />
        <input
          name="dob"
          type="date"
          onChange={getdata}
          value={userdata.dob}
        /><br />

        <label>Create password</label><br />
        <input
          name="password"
          type="password"
          onChange={getdata}
          value={userdata.password}
        /><br />

        <button type="button" onClick={validate}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormValidation;

State Management

We store all form fields inside a single state object using useState.

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

Handling Input Changes

Each input updates only its own field in the state.

function getdata(inputdata) {
    let data = inputdata.target;

    setUserdata({
      ...userdata,
      [data.name]: data.value
    });
  }

Validation Logic

Before submitting, we check whether all fields are filled.

function validate() {
    let { name, age, mobile, email, dob, password } = userdata;

    if (name && age && mobile && email && dob && password) {
      alert("submitted...");
    } else {
      alert("please fill all fields");
    }
  }

Handling Enter Key

This is used to submit the form using the keyboard (Enter key).

  function handlekey(key) {
    if (key.key === "Enter") {
      validate();
    }
  }

Form UI

All inputs are controlled components connected to state.

return (
    <div>
      <form>
        <label>Enter your name</label><br />
        <input
          name="name"
          type="text"
          onChange={getdata}
          value={userdata.name}
        /><br />

        <label>Enter your age</label><br />
        <input
          name="age"
          type="text"
          onChange={getdata}
          value={userdata.age}
        /><br />

        <label>Enter your mobile</label><br />
        <input
          name="mobile"
          type="number"
          onChange={getdata}
          value={userdata.mobile}
        /><br />

        <label>Enter your email</label><br />
        <input
          name="email"
          type="email"
          onChange={getdata}
          value={userdata.email}
        /><br />

        <label>Enter your date of birth</label><br />
        <input
          name="dob"
          type="date"
          onChange={getdata}
          value={userdata.dob}
        /><br />

        <label>Create password</label><br />
        <input
          name="password"
          type="password"
          onChange={getdata}
          value={userdata.password}
        /><br />

        <button type="button" onClick={validate}>
          Submit
        </button>
      </form>
    </div>
  );
}

export default FormValidation;

Conclusion

This React component demonstrates:

Controlled form inputs
State management using useState
Dynamic field update using input name
Basic form validation
Simple user interaction handling

With small improvements, this can be extended into a real-world registration system with backend integration.

Advantages and Disadvantages of Java

Jayashree — Mon, 15 Jun 2026 05:40:30 +0000

Introduction

Java is one of the most popular programming languages in the world. It is widely used for web applications, enterprise software, mobile applications, cloud computing, and backend development. Java follows the principle of "Write Once, Run Anywhere (WORA)", which means Java code can run on any platform that supports the Java Virtual Machine (JVM).

In this blog, we will discuss the advantages and disadvantages of Java.

Advantages of Java

1. Platform Independent

Java programs are compiled into bytecode, which can run on any operating system with a JVM.

Example:

A Java application developed on Windows can run on Linux or macOS without changing the code.

Benefit

Better portability
Reduced development effort

2. Object-Oriented Programming (OOP)

Java follows OOP concepts such as:

Class
Object
Inheritance
Polymorphism
Encapsulation
Abstraction

Benefit

Reusable code
Easy maintenance
Better scalability

3. Simple and Easy to Learn

Java has a clean syntax and removes complex features like pointers.

Benefit

Beginner-friendly
Easier debugging
Improved readability

4. Secure

Java provides several security features:

Bytecode verification
Security Manager
Exception handling
No direct memory access

Benefit

Safer applications
Reduced security vulnerabilities

5. Robust

Java includes:

Strong memory management
Automatic garbage collection
Exception handling

Benefit

Fewer crashes
Improved application stability

6. Multithreading Support

Java allows multiple tasks to run simultaneously using threads.

Examples:

Chat applications
Gaming applications
Real-time systems

Benefit

Better performance
Efficient resource utilization

7. Large Community Support

Java has been around for decades and has a huge developer community.

Benefit

Extensive documentation
Easy problem-solving
Many open-source libraries

8. High Performance with JVM

Modern JVMs use techniques such as:

Just-In-Time (JIT) Compilation
Runtime Optimization

Benefit
Faster execution compared to traditional interpreted languages

Disadvantages of Java

1. Slower than Some Languages

Java is generally slower than languages like C and C++ because it runs through the JVM.

Drawback
Extra layer between code and hardware

2. More Memory Consumption

Java applications require JVM memory in addition to application memory.

Drawback

Higher RAM usage
Not ideal for low-memory systems

3. Verbose Code

Java often requires more lines of code compared to modern languages.

Example:

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

Drawback

Increased code length
More boilerplate code

4. Slower Startup Time

Java applications may take longer to start because the JVM needs to initialize first.

Drawback
Less suitable for lightweight applications

5. No Multiple Inheritance for Classes

Java does not support multiple inheritance through classes.

Solution:
Interfaces can be used instead.

Drawback
Some design limitations

6. Complex GUI Development

Building desktop GUIs using Swing or JavaFX can be more complex compared to modern frontend frameworks.

Drawback
Longer development time

Advantages	Disadvantages
Platform Independent	Slower than C/C++
Object-Oriented	More Memory Usage
Secure	Verbose Code
Robust	Slower Startup
Multithreading Support	No Multiple Inheritance
Large Community	Complex GUI Development
Portable	JVM Dependency
Automatic Garbage Collection	Higher Resource Consumption

Conclusion

Java remains one of the most powerful and reliable programming languages for enterprise applications, backend development, cloud services, and Android development. Its platform independence, security, and object-oriented features make it a preferred choice for developers. However, higher memory usage and verbose syntax are some of its limitations.

Despite a few disadvantages, Java continues to be one of the most in-demand programming languages in the software industry.

Why React? – Advantages and Disadvantages of React

Jayashree — Sat, 13 Jun 2026 07:28:41 +0000

Introduction

React is one of the most popular JavaScript libraries for building user interfaces, especially Single Page Applications (SPAs). It was developed by Meta Platforms (formerly Facebook) and is widely used by companies such as Netflix, Instagram, and Airbnb.

React helps developers create fast, interactive, and reusable UI components.

Why React?

Before React, developers often manipulated the DOM directly using JavaScript or jQuery, which became difficult to manage as applications grew.

React solves this by:

Using a component-based architecture
Updating the UI efficiently with the Virtual DOM
Providing reusable code
Making applications easier to maintain

Advantages of React

1. Component-Based Architecture

React applications are built using reusable components.

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

Benefit: Write once and reuse multiple times.

2. Virtual DOM for Better Performance

React uses a Virtual DOM instead of updating the Real DOM directly.

Benefit:

Faster rendering
Better user experience
Improved application performance

3. Reusable Components

Components can be reused across different pages.

Example:

Navbar
Footer
Button
Login Form

Benefit: Less code duplication.

4. Easy Learning Curve

Developers with HTML, CSS, and JavaScript knowledge can learn React quickly.

5. Strong Community Support

React has:

Large community
Extensive documentation
Thousands of libraries and packages

6. One-Way Data Flow

Data flows from parent to child components.

Benefit:

Easier debugging
Predictable behavior

7. SEO Friendly

React supports Server-Side Rendering through frameworks like Next.js.

Benefit:

Better search engine visibility
Faster page loading

8. Rich Ecosystem

Popular libraries include:

React Router
Redux
Axios
Material UI

Disadvantages of React

1. React is Only a UI Library

React focuses only on the view layer.

For routing, state management, and API handling, additional libraries are often required.

2. Frequent Updates

React ecosystem evolves rapidly.

Challenge: Developers need to keep learning new concepts and tools.

3. JSX Can Be Confusing Initially

<h1>Hello React</h1>

Mixing HTML and JavaScript may feel unusual for beginners.

4. More Configuration for Large Projects

Additional setup may be needed for:

Routing
State Management
Authentication

5. State Management Complexity

For large applications, managing state can become challenging without tools like Redux or Context API.

Feature	React	Traditional JavaScript
UI Updates	Automatic	Manual
Reusability	High	Low
Performance	Better (Virtual DOM)	Lower
Maintenance	Easy	Difficult
Scalability	High	Moderate

When Should You Use React?

Use React when:

Building Single Page Applications (SPA)
Creating dynamic user interfaces
Developing large-scale web applications
Requiring reusable components
Needing better performance and maintainability

Conclusion

React has become a preferred choice for modern web development because of its component-based architecture, Virtual DOM, reusability, and strong ecosystem. While it has some disadvantages such as JSX complexity and dependency on additional libraries, its benefits outweigh the drawbacks for most projects.

React Hooks Explained: useMemo, useCallback, and useNavigate

Jayashree — Fri, 12 Jun 2026 08:51:40 +0000

React provides several powerful hooks that help developers optimize performance and manage navigation efficiently. In this blog, we'll explore useMemo, useCallback, and useNavigate with simple examples.

1. useMemo Hook

What is useMemo?

useMemo is a React Hook used to memoize a calculated value. It prevents expensive calculations from running on every render and only recalculates when dependencies change.

Syntax

const memoizedValue = useMemo(() => { return expensiveCalculation(data); }, [data]);

Why use useMemo?

Improves performance
Avoids unnecessary recalculations
Useful for expensive operations

Example

import React, { useState, useMemo } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const squaredValue = useMemo(() => {
    console.log("Calculating...");
    return count * count;
  }, [count]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <h3>Square: {squaredValue}</h3>

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

      <input
        type="text"
        placeholder="Type here"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

export default App;

Output

Calculation runs only when count changes.
Typing in the input field does not trigger recalculation.

2. useCallback Hook

What is useCallback?

useCallback is a React Hook used to memoize a function. It prevents a function from being recreated on every render.

Syntax

const memoizedFunction = useCallback(() => { // function logic }, [dependencies]);

Why use useCallback?

Prevents unnecessary function recreation
Improves performance
Useful when passing functions to child components

Example

Parent Component

import React, { useState, useCallback } from "react";
import Child from "./Child";

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

  const handleClick = useCallback(() => {
    console.log("Button Clicked");
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>

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

      <Child onClick={handleClick} />
    </div>
  );
}

export default App;

Child Component

import React from "react";

const Child = React.memo(({ onClick }) => {
  console.log("Child Rendered");

  return (
    <button onClick={onClick}>
      Child Button
    </button>
  );
});

export default Child;

Output

Child component re-renders only when the callback changes.
Since useCallback memoizes the function, unnecessary re-renders are avoided.

Difference Between useMemo and useCallback

useMemo	useCallback
Memoizes a value	Memoizes a function
Returns calculated value	Returns function
Used for expensive calculations	Used for function optimization
Improves rendering performance	Prevents unnecessary re-renders

Example

const value = useMemo(() => count * 2, [count]);

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

3. useNavigate Hook

What is useNavigate?

useNavigate is a hook provided by the React Router library. It allows users to navigate between pages programmatically.

Installation

npm install react-router-dom

Syntax

const navigate = useNavigate();

navigate("/about");

Why use useNavigate?

Navigate to different pages
Redirect users after login
Navigate back and forward

Example
App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.jsx

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home Page</h1>

      <button
        onClick={() => navigate("/about")}
      >
        Go to About
      </button>
    </div>
  );
}

export default Home;

About.jsx

function About() {
  return <h1>About Page</h1>;
}

export default About;

Navigate Back

navigate(-1);

Moves to the previous page.

Navigate Forward

navigate(1);

Moves to the next page.

Replace Current History

navigate("/dashboard", { replace: true });

Prevents the user from returning to the previous page.

Conclusion

React hooks such as useMemo, useCallback, and useNavigate help developers build efficient and user-friendly applications.

useMemo → Memoizes values and avoids expensive recalculations.
useCallback → Memoizes functions and prevents unnecessary re-renders.
useNavigate → Enables programmatic navigation between routes.

Commonly Used Applications and Their Technology Stack

Jayashree — Wed, 10 Jun 2026 09:31:57 +0000

Every day, we use many applications such as WhatsApp, Instagram, YouTube, Netflix, and Amazon. Have you ever wondered what technologies power these applications? Let's explore some popular apps and the technologies behind them.

Popular Applications and Their Technologies

WhatsApp
Frontend: React, Swift
Backend: Erlang, Java
Database: MySQL

Instagram
Frontend: React, JavaScript
Backend: Python (Django)
Database: PostgreSQL

Facebook
Frontend: React.js
Backend: PHP, GraphQL
Database: MySQL

YouTube
Frontend: JavaScript
Backend: Python, C++
Database: MySQL

Netflix
Frontend: React.js
Backend: Java, Spring Boot, Node.js
Database: Cassandra, MySQL
Cloud: AWS

Spotify
Frontend: React.js
Backend: Java, Python
Database: PostgreSQL
Cloud: Google Cloud

Amazon
Frontend: React.js
Backend: Java, Spring Boot
Database: DynamoDB, MySQL
Cloud: AWS

Flipkart
Frontend: React.js
Backend: Java, Spring Boot
Database: MySQL

LinkedIn
Frontend: React.js
Backend: Java, Spring Framework, Kafka
Database: Espresso, MySQL

Uber
Frontend: React.js
Backend: Java, Node.js
Database: MySQL

Swiggy
Frontend: React.js
Backend: Java, Spring Boot
Database: Redis, MySQL

Zomato
Frontend: React.js
Backend: Python, Java
Database: PostgreSQL

Gmail
Frontend: Angular, JavaScript
Backend: Java
Database: Bigtable

X (Twitter)
Frontend: React.js
Backend: Java, Scala
Database: MySQL

PhonePe
Frontend: React.js
Backend: Java, Kotlin
Database: MySQL

Paytm
Frontend: React.js
Backend: Java, Spring Boot
Database: MySQL

ChatGPT
Frontend: React.js
Backend: Python, PyTorch
Database: Vector Database
Infrastructure: Kubernetes

Application	Technologies Used
WhatsApp	Erlang, Java, Swift, React, MySQL
Instagram	Python (Django), React, JavaScript, PostgreSQL
Facebook	PHP, React.js, GraphQL, MySQL
YouTube	Python, JavaScript, C++, MySQL
Netflix	Java, Spring Boot, React.js, Node.js, AWS
Spotify	Java, Python, React.js, Google Cloud
Amazon	Java, Spring Boot, React.js, AWS
Flipkart	Java, Spring Boot, React.js, MySQL
LinkedIn	Java, Spring Framework, React.js, Kafka
Uber	Java, Node.js, React.js, MySQL
Swiggy	Java, Spring Boot, React.js, Redis
Zomato	Python, Java, React.js, PostgreSQL
Gmail	Java, JavaScript, Angular
X (Twitter)	Java, Scala, React.js, MySQL
PhonePe	Java, Kotlin, React.js
Paytm	Java, Spring Boot, React.js
ChatGPT	Python, PyTorch, React.js, Kubernetes

Why Do Most Companies Use Java, Spring Boot, and React?

Frontend Technologies

Frontend is the user interface that users interact with.

HTML
CSS
JavaScript
React.js
Angular

Backend Technologies

Backend handles business logic, APIs, and server-side operations.

Java
Spring Boot
Python
Node.js
.NET

Databases

Databases are used to store and manage application data.

MySQL
PostgreSQL
MongoDB
Redis

Cloud Platforms

Cloud platforms help deploy and scale applications.

AWS
Microsoft Azure
Google Cloud Platform (GCP)

Conclusion

Most modern applications are built using a combination of frontend, backend, database, and cloud technologies. Learning technologies like Java, Spring Boot, React.js, MySQL, Git, and AWS can help aspiring developers build industry-ready applications and improve their career opportunities in software development.

JavaScript Libraries and Frameworks with Examples

Jayashree — Tue, 09 Jun 2026 05:58:19 +0000

What is a Library?

A Library is a collection of pre-written code that helps developers perform specific tasks quickly.

Example:
When riding a bike, you decide where to go and how to ride.

You are in control.

1. React

What is React?

React is a JavaScript library used to build User Interfaces (UI).

Developed by: Meta

Real-World Example

In Instagram:

Navbar
Stories
Posts
Comments

Each section can be created as a separate component.

function Header() {
  return <h1>Instagram</h1>;
}

Why Use React?

Reusable Components
Fast Rendering
Virtual DOM
Easy State Management

Companies Using React

Meta
Netflix
Airbnb

Example Projects

Social Media Apps
E-commerce Websites
Dashboards
Chat Applications

2. jQuery

What is jQuery?

jQuery is a JavaScript library that simplifies DOM manipulation and event handling.

Without jQuery

document.getElementById("btn").style.color = "red";

With jQuery

$("#btn").css("color", "red");

Why Use jQuery?

Less Code
Easy DOM Manipulation
Easy Event Handling
Animations

Example Uses

Button Click Events
Form Validation
Show/Hide Elements
Animations

$("#btn").click(function () {
  alert("Button Clicked");
});

3. Lodash

What is Lodash?

Lodash is a utility library that provides helpful functions for working with arrays, objects, and data.

Example

Remove duplicate values from an array:

const arr = [1, 2, 2, 3, 3];

_.uniq(arr);

Output:

[1, 2, 3];

Common Functions

_.uniq();
_.sortBy();
_.filter();
_.groupBy();
_.find();

Real-World Uses

Data Filtering
Sorting
Searching
Data Transformation

4. Axios

What is Axios?

Axios is a library used to make HTTP requests to APIs.

Example

axios.get("/users")
  .then((response) => {
    console.log(response.data);
  });

Why Use Axios?

It helps the frontend communicate with the backend.

Real-World Example

Login Form
    ↓
  Axios
    ↓
   API
    ↓
Database

Common Methods

axios.get();
axios.post();
axios.put();
axios.delete();

Used In

React
Angular
Vue
Next.js

5. Chart.js

What is Chart.js?

Chart.js is a library used to create charts and graphs.

Example Data

January = 100
February = 200
March = 300

Chart.js converts this data into visual charts.

Chart Types

Bar Chart
Pie Chart
Line Chart
Doughnut Chart

Real-World Uses

Sales Reports
Dashboards
Analytics Systems
Student Result Portals

What is a Framework?

A Framework provides a complete structure and rules for building applications.

Example:

Library = Ingredients

Framework = Complete Recipe + Cooking Rules

6. Angular

What is Angular?

Angular is a full-featured frontend framework.

Developed by: Google

Technologies Used

TypeScript
HTML
CSS

Features

Routing
Forms
API Integration
Dependency Injection
State Management

Project Structure

src
 ├── app
 │    ├── components
 │    ├── services
 │    └── routing

Real-World Uses

Banking Applications
ERP Systems
Enterprise Software

7. Vue.js

What is Vue.js?

Vue.js is a lightweight and easy-to-learn frontend framework.

Example

<p>{{ name }}</p>
data() {
  return {
    name: "John"
  };
}

Output:

John

Why Use Vue?

Easy Learning Curve
Lightweight
Fast Development

Real-World Uses

Dashboards
Admin Panels
Small and Medium Websites

8. Next.js

What is Next.js?

Next.js is a framework built on top of React.

Problem with React

SEO can be challenging in traditional React applications.

Next.js Solution

Server-Side Rendering (SSR)
SEO Optimization
File-Based Routing
API Routes

Routing Example

app/
  about/
    page.js

URL:

/about

Real-World Uses

Blogs
E-commerce Websites
Business Websites
Portfolio Sites

9. Express.js

What is Express.js?

Express.js is a backend framework for Node.js.

Example

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello World");
});

Why Use Express?

Build APIs Quickly
Handle Requests and Responses
Connect Databases
Implement Authentication

Real-World Flow

React
   ↓
Axios
   ↓
Express API
   ↓
Database

Common Uses

REST APIs
CRUD Applications
Authentication Systems

10. NestJS

What is NestJS?

NestJS is a TypeScript-based backend framework.

It provides a structured architecture for large applications.

Architecture

UserModule
UserController
UserService

Request Flow

Request
   ↓
Controller
   ↓
Service
   ↓
Database

Why Use NestJS?

Clean Architecture
TypeScript Support
Scalable Applications
Enterprise-Level Development

Real-World Uses

Banking Systems
Enterprise APIs
Large Backend Applications

Quick Summary

Technology	Purpose
React	Build User Interfaces
jQuery	DOM Manipulation
Lodash	Utility Functions
Axios	API Calls
Chart.js	Charts and Graphs
Angular	Full Frontend Framework
Vue.js	Lightweight Frontend Framework
Next.js	React Framework with SEO
Express.js	Backend API Development
NestJS	Enterprise Backend Development

Easy Memory Trick

Frontend

React
Angular
Vue.js
Next.js

Backend

Express.js
NestJS

Helper Libraries

Axios → API Calls
Lodash → Utility Functions
Chart.js → Charts
jQuery → DOM Manipulation

A common Full Stack flow is:

React / Next.js
       ↓
     Axios
       ↓
 Express / NestJS
       ↓
    Database

Browser Router in React

Jayashree — Sat, 06 Jun 2026 06:03:23 +0000

When building a React application, users move between pages like Home, About, Contact, etc. Instead of reloading the entire page, React uses Browser Router to change pages without refreshing.

What is Browser Router?

BrowserRouter is used to enable routing in React applications.

It allows:

Navigate between pages
Change URL without page refresh
Create Single Page Applications (SPA)

Simply:

BrowserRouter connects URL paths with React components.

Why do we use Browser Router?

Without Browser Router:

Every page change reloads the website
Slower user experience

With Browser Router:

Faster navigation
Better user experience
No full page reload

Install React Router

npm install react-router-dom

Basic Setup

Step 1: Import BrowserRouter

import { BrowserRouter } from "react-router-dom";

Step 2: Wrap App Component

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(

<BrowserRouter>
<App />
</BrowserRouter>

);

Creating Routes

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App(){

return(

<Routes>

<Route path="/" element={<Home/>}/>

<Route path="/about" element={<About/>}/>

</Routes>

)

}

export default App;

Navigation Using Link

Instead of using:

<a href="/about">About</a>

Use:

import { Link } from "react-router-dom";

<Link to="/">Home</Link>

<Link to="/about">About</Link>

Why Link?

Because:

Prevents page refresh
Faster navigation
Keeps SPA behavior

Example Folder Structure

src

├── App.jsx

├── Home.jsx

├── About.jsx

└── main.jsx

Complete Example

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home(){

return <h1>Home Page</h1>

}

function About(){

return <h1>About Page</h1>

}

function App(){

return(

<>

<nav>

<Link to="/">Home</Link>

<Link to="/about">About</Link>

</nav>

<Routes>

<Route path="/" element={<Home/>}/>

<Route path="/about" element={<About/>}/>

</Routes>

</>

)

}

export default App;

Important Components

Component	Purpose
BrowserRouter	Enables routing
Routes	Holds all routes
Route	Creates route path
Link	Navigation between pages

Simply Definition:

BrowserRouter is used for routing in React applications. It enables navigation between pages without refreshing the browser and helps create Single Page Applications.

Conclusion

Browser Router helps React applications:

Navigate between pages
Change URL without reload
Create faster user experience
Build Single Page Applications

Without BrowserRouter -> Full page reload
With BrowserRouter -> Smooth navigation

Learning React useState Through Practical Examples

Jayashree — Wed, 03 Jun 2026 13:00:34 +0000

When starting React, understanding useState only through definitions can feel confusing. The easiest way to learn it is by building small projects.

In simple words:

useState allows React components to store data and update the UI when that data changes.

Syntax:

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

Where:

state → current value
setState → function used to update value
initialValue → starting value

Example 1: Show / Hide Password

A common beginner project is password visibility toggle.

import { useState } from "react";

function App(){

 const [show,setShow]=useState(false);

 return(

 <>

 <input
 type={show ? "text":"password"}
 />

 <button
 onClick={()=>setShow(!show)}
 >

 {show ? "Hide":"Show"}

 </button>

 </>

 )

}

export default App;

How it works

Initially:

show = false

Therefore:

input type = password

Password appears hidden.

When button clicked:

setShow(!show)

If:

show = false

Then:

!show

↓

true

React updates state.

Component re-renders.

Now:

input type = text

Password becomes visible.

Flow:

Button Click

↓

State Change

↓

Re-render

↓

Updated UI

This example teaches:

Boolean state
Toggling values
Conditional rendering
Re-rendering

Example 2: Todo App

Todo App is one of the best projects to practice state management.

Features:

Add task
Edit task
Delete task

import { useState } from "react";

function App(){

 const [task,setTask]=useState("");

 const [todos,setTodos]=useState([]);

 const [editIndex,setEditIndex]=useState(null);

 function addTodo(){

 if(task==="") return;

 if(editIndex!==null){

 const updated=[...todos];

 updated[editIndex]=task;

 setTodos(updated);

 setEditIndex(null);

 }

 else{

 setTodos([...todos,task]);

 }

 setTask("");

 }

 function deleteTodo(index){

 const filtered=
 todos.filter((_,i)=>i!==index);

 setTodos(filtered);

 }

 function editTodo(index){

 setTask(todos[index]);

 setEditIndex(index);

 }

 return(

 <>

 <input
 value={task}
 onChange={(e)=>setTask(e.target.value)}
 />

 <button onClick={addTodo}>

 {editIndex!==null ? "Update":"Add"}

 </button>

 <ul>

 {

 todos.map((item,index)=>(

 <li key={index}>

 {item}

 <button
 onClick={()=>editTodo(index)}
 >

 Edit

 </button>

 <button
 onClick={()=>deleteTodo(index)}
 >

 Delete

 </button>

 </li>

 ))

 }

 </ul>

 </>

 )

}

export default App;

Adding Tasks

Suppose:

task = Study React

Click:

Add

This line runs:

setTodos([...todos,task])

React creates:

["Study React"]

UI updates automatically.

Editing Tasks

Click:

Edit

Current value goes into input.

Change text.

Click:

Update

Array value changes.

UI updates again.

Deleting Tasks

This code runs:

todos.filter((_,i)=>i!==index)

Selected task removed.

New array created.

UI updates.

What Did We Learn?

These examples teach an important React rule:

State Changes

↓

Component Re-renders

↓

UI Updates

Simple rule:

If data changes and UI should update, use state.

That is why useState becomes one of the first and most important hooks in React.

Understanding useState in React: Why Re-render Happens

Jayashree — Tue, 02 Jun 2026 06:01:18 +0000

When learning React, one common question is:

“If state changes, does React re-render?”

The answer is yes.

To understand this, first we need to know what useState does.

What is useState?

useState is a React Hook used to store and manage data inside a component.

Example:

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

Here:

count -> stores the current value
setCount -> updates the value
0 -> initial value

Initially:

count = 0

React renders the UI and displays:

What Happens When State Changes?

Consider this counter example:

import { useState } from "react";

function Counter() {

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

 return (

  <>
   <h1>{count}</h1>

   <button
    onClick={() => setCount(count + 1)}
   >

    Increment

   </button>

  </>

 );

}

export default Counter;

When the button is clicked:

setCount(count + 1)

React updates the state.

Flow:

Button Click

↓

State Changes

↓

Component Re-renders

↓

Updated UI Appears

If count was:

After clicking:

React automatically updates the screen.

What Does Re-render Mean?

Many beginners think re-render means:

Entire website reloads
Page refresh happens

Actually:

Component function runs again
React updates only what changed

Re-render = Component runs again to update UI when data changes.

For example:

function Counter() {

 console.log("Rendering...");

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

 return <h1>{count}</h1>;

}

Every state update causes:

Rendering...

because the component executes again.

Why Not Use Normal Variables?

Example:

`let count = 0;

count++;`

The value changes.

But React does not know it changed.

So UI stays the same.

With useState:

setCount(count + 1);

React knows:

“State changed. Update the UI.”

That is why useState is important.

Simple Rule to Remember

If data changes and UI should update, use state.

Short formula:

State Change

↓

Re-render

↓

Updated UI

That is the basic idea behind how React keeps the interface updated automatically.