Making a Personal Finance Tracker with React and Node.js

How to Implement Multi-Threading in Node.js With Worker Threads [Full Handbook]

Managing money is an important part of everyone’s life. Many people want to track their spending, set savings goals, and manage their income. But keeping track of all this on paper or in spreadsheets can be difficult. A better way is to build a personal finance tracker using web technologies.

A personal finance tracker helps you record your income and expenses, view spending habits, and plan for the future. In this blog, we will learn how to build a simple finance tracker using React for the frontend and Node.js for the backend.

This is a great project for students and developers. It teaches full stack development, helps improve coding skills, and shows how to build something useful. Many learners work on projects like this in a full stack developer course because it includes working with forms, databases, and APIs.

Why Build a Personal Finance Tracker?

There are many reasons to build this app:

It helps you understand how much money you spend
It shows where your money goes each month
You can fix savings goals and check your progress
You learn full stack development while building a useful tool

You don’t need a large team or complex setup. You can build it step-by-step using simple tools.

Tools and Technologies

Here’s what we will use:

React: For building the user interface
Node.js + Express: For creating the backend server
MongoDB: For storing data (income, expenses, categories)
Axios: For making API calls between frontend and backend
Bootstrap or CSS: For styling the app

This stack is perfect for beginners and is commonly used in real-world apps. It’s also commonly taught in full stack developer classes, where students build practical projects like this.

Step 1: Set Up the Project

Start by creating two folders: one for the frontend and one for the backend.

Backend Setup

Create a folder finance-backend
Run npm init -y
Install dependencies:
npm install express mongoose cors dotenv
Create a basic Express server in index.js:

const express = require(‘express’);

const mongoose = require(‘mongoose’);

const cors = require(‘cors’);

require(‘dotenv’).config();

const app = express();

app.use(cors());

app.use(express.json());

mongoose.connect(process.env.MONGO_URI, {

useNewUrlParser: true,

useUnifiedTopology: true,

});

app.listen(5000, () => {

console.log(‘Server running on port 5000’);

});

Create a .env file with your MongoDB connection string:

MONGO_URI=mongodb://localhost:27017/finance-tracker

Frontend Setup

Create a folder finance-frontend
Run:

npx create-react-app .

npm install axios

Now we have a React app ready to connect with the backend.

Step 2: Build the Backend API

We will create two models: Income and Expense. Each will have an amount, description, and date.

Create a file models/Income.js:

const mongoose = require(‘mongoose’);

const IncomeSchema = new mongoose.Schema({

amount: Number,

description: String,

date: { type: Date, default: Date.now },

});

module.exports = mongoose.model(‘Income’, IncomeSchema);

Create a file models/Expense.js:

const mongoose = require(‘mongoose’);

const ExpenseSchema = new mongoose.Schema({

amount: Number,

description: String,

date: { type: Date, default: Date.now },

});

module.exports = mongoose.model(‘Expense’, ExpenseSchema);

Then, create API routes in routes/finance.js:

const express = require(‘express’);

const Income = require(‘../models/Income’);

const Expense = require(‘../models/Expense’);

const router = express.Router();

router.post(‘/income’, async (req, res) => {

const income = new Income(req.body);

await income.save();

res.json(income);

});

router.get(‘/income’, async (req, res) => {

const income = await Income.find();

res.json(income);

});

router.post(‘/expense’, async (req, res) => {

const expense = new Expense(req.body);

await expense.save();

res.json(expense);

});

router.get(‘/expense’, async (req, res) => {

const expense = await Expense.find();

res.json(expense);

});

module.exports = router;

Import and use these routes in index.js:

const financeRoutes = require(‘./routes/finance’);

app.use(‘/api’, financeRoutes);

Now, your backend is ready to accept and return data.

Step 3: Build the Frontend UI

In the frontend, we will create a form to add income and expenses, and display the list of records.

Add Income Component

Create a file components/AddIncome.js:

import React, { useState } from ‘react’;

import axios from ‘axios’;

function AddIncome() {

const [income, setIncome] = useState({ amount: ”, description: ” });

const handleChange = (e) => {

setIncome({ …income, [e.target.name]: e.target.value });

};

const handleSubmit = async (e) => {

e.preventDefault();

await axios.post(‘http://localhost:5000/api/income’, income);

setIncome({ amount: ”, description: ” });

};

return (

<button type=”submit”>Add Income</button>

</form>

);

}

export default AddIncome;

Repeat a similar process for expenses in AddExpense.js.

Display Data

Create a Dashboard.js file to show total income, total expense, and balance:

import React, { useEffect, useState } from ‘react’;

import axios from ‘axios’;

function Dashboard() {

const [income, setIncome] = useState([]);

const [expense, setExpense] = useState([]);

useEffect(() => {

async function fetchData() {

const incomeRes = await axios.get(‘http://localhost:5000/api/income’);

const expenseRes = await axios.get(‘http://localhost:5000/api/expense’);

setIncome(incomeRes.data);

setExpense(expenseRes.data);

}

fetchData();

}, []);

const totalIncome = income.reduce((acc, item) => acc + item.amount, 0);

const totalExpense = expense.reduce((acc, item) => acc + item.amount, 0);

return (

<div>

<h2>Dashboard</h2>

<p>Total Income: ₹{totalIncome}</p>

<p>Total Expenses: ₹{totalExpense}</p>

<p>Balance: ₹{totalIncome – totalExpense}</p>

</div>

);

}

export default Dashboard;

Now, your app can add and view financial data easily.

Step 4: Connect All Components

In App.js, import and use the components:

import React from ‘react’;

import AddIncome from ‘./components/AddIncome’;

import AddExpense from ‘./components/AddExpense’;

import Dashboard from ‘./components/Dashboard’;

function App() {

return (

<div>

<h1>Personal Finance Tracker</h1>

</div>

);

}

export default App;

Run both frontend and backend, and your app should work!

This is a basic version. You can add filters, graphs, categories, and user login in the future. Projects like this are great practice for people in full stack developer classes, as they involve frontend, backend, API, and database management.

Features You Can Add Later

User accounts with login and registration
Category selection (food, bills, transport, etc.)
Date filtering to see monthly reports
Charts to visualize spending
Currency switcher for global users

Adding these will make your app more advanced and show off your skills even more.

Final Thoughts

Building a personal finance tracker is not just a good coding project — it’s a practical tool that helps you and others manage money better. Using React and Node.js, you can create a powerful app that handles real-world data, gives clear insights, and looks great on the web.

This project also helps you practice everything you learn in a full stack developer course, including frontend design, API building, server handling, and working with databases.

Whether you are just starting or looking to build your portfolio, this project is a great way to learn and grow. Keep building, keep testing, and enjoy the process of becoming a skilled full stack developer!

Contact Us:

Name: ExcelR – Full Stack Developer Course in Hyderabad

Address: Unispace Building, 4th-floor Plot No.47 48,49, 2, Street Number 1, Patrika Nagar, Madhapur, Hyderabad, Telangana 500081

Phone: 087924 83183

Camp Adventure Inc

Creating Unforgettable Outdoor Experiences

Making a Personal Finance Tracker with React and Node.js