How to Create a web app LUMP SUM Calculator with Next.js, Express.js, and Node.js

How to Create a web app LUMP SUM Calculator with Next.js, Express.js, and Node.js

Making a lump sum calculator is a lot like making a compound interest calculator. Here's how to do it with Next.js for the front end and Express.js for the back end:

Frontend (Next.js):

1. Create a new Next.js app:

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

2. Create a lump sum calculator component:

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

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

const LumpsumCalculator = () => {
  const [principal, setPrincipal] = useState('');
  const [rate, setRate] = useState('');
  const [time, setTime] = useState('');
  const [result, setResult] = useState('');

  const calculateLumpsum = () => {
    const p = parseFloat(principal);
    const r = parseFloat(rate) / 100;
    const t = parseFloat(time);

    const amount = p * (1 + r * t);
    setResult(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={rate} onChange={(e) => setRate(e.target.value)} />
      </div>
      <div>
        <label>Time period (years):</label>
        <input type="number" value={time} onChange={(e) => setTime(e.target.value)} />
      </div>
      <button onClick={calculateLumpsum}>Calculate</button>
      {result && <p>Final amount: ${result}</p>}
    </div>
  );
};

export default LumpsumCalculator;

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

Replace the content of pages/index.js with:

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

export default function Home() {
  return (
    <div>
      <h1>Lumpsum Calculator</h1>
      <LumpsumCalculator />
    </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 lumpsum-calculator-backend
cd lumpsum-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('/calculateLumpsum', (req, res) => {
  try {
    const { principal, rate, time } = req.body;
    const p = parseFloat(principal);
    const r = parseFloat(rate) / 100;
    const t = parseFloat(time);

    const amount = p * (1 + r * t);
    res.json({ amount: 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, start your Next.js app by running npm run dev and go to http://localhost:3000. You'll see the lump sum calculator page. Type in the principal amount, annual interest rate, and time period. When you click the "Calculate" button, the final amount will show up 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 your inputs. The server then sends back the calculated final amount, and it shows up on the frontend.

Did you find this article valuable?

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