Building a SIP Calculator Online Tool Using Next.js, Express.js, and Node.js

Building a SIP Calculator Online Tool Using Next.js, Express.js, and Node.js

To build a SIP (Systematic Investment Plan) calculator with Next.js for the front end and Express.js for the back end, you can use the same method as a compound interest calculator. Here's how:

Frontend (Next.js):

1. Create a new Next.js app:

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

2. Create a SIP calculator component:

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

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

const SIPCalculator = () => {
  const [investmentAmount, setInvestmentAmount] = useState('');
  const [monthlyContribution, setMonthlyContribution] = useState('');
  const [investmentPeriod, setInvestmentPeriod] = useState('');
  const [annualReturnRate, setAnnualReturnRate] = useState('');
  const [result, setResult] = useState('');

  const calculateSIP = () => {
    const p = parseFloat(investmentAmount);
    const r = parseFloat(annualReturnRate) / 100 / 12;
    const n = parseInt(investmentPeriod) * 12;
    const x = parseFloat(monthlyContribution);

    const amount = x * (((Math.pow(1 + r, n) - 1) / r) * (1 + r));
    const maturityAmount = p * Math.pow(1 + r, n) + amount;
    setResult(maturityAmount.toFixed(2));
  };

  return (
    <div>
      <div>
        <label>Investment amount:</label>
        <input type="number" value={investmentAmount} onChange={(e) => setInvestmentAmount(e.target.value)} />
      </div>
      <div>
        <label>Monthly contribution:</label>
        <input type="number" value={monthlyContribution} onChange={(e) => setMonthlyContribution(e.target.value)} />
      </div>
      <div>
        <label>Investment period (years):</label>
        <input type="number" value={investmentPeriod} onChange={(e) => setInvestmentPeriod(e.target.value)} />
      </div>
      <div>
        <label>Annual return rate (%):</label>
        <input type="number" value={annualReturnRate} onChange={(e) => setAnnualReturnRate(e.target.value)} />
      </div>
      <button onClick={calculateSIP}>Calculate</button>
      {result && <p>Maturity amount: {result}</p>}
    </div>
  );
};

export default SIPCalculator;

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

Replace the content of pages/index.js with:

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

export default function Home() {
  return (
    <div>
      <h1>SIP Calculator</h1>
      <SIPCalculator />
    </div>
  );
}

Backend (Express.js):

1. Create a new Express.js app:

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

mkdir sip-calculator-backend
cd sip-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('/calculateSIP', (req, res) => {
  try {
    const { investmentAmount, monthlyContribution, investmentPeriod, annualReturnRate } = req.body;
    const p = parseFloat(investmentAmount);
    const r = parseFloat(annualReturnRate) / 100 / 12;
    const n = parseInt(investmentPeriod) * 12;
    const x = parseFloat(monthlyContribution);

    const amount = x * (((Math.pow(1 + r, n) - 1) / r) * (1 + r));
    const maturityAmount = p * Math.pow(1 + r, n) + amount;
    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 SIP calculator page. Type in the investment amount, monthly contribution, investment period, and annual return rate. After you click the "Calculate" button, the final amount you'll get after the investment period will be shown 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 SIP from the inputs you gave. The server then sends back the final amount, which you'll see on the frontend.

Did you find this article valuable?

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