# How to Create a Withdrawal Plan Calculator for Web Apps with Next.js, Express.js, and Node.js

·

3 min read

To build a Systematic Withdrawal Plan (SWP) calculator with Next.js for the front end and Express.js for the back end, you can use a method similar to making a compound interest calculator. Here's a step-by-step guide:

### Frontend (Next.js):

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

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

#### 2. Create a SWP calculator component:

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

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

const SWPCalculator = () => {
const [investmentAmount, setInvestmentAmount] = useState('');
const [annualReturnRate, setAnnualReturnRate] = useState('');
const [withdrawalFrequency, setWithdrawalFrequency] = useState('monthly');
const [withdrawalAmount, setWithdrawalAmount] = useState('');
const [withdrawalDuration, setWithdrawalDuration] = useState('');
const [result, setResult] = useState('');

const calculateSWP = () => {
const amount = parseFloat(investmentAmount);
const rate = parseFloat(annualReturnRate) / 100;
const frequency = withdrawalFrequency === 'monthly' ? 12 : 1; // Convert to annual if monthly
const duration = parseInt(withdrawalDuration);

const numerator = amount * (rate / frequency);
const denominator = 1 - Math.pow(1 + (rate / frequency), -duration * frequency);

const withdrawal = (numerator / denominator) * frequency;
setWithdrawalAmount(withdrawal.toFixed(2));

const totalWithdrawn = withdrawal * duration;
const totalInterestEarned = totalWithdrawn - amount;
setResult({
withdrawalAmount: withdrawal.toFixed(2),
totalWithdrawn: totalWithdrawn.toFixed(2),
totalInterestEarned: totalInterestEarned.toFixed(2),
});
};

return (
<div>
<div>
<label>Investment amount:</label>
<input type="number" value={investmentAmount} onChange={(e) => setInvestmentAmount(e.target.value)} />
</div>
<div>
<label>Annual return rate (%):</label>
<input type="number" value={annualReturnRate} onChange={(e) => setAnnualReturnRate(e.target.value)} />
</div>
<div>
<label>Withdrawal frequency:</label>
<select value={withdrawalFrequency} onChange={(e) => setWithdrawalFrequency(e.target.value)}>
<option value="monthly">Monthly</option>
<option value="annually">Annually</option>
</select>
</div>
<div>
<label>Withdrawal duration (years):</label>
<input type="number" value={withdrawalDuration} onChange={(e) => setWithdrawalDuration(e.target.value)} />
</div>
<button onClick={calculateSWP}>Calculate</button>
{result && (
<div>
<p>Withdrawal amount: \${result.withdrawalAmount}</p>
<p>Total withdrawn: \${result.totalWithdrawn}</p>
<p>Total interest earned: \${result.totalInterestEarned}</p>
</div>
)}
</div>
);
};

export default SWPCalculator;
``````

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

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

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

export default function Home() {
return (
<div>
<h1>Systematic Withdrawal Plan (SWP) Calculator</h1>
<SWPCalculator />
</div>
);
}
``````

### Backend (Express.js):

Do the same things you did for the compound interest calculator to set up an Express.js server with the needed routes.

### Testing:

When you start your Next.js app (`npm run dev`) and go to `http://localhost:3000`, you'll see the SWP calculator page. Type in the investment amount, yearly return rate, how often you'll withdraw, and for how long. After you click "Calculate," you'll see the withdrawal amount, total amount withdrawn, and total interest earned shown under the calculator.

Make sure your Express server is running in a different terminal window. After you click the "Calculate" button, the frontend sends a request to the Express server to do the SWP calculation with your inputs. The server then sends back the calculated results, and they show up on the frontend.

### Did you find this article valuable?

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