The Frontend Looks like this

Respective Frontend Code goes like this(Signup-Page)

import React, { useState } from 'react';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';

function Signup() {
  const [values, setValues] = useState({
    name: '',
    email: '',
    password: ''
  });

  const handleChange = (event) => {
    setValues({...values, [event.target.name]: event.target.value});
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    axios.post('http://localhost:8081/signup', values)
      .then(res => {
        // Display alert on successful registration
        window.alert("Registered Successfully!");
        console.log("Registered Successfully!");
      })
      .catch(err => console.log(err));
  };


  return (
    <div className='d-flex justify-content-center align-items-center w-100 vh-100 bg-primary vh-100'>
      <div className='bg-white p-3 rounded w-25'>
        <h2>Sign-Up</h2>
        <form onSubmit={handleSubmit}>
          <div className='mb-3'>
            <label htmlFor='name'><strong>Name</strong></label>
            <input type='text' placeholder='Enter Name' name='name' className='form-control rounded-0' onChange={handleChange} />
          </div>
          <div className='mb-3'>
            <label htmlFor='email'><strong>Email</strong></label>
            <input type='email' placeholder='Enter Email' name='email' className='form-control rounded-0' onChange={handleChange} />
          </div>
          <div className='mb-3'>
            <label htmlFor='password'><strong>Password</strong></label>
            <input type='password' placeholder='Enter Password' name='password' className='form-control rounded-0' onChange={handleChange} />
          </div>
          <button type='submit' className='btn btn-success w-100 rounded-0'>Sign up</button>
          <p>You agree to our terms and policies</p>
          <a href="/" className='btn btn-default border w-100 bg-light rounded-0 text-decoration-none'>Login</a>
        </form>
      </div>
    </div>
  );
}

export default Signup;

Respective Backend Looks like this(Signup-datas)

The Backend Goes like Server.js

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'signup'
});

app.post('/signup', (req, res) => {
  const sql = "INSERT INTO login (`name`, `email`, `password`) VALUES (?, ?, ?)";
  const values = [
    req.body.name,
    req.body.email,
    req.body.password
  ];

  db.query(sql, values, (err, data) => {
    if (err) return res.json(err);
    return res.json(data);
  });
});

app.listen(8081, () => {
  console.log("Listening...");
});

The frontend looks loginup

Respective Frontend Code goes like this(Login-Page)

// Login.js
import React, { useState } from 'react';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    axios.post('http://localhost:8081/login', { email, password })
      .then(res => {
        console.log(res); // Log the response if needed

        // Check if login is successful
        if (res.data && res.data.length > 0) {
          // Show an alert when login is successful
          alert('Login Successful!');
        } else {
          alert('Please try again with a proper email and password');
        }
      })
      .catch(err => {
        console.error(err);
        alert('An error occurred. Please try again.');
      });
  }

  return (
    <div className='d-flex vh-100 justify-content-center align-items-center height="500vh'>
      <div className='p-3 bg-white w-25'>
        <form onSubmit={handleSubmit}>
          <div className='mb-3'>
            <label htmlFor="email">Email</label>
            <input type='email' placeholder='Enter Email' className='form-control' onChange={e => setEmail(e.target.value)} />
          </div>
          <div className='mb-3'>
            <label htmlFor="password">Password</label>
            <input type="password" placeholder='Enter password' className='form-control' onChange={e => setPassword(e.target.value)} />
          </div>
          <button className='btn btn-success'>Login</button>
        </form>
      </div>
    </div>
  );
}

export default Login;

Respective Backend Code goes like this(Login-Page)

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');

const app = express();

app.use(express.json());

app.use(cors());
const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "crud"
})

app.post('/login', (req,res) =>{
    const sql = "SELECT * FROM `login` WHERE 1";

    db.query(sql, [req.body.email, req.body.password], (err, data) =>{
        if(err) return res.json("Error");
        if(data.length > 0){
            return res.json("Login Successfully");
        } else {
            return res.json("No record");
        }
    })
})

app.listen(8081, () => {
    console.log("Listening...");
})

POINTS TO REMEMBER

import the following from the terminal

for frontend
npm update 
npm install 
npm install axios
npm install bootstrap
(install as per the need and version supporting the current version u use to code)

for backend 
npm init -y
npm install express
npm install cors
(install as per the need and version supporting the current version u use to code)

use phpmyadmin to operate with the databases for setting up xampp server check for youtube or read the documentation and set it up then run the backend terminal and frontend app terminal simulataneously here we have created a function signup & Login Page with MySql as a database