To build a Fixed Deposit (FD) calculator with Next.js for the front end and Express.js for the back end, you can use steps similar to those in the previous example. The main changes will be in how you calculate things and how you design the user interface to fit an FD calculator.

Frontend (Next.js):

1. Create a new Next.js app:

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

2. Create an FD calculator component:

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

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

const FDCalculator = () => {
  const [principal, setPrincipal] = useState('');
  const [interestRate, setInterestRate] = useState('');
  const [timePeriod, setTimePeriod] = useState('');
  const [maturityAmount, setMaturityAmount] = useState('');

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

    const amount = p * (1 + r * t);
    setMaturityAmount(amount.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={timePeriod} onChange={(e) => setTimePeriod(e.target.value)} />
      </div>
      <button onClick={calculateMaturityAmount}>Calculate</button>
      {maturityAmount && <p>Maturity amount: ${maturityAmount}</p>}
    </div>
  );
};

export default FDCalculator;

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

Replace the content of pages/index.js with:

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

export default function Home() {
  return (
    <div>
      <h1>Fixed Deposit Calculator</h1>
      <FDCalculator />
    </div>
  );
}

Backend (Express.js):

1. Create a new Express.js app:

Make a new folder for your backend, go into it, and start a new npm project:

mkdir fd-calculator-backend
cd fd-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, timePeriod } = req.body;
    const p = parseFloat(principal);
    const r = parseFloat(interestRate) / 100;
    const t = parseFloat(timePeriod);

    const amount = p * (1 + r * t);
    res.json({ maturityAmount: amount.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, if you start your Next.js app by running npm run dev and go to http://localhost:3000, you'll see the FD calculator interface. Just enter the principal amount, annual interest rate, and time period. Once you click the "Calculate" button, the maturity amount you've calculated will appear below the calculator.

Make sure your Express server is running in a different terminal window. When you press the "Calculate" button, the frontend sends a POST request to the Express server to figure out the maturity amount using the inputs you provided. The server then sends back the calculated maturity amount, and it shows up on the frontend.