# Step-by-Step Guide to Building a Recurring Deposit Calculator Web Application with Next.js, Express.js, and Node.js

To build a Recurring Deposit (RD) Calculator web app with Next.js for the front end and Express.js for the back end, you can follow these steps:

### Frontend (Next.js):

#### 1. Create a new Next.js app:

``````npx create-next-app rd-calculator-frontend
cd rd-calculator-frontend
``````

#### 2. Create an RD calculator component:

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

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

const RDCalculator = () => {
const [principal, setPrincipal] = useState('');
const [interestRate, setInterestRate] = useState('');
const [timePeriod, setTimePeriod] = useState('');
const [monthlyDeposit, setMonthlyDeposit] = useState('');
const [result, setResult] = useState('');

const calculateMaturityAmount = () => {
const p = parseFloat(principal);
const r = parseFloat(interestRate) / 100 / 12; // monthly interest rate
const n = parseInt(timePeriod) * 12; // total number of months
const d = parseFloat(monthlyDeposit);

let maturityAmount = 0;
for (let i = 0; i < n; i++) {
maturityAmount = (maturityAmount + d) * (1 + r);
}

setResult(maturityAmount.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>
<div>
<label>Monthly deposit:</label>
<input type="number" value={monthlyDeposit} onChange={(e) => setMonthlyDeposit(e.target.value)} />
</div>
<button onClick={calculateMaturityAmount}>Calculate</button>
{result && <p>Maturity amount: ₹{result}</p>}
</div>
);
};

export default RDCalculator;
``````

#### 3. Update the `index.js` page to use the `RDCalculator` component:

Replace the content of `pages/index.js` with:

``````// pages/index.js
import RDCalculator from '../components/RDCalculator';

export default function Home() {
return (
<div>
<h1>Recurring Deposit Calculator</h1>
<RDCalculator />
</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 rd-calculator-backend
cd rd-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, monthlyDeposit } = req.body;
const p = parseFloat(principal);
const r = parseFloat(interestRate) / 100 / 12; // monthly interest rate
const n = parseInt(timePeriod) * 12; // total number of months
const d = parseFloat(monthlyDeposit);

let maturityAmount = 0;
for (let i = 0; i < n; i++) {
maturityAmount = (maturityAmount + d) * (1 + r);
}

res.json({ maturityAmount: maturityAmount.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 running `npm run dev` and go to `http://localhost:3000`. You'll see the RD calculator page. Type in the principal amount, annual interest rate, time period, and monthly deposit amount. After you click the "Calculate" button, the maturity amount you've earned will be shown below the calculator.

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