Build a Loan EMI Calculator in React and Deploy it on GitHub Pages

Managing loan payments can be a daunting task, but with a simple Loan EMI Calculator, you can quickly compute monthly payments and understand your financial commitments. In this article, we'll walk through building a Loan EMI Calculator using React.js and deploy it online for free using GitHub Pages. By the end, you'll have a functional app to calculate EMIs for Home Loans, Car Loans, and Personal Loans.

---

🚀 What We'll Cover

1. Setting up a React project.
2. Implementing the EMI calculation formula.
3. Building the UI for input and results.
4. Deploying the app to GitHub Pages.

---

Video Tutorial if you don't like to read complete blog

---

🛠️ Step 1: Set Up the React Project

Start by setting up a React app using Create React App.

pnpm create vite
// Follow instructions
cd into project folder
pnpm install
pnpm run dev

This creates the boilerplate for your React project and runs a development server.

---

🧮 Step 2: Understand the EMI Formula

The formula for calculating EMI (Equated Monthly Installment) is:

[ EMI = \frac{P \times R \times (1 + R)^N}{(1 + R)^N - 1} ]

Where:

• (P) = Loan principal
• (R) = Monthly interest rate (( \text{annual rate} / 12 / 100 ))
• (N) = Loan tenure in months

We'll write a utility function in src/utils/calculateLoanDetails.js to compute this.

---

calculateLoanDetails.js

export function calculateLoanDetails(principal, annualRate, tenureYears) {
    const monthlyRate = annualRate / 12 / 100;
    const tenureMonths = tenureYears * 12;
    const emi =
        (principal * monthlyRate * Math.pow(1 + monthlyRate, tenureMonths)) /
        (Math.pow(1 + monthlyRate, tenureMonths) - 1);
    const totalAmount = emi * tenureMonths;
    const totalInterest = totalAmount - principal;

    return {
        monthlyEMI: emi.toFixed(2),
        totalPrincipal: principal.toFixed(2),
        totalInterest: totalInterest.toFixed(2),
        totalAmount: totalAmount.toFixed(2),
    };
}

---

🎨 Step 3: Build the UI

In the App.js file, build a form for user input and a results display section.

App.js

import React, { useState } from 'react';
import { calculateLoanDetails } from './utils/calculateLoanDetails';

function App() {
    const [principal, setPrincipal] = useState('');
    const [rate, setRate] = useState('');
    const [tenure, setTenure] = useState('');
    const [result, setResult] = useState(null);

    const handleCalculate = () => {
        const details = calculateLoanDetails(Number(principal), Number(rate), Number(tenure));
        setResult(details);
    };

    return (
        <div style={{ padding: '20px' }}>
            <h1>Loan EMI Calculator</h1>
            <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>Loan Tenure (Years): </label>
                <input
                    type="number"
                    value={tenure}
                    onChange={(e) => setTenure(e.target.value)}
                />
            </div>
            <button onClick={handleCalculate}>Calculate EMI</button>

            {result && (
                <div>
                    <h2>Results:</h2>
                    <p>Monthly EMI: ₹{result.monthlyEMI}</p>
                    <p>Total Interest: ₹{result.totalInterest}</p>
                    <p>Total Amount Payable: ₹{result.totalAmount}</p>
                </div>
            )}
        </div>
    );
}

export default App;

---

🌐 Step 4: Deploy to GitHub Pages

Install the GitHub Pages Package

Add the gh-pages package to your project:

npm install gh-pages --save-dev

Configure package.json

Add the following fields to your package.json:

"homepage": "https://<your-username>.github.io/loan-emi-calculator",
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
}

Replace <your-username> with your GitHub username.

---

Deploy the App

1. Initialize a Git repository:

   git init
   git remote add origin https://github.com/<your-username>/loan-emi-calculator.git
   

2. Deploy to GitHub Pages:

   npm run deploy
   

Your app will be live at https://<your-username>.github.io/loan-emi-calculator. 🎉

---

🎯 What’s Next?

• Add support for different currencies.
• Include an amortization schedule for detailed monthly breakdowns.

---

Congratulations! You've built and deployed a Loan EMI Calculator using React and GitHub Pages. Share your app with others and help them make informed financial decisions! 🚀

For more tutorials like this, subscribe to my YouTube channel and follow me on GitHub.

Happy coding! 😊