EMI Calculator Web App Using Next.js, Express.js, and Node.js

To build an EMI (Equated Monthly Installment) calculator web app, you can use Next.js for the front end and Express.js for the back end, similar to making a compound interest calculator. Here's how to do it:

Frontend (Next.js):

1. Create a new Next.js app:

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

2. Create an EMI calculator component:

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

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

const EMICalculator = () => {
  const [principal, setPrincipal] = useState('');
  const [rate, setRate] = useState('');
  const [time, setTime] = useState('');
  const [emi, setEmi] = useState('');

  const calculateEMI = () => {
    const p = parseFloat(principal);
    const r = parseFloat(rate) / 100 / 12; // monthly interest rate
    const t = parseFloat(time) * 12; // total number of months
    const emiAmount = (p * r * Math.pow(1 + r, t)) / (Math.pow(1 + r, t) - 1);
    setEmi(emiAmount.toFixed(2));
  };

  return (
    <div>
      <div>
        <label>Loan 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>Loan tenure (years):</label>
        <input type="number" value={time} onChange={(e) => setTime(e.target.value)} />
      </div>
      <button onClick={calculateEMI}>Calculate</button>
      {emi && <p>EMI: ${emi}</p>}
    </div>
  );
};

export default EMICalculator;

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

Replace the content of pages/index.js with:

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

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

Backend (Express.js):

Follow the same steps as before for setting up the Express.js server. Here's a summary:

1. Create a new directory for your backend:

mkdir emi-calculator-backend
cd emi-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('/calculateEMI', (req, res) => {
  try {
    const { principal, rate, time } = req.body;
    const p = parseFloat(principal);
    const r = parseFloat(rate) / 100 / 12; // monthly interest rate
    const t = parseFloat(time) * 12; // total number of months
    const emiAmount = (p * r * Math.pow(1 + r, t)) / (Math.pow(1 + r, t) - 1);
    res.json({ emi: emiAmount.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 (npm run dev) and go to http://localhost:3000. You'll see the EMI calculator page. Type in the loan amount, annual interest rate, and how long the loan is for. After you click "Calculate," you'll see the EMI amount shown under the calculator.

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

How to Create a EMI Calculator Web App Using Next.js, Express.js, and Node.js