In this article, we’ll explore how to build a Personal Budgeting App using React for the frontend and D3.js for data visualization. A Personal Budgeting App can provide valuable insights into spending habits, help set financial goals, and track progress over time.
Output Preview: Let us have a look at how the final output will look like.
Prerequisites:
Steps to Create Personal Budgeting React App:
Step 1: Create a new React JS project using the following command.
npx create-react-app <<Project_Name>>Step 2: Change to the project directory
cd <<Project_Name>>Step 3: Install the requires modules
npm install d3Step 4: Create a folder called components in src directory and create the following files inside it Add IncomeTracker.js , ExpenseTracker.js and Visualization.js
Project Structure:
The updated dependencies in package.json will look like this:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"d3": "^7.8.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Approach to create Personal Budgeting App:
- App.js: The App.js file represents the main component of a Personal Budgeting App created with React. It manages income and expense data using state hooks. It includes forms for adding income and expenses and displays them in separate lists. The App component coordinates these components and handles data flow between them.
- IncomeTracker.js: Manages the form for tracking income transactions. It captures user input for the amount and description of income and sends the data to the parent component.
- ExpenseTracker.js: Handles the form for tracking expense transactions. It collects user input for the amount and description of expenses and passes the data to the parent component.
- Visualization.js: Displays visual representations of financial data using D3.js. It updates dynamically based on changes in income, expense, or budget data, providing users with insights into their financial status.
Javascript
// App.jsimport React,{ useState,
useEffect
} from 'react';
import './App.css';
// Import your CSS fileimport ExpenseTracker from './Components/ExpenseTracker';
import IncomeTracker from './Components/IncomeTracker';
import Visualization from './Components/Visualization';
function App() {
const [expenses, setExpenses] = useState([]);
const [incomes, setIncomes] = useState([]);
const [totalIncome, setTotalIncome] = useState(0);
const [totalExpenditure, setTotalExpenditure] = useState(0);
const [remainingIncome, setRemainingIncome] = useState(0);
const [percentageExpended, setPercentageExpended] = useState(0);
useEffect(() => {
// Calculate total income
let total = 0;
incomes.forEach(
(income) =>
(total += income.amount)
);
setTotalIncome(total);
// Calculate total expenditure
total = 0;
expenses.forEach(
(expense) =>
(total += expense.amount)
);
setTotalExpenditure(total);
// Calculate remaining income
setRemainingIncome(totalIncome - totalExpenditure);
// Calculate percentage expended
if (totalIncome !== 0) {
setPercentageExpended(
(totalExpenditure / totalIncome) * 100
);
}
}, [incomes, expenses, totalIncome, totalExpenditure]);
const addExpense = (expense) => {
setExpenses([...expenses, expense]);
};
const addIncome = (income) => {
// Add the income and reset expenses for each income
setIncomes([...incomes, income]);
setExpenses([]);
};
return (
<div className="App">
<h1>Personal Budgeting App</h1>
<div className="tracker-container">
<ExpenseTracker onAddExpense={addExpense} />
<IncomeTracker onAddIncome={addIncome} />
</div>
<Visualization
expenses={expenses}
incomes={incomes}
remainingIncome={remainingIncome}
totalExpenditure={totalExpenditure}
percentageExpended={percentageExpended}
/>
</div>
);
}export default App;
|
Javascript
// IncomeTracker.jsimport React, { useState } from 'react';
function IncomeTracker({ onAddIncome }) {
const [amount, setAmount] = useState('');
const [description, setDescription] = useState('');
const handleAddIncome = () => {
if (!amount || !description) return;
onAddIncome(
{
amount: parseFloat(amount),
description
});
setAmount('');
setDescription('');
};
return (
<div className="income-tracker">
<h2>Income Tracking</h2>
<input
type="number"
placeholder="Amount"
value={amount}
onChange={
(e) =>
setAmount(e.target.value)
} />
<input
type="text"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)} />
<button onClick={handleAddIncome}>
Add Income
</button>
</div>
);
}export default IncomeTracker;
|
Javascript
// ExpenseTracker.jsimport React,{ useState
} from 'react';
function ExpenseTracker({ onAddExpense }) {
const [description, setDescription] = useState('');
const [amount, setAmount] = useState('');
const handleAddExpense = () => {
if (!description || !amount) return;
const newExpense = {
description,
amount: parseFloat(amount)
};
onAddExpense(newExpense);
setDescription('');
setAmount('');
};
return (
<div className="tracker">
<h2>Add Expense</h2>
<div className="input-group">
<input
type="text"
placeholder="Description"
value={description}
onChange={
(e) =>
setDescription(e.target.value)
} />
<input
type="number"
placeholder="Amount"
value={amount}
onChange={
(e) =>
setAmount(e.target.value)
} />
<button onClick={handleAddExpense}>
Add Expense
</button>
</div>
</div>
);
}export default ExpenseTracker;
|
Javascript
// Visualization.jsimport React,{ useEffect,
useRef
} from 'react';
import * as d3 from 'd3';
function Visualization(
{
expenses,
incomes,
remainingIncome,
totalExpenditure,
percentageExpended
}) {
const svgRef = useRef();
useEffect(() => {
// Create a combined dataset of incomes and expenses
const data = incomes.map((income) => ({
type: 'Income',
description: `Income: ${income.description}`,
amount: income.amount,
})).concat(expenses.map((expense) => ({
type: 'Expense',
description: `Expense: ${expense.description}`,
amount: expense.amount,
})));
// Clear previous chart
d3.select(svgRef.current).selectAll('*').remove();
// Create a new chart
const svg = d3.select(svgRef.current);
const width = 400;
const height = 200;
const xScale = d3.scaleBand().domain(
data.map((d) => d.description))
.range([0, width])
.padding(0.1);
const yScale =
d3.scaleLinear()
.domain(
[
0,
d3.max(data, (d) => d.amount)
]).range([height, 0]);
svg.append('g').attr('transform', `translate(50, 0)`)
.call(d3.axisLeft(yScale));
svg.append('g').attr('transform', `translate(50, ${height})`)
.call(d3.axisBottom(xScale));
svg.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr('class',
(d) => (d.type === 'Income' ?
'income-bar' : 'expense-bar'))
.attr('x', (d) => xScale(d.description) + 50)
.attr('y', (d) => yScale(d.amount))
.attr('width', xScale.bandwidth())
.attr('height', (d) => height - yScale(d.amount));
}, [expenses, incomes]);
return (
<div className="visualization">
<h2>Financial Visualization</h2>
<p>
Total Expenditure:
${totalExpenditure.toFixed(2)}
</p>
<p>
Remaining Income:
${remainingIncome.toFixed(2)}
</p>
<p>
Percentage Expended:
{percentageExpended.toFixed(2)}%
</p>
<svg ref={svgRef}
width={500} height={250}></svg>
</div>
);
}export default Visualization;
|
CSS
/* App.css */body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
}.income-tracker>button { background-color: blue;
padding: 10px 10px;
color: white;
border-radius: 5px;
}.income-tracker>input { border: 2px solid rgb(161, 157, 157);
margin: 2px 6px;
}.App { max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
/* White background */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* Subtle box shadow */
border-radius: 8px;
}h1 {
text-align: center;
color: #007bff;
/* Blue color for headings */
}.tracker-container { display: flex;
justify-content: space-around;
margin-top: 20px;
}.tracker-container>div { flex: 1;
margin: 0 10px;
}.input-group { margin-bottom: 20px;
}.input-group label { display: block;
margin-bottom: 8px;
color: #31aa6d;
}.input-group input,.input-group select { width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ced4da;
/* Light gray border */
border-radius: 4px;
box-sizing: border-box;
}.input-group button { width: 100%;
padding: 12px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
/* Smooth background color transition */
}.input-group button:hover { background-color: #0056b3;
}.visualization { margin-top: 30px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}.visualization h2 {
color: #007bff;
margin-bottom: 15px;
}.visualization p { margin: 10px 0;
color: #555;
}svg { margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
} |
Steps to Run the project:
npm startOutput: Open web-browser and type the following URL http://localhost:3000/
Output