How to Create a Sukanya Samriddhi Yojana Calculator Web App with Next.js, Node.js, and Express.js

How to Create a Sukanya Samriddhi Yojana Calculator Web App with Next.js, Node.js, and Express.js

To build a Sukanya Samriddhi Yojana (SSY) calculator using Next.js for the front end and Express.js for the back end, follow these steps:

Frontend (Next.js):

1. Create a new Next.js app:

npx create-next-app ssy-calculator-frontend
cd ssy-calculator-frontend

2. Create a SSY calculator component:

Create a new file called SSYCalculator.js inside the components directory:

// components/SSYCalculator.js
import { useState } from 'react';

const SSYCalculator = () => {
  const [principal, setPrincipal] = useState('');
  const [interestRate, setInterestRate] = useState('');
  const [time, setTime] = useState('');
  const [maturityAmount, setMaturityAmount] = useState('');

  const calculateMaturityAmount = () => {
    const p = parseFloat(principal);
    const r = parseFloat(interestRate) / 100;
    const t = parseFloat(time);

    // Calculate compound interest using SSY formula
    const maturity = p * Math.pow((1 + r / 12), 12 * t);

    setMaturityAmount(maturity.toFixed(2));
  };

  return (
    <div>
      <div>
        <label>Principal amount:</label>
        <input type="number" value={principal} onChange={(e) => setPrincipal(e.target.value)} />
      </div>
      <div>
        <label>Annual interest rate (%):</label>
        <input type="number" value={interestRate} onChange={(e) => setInterestRate(e.target.value)} />
      </div>
      <div>
        <label>Time period (years):</label>
        <input type="number" value={time} onChange={(e) => setTime(e.target.value)} />
      </div>
      <button onClick={calculateMaturityAmount}>Calculate</button>
      {maturityAmount && <p>Maturity amount: {maturityAmount}</p>}
    </div>
  );
};

export default SSYCalculator;

3. Update the index.js page to use the SSYCalculator component:

Replace the content of pages/index.js with:

// pages/index.js
import SSYCalculator from '../components/SSYCalculator';

export default function Home() {
  return (
    <div>
      <h1>Sukanya Samriddhi Yojana (SSY) Calculator</h1>
      <SSYCalculator />
    </div>
  );
}

Backend (Express.js):

1. Create a new Express.js app:

Create a new directory for your backend, then navigate into it and initialize a new npm project:

mkdir ssy-calculator-backend
cd ssy-calculator-backend
npm init -y

2. Install Express.js:

npm install express

3. Create an Express server:

Create a file called server.js:

// server.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(express.json());

app.post('/calculateMaturityAmount', (req, res) => {
  try {
    const { principal, interestRate, time } = req.body;
    const p = parseFloat(principal);
    const r = parseFloat(interestRate) / 100;
    const t = parseFloat(time);

    // Calculate compound interest using SSY formula
    const maturity = p * Math.pow((1 + r / 12), 12 * t);

    res.json({ maturityAmount: maturity.toFixed(2) });
  } catch (error) {
    res.status(400).json({ error: 'Invalid input' });
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

4. Run the Express server:

node server.js

Testing:

Now, start your Next.js app by typing npm run dev and visit http://localhost:3000. You will see the SSY calculator page. Enter the principal amount, annual interest rate, and time period. After you click the "Calculate" button, the maturity amount you've calculated will appear below the calculator.

Ensure your Express server is running in another terminal window. When you click the "Calculate" button, the frontend sends a POST request to the Express server to calculate the maturity amount based on your inputs. The server then returns the calculated maturity amount, which appears on the frontend.

Did you find this article valuable?

Support LingarajTechhub All About Programming by becoming a sponsor. Any amount is appreciated!