How to Create an EPF Calculator Web App Using Next.js, Express.js, and Node.js

How to Create an EPF Calculator Web App Using Next.js, Express.js, and Node.js

To build an EPF (Employee Provident Fund) calculator with Next.js for the front end and Express.js for the back end, follow these steps:

Frontend (Next.js):

1. Create a new Next.js app:

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

2. Create an EPF calculator component:

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

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

const EPFCalculator = () => {
  const [basicSalary, setBasicSalary] = useState('');
  const [employerContributionRate, setEmployerContributionRate] = useState('12');
  const [employeeContributionRate, setEmployeeContributionRate] = useState('12');
  const [employerContribution, setEmployerContribution] = useState('');
  const [employeeContribution, setEmployeeContribution] = useState('');

  const calculateEPF = () => {
    const salary = parseFloat(basicSalary);
    const employerRate = parseFloat(employerContributionRate) / 100;
    const employeeRate = parseFloat(employeeContributionRate) / 100;

    const employerContributionAmount = salary * employerRate;
    const employeeContributionAmount = salary * employeeRate;

    setEmployerContribution(employerContributionAmount.toFixed(2));
    setEmployeeContribution(employeeContributionAmount.toFixed(2));
  };

  return (
    <div>
      <div>
        <label>Basic Salary:</label>
        <input type="number" value={basicSalary} onChange={(e) => setBasicSalary(e.target.value)} />
      </div>
      <div>
        <label>Employer Contribution Rate (%):</label>
        <input type="number" value={employerContributionRate} onChange={(e) => setEmployerContributionRate(e.target.value)} />
      </div>
      <div>
        <label>Employee Contribution Rate (%):</label>
        <input type="number" value={employeeContributionRate} onChange={(e) => setEmployeeContributionRate(e.target.value)} />
      </div>
      <button onClick={calculateEPF}>Calculate</button>
      {employerContribution && <p>Employer Contribution: ${employerContribution}</p>}
      {employeeContribution && <p>Employee Contribution: ${employeeContribution}</p>}
    </div>
  );
};

export default EPFCalculator;

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

Replace the content of pages/index.js with:

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

export default function Home() {
  return (
    <div>
      <h1>EPF Calculator</h1>
      <EPFCalculator />
    </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 epf-calculator-backend
cd epf-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('/calculateEPF', (req, res) => {
  try {
    const { basicSalary, employerContributionRate, employeeContributionRate } = req.body;
    const salary = parseFloat(basicSalary);
    const employerRate = parseFloat(employerContributionRate) / 100;
    const employeeRate = parseFloat(employeeContributionRate) / 100;

    const employerContribution = salary * employerRate;
    const employeeContribution = salary * employeeRate;

    res.json({ employerContribution: employerContribution.toFixed(2), employeeContribution: employeeContribution.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 EPF calculator page. Type in the basic salary, employer contribution rate, and employee contribution rate. When you click the "Calculate" button, you'll see the calculated amounts for both employer and employee contributions shown below the calculator.

Make sure your Express server is running in another terminal window. When you press the "Calculate" button, the frontend sends a POST request to the Express server to figure out the EPF contributions using the inputs you gave. The server then sends back the calculated amounts for both employer and employee contributions, and these numbers show up on the frontend.

Did you find this article valuable?

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