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
- Setting up a React project.
- Implementing the EMI calculation formula.
- Building the UI for input and results.
- 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
- Initialize a Git repository:
git init
git remote add origin https://github.com/<your-username>/loan-emi-calculator.git
- 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! 😊
Top comments (0)