Expense Tracker using Next.js
Last Updated :
24 Jul, 2024
The Expense Tracker project is a NextJS-based web application designed to help users manage their finances more effectively. Users can easily add and delete expenses and income, allowing them to track their spending habits and view a summary of their expenses.
This project not only provides a practical tool for managing expenses but also serves as a valuable learning experience for users looking to enhance their NextJS skills and build web applications.
Preview of Final Output: Let us have a look at how the final application will look like:
.png)
Prerequisites:
Approach to create Expense Tracker Application:
- To create an Expense Tracker app with Next.js we will begin by setting up project and necessary dependencies.
- We will be creating essential components like transaction list, and an add transaction form.
- To manage the app's state we will utilize React useState hook for states like expense, income and transactions.
- We will Implement functionality to fetch and display transactions, calculate the balance, income, and expenses and enable users to add and delete transactions. Bootstrap will be used to style the application.
Steps to Create a NextJS App:
Step 1: Create React Project
npx create-next-app expense-tracker
Step 2: Navigate to project directory
cd expense-tracker
Step 3: Installing required modules
npm install bootstrap
Step 4: Create a folder named Components in src folder and create new files such as AddTransaction.js and TransactionList.js
Project Structure:
.png)
The updated dependencies in package.json file will look like:
"dependencies": {
"bootstrap": "^5.3.3",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18"
}Example:Below is the implementation of the Expense Tracker App. Here we have created some components.
- page.js: This is the primary Component for expense tracker app project, where we’ve defined all the states and functions necessary for the expense tracker app’s logic.
- AddTransaction.js: This component is responsible for displaying a form where users can input new transactions to add to the expense tracker.
- TransactionList.js: This component is responsible for displaying a list of transactions in the Expense Tracker app.
JavaScript
// page.js
'use client';
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import AddTransaction from './Components/AddTransaction';
import TransactionList from './Components/TransactionList';
const ExpenseTracker = () => {
const [expenses, setExpenses] = useState([]);
const [description, setDescription] = useState('');
const [amount, setAmount] = useState('');
const [type, setType] = useState('expense'); // Default to expense
const [balance, setBalance] = useState(0);
const [totalIncome, setTotalIncome] = useState(0);
const [totalExpense, setTotalExpense] = useState(0);
const [date, setDate] = useState(new Date().toLocaleDateString());
const addExpense = () => {
if (!description.trim() || !amount.trim()) return;
const newExpense = { id: expenses.length + 1,
description, amount: parseFloat(amount), type, date };
setExpenses([...expenses, newExpense]);
setBalance(type === 'expense' ?
balance - parseFloat(amount) : balance + parseFloat(amount));
if (type === 'expense') {
setTotalExpense(totalExpense + parseFloat(amount));
} else {
setTotalIncome(totalIncome + parseFloat(amount));
}
setDescription('');
setAmount('');
setDate(new Date().toLocaleDateString());
};
const removeExpense = (id) => {
const expenseToRemove = expenses.find(expense => expense.id === id);
if (expenseToRemove) {
setExpenses(expenses.filter(expense => expense.id !== id));
setBalance(expenseToRemove.type === 'expense' ?
balance + expenseToRemove.amount :
balance - expenseToRemove.amount);
if (expenseToRemove.type === 'expense') {
setTotalExpense(totalExpense - expenseToRemove.amount);
} else {
setTotalIncome(totalIncome - expenseToRemove.amount);
}
}
};
return (
<div className="container bg-light mt-5 p-5
border border-dark col-md-8">
<h1 className="text-center text-success">GeekForGeeks</h1>
<h4 className="mt-2 text-center">Expense Tracker</h4>
<AddTransaction
description={description}
setDescription={setDescription}
amount={amount}
setAmount={setAmount}
date={date}
setDate={setDate}
type={type}
setType={setType}
balance={balance}
setBalance={setBalance}
totalIncome={totalIncome}
setTotalIncome={setTotalIncome}
totalExpense={totalExpense}
setTotalExpense={setTotalExpense}
addExpense={addExpense}
/>
<TransactionList
expenses={expenses}
removeExpense={removeExpense}
/>
</div>
);
};
export default ExpenseTracker;
// AddTransaction.js
import React from 'react'
const AddTransaction = ({ description,
setDescription,
amount,
setAmount,
date,
setDate,
type,
setType,
balance,
setBalance,
totalIncome,
setTotalIncome,
totalExpense,
setTotalExpense,
addExpense }) => {
return (
<>
<div className="col-md-4 offset-md-4 text-center">
<div className="row mt-3">
<div className="text-center" >
<h3>Balance:
<b className="text-dark">${balance.toFixed(2)}</b>
</h3>
</div>
</div>
<div className="row d-flex justify-content-between
align-items-center">
<div className="col-md-4">
<h3>Income <span
className="text-success">
${totalIncome.toFixed(2)}
</span>
</h3>
</div>
<div className="col-md-4">
<h3>Expense
<span className="text-danger">
${totalExpense.toFixed(2)}
</span>
</h3>
</div>
</div>
</div>
<div className="mb-3">
<input
type="text"
className="form-control"
placeholder="Description"
value={description}
onChange={e => setDescription(e.target.value)}
/>
</div>
<div className="row">
<div className="col-md-4">
<div className="mb-3">
<input
type="number"
className="form-control"
placeholder="Amount"
value={amount}
onChange={e => setAmount(e.target.value)}
/>
</div>
</div>
<div className="col-md-4">
<div className="mb-3">
<input
type="date"
className="form-control"
value={date}
onChange={e => setDate(e.target.value)}
/>
</div>
</div>
<div className="col-md-4">
<div className="mb-3">
<select className="form-select"
value={type}
onChange={e => setType(e.target.value)}>
<option value="expense">Expense</option>
<option value="income">Income</option>
</select>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<button className="btn btn-primary"
onClick={addExpense}>
Add Transaction
</button>
</div>
</div>
</>
)
}
export default AddTransaction
// TransactionList.js
import React from 'react'
const TransactionList = ({ expenses, removeExpense }) => {
return (
<div>
<ul className="list-group mt-3">
{expenses.map(expense => (
<li key={expense.id}
className={`list-group-item d-flex
justify-content-between
align-items-center
${expense.type === 'expense' ?
'text-danger' : 'text-success'}`}>
<div>
<h4>{expense.description} - ${expense.amount}</h4>
<small className="text-muted">{expense.date}</small>
</div>
<div>
<button className="btn btn-danger"
onClick={() => removeExpense(expense.id)}>
Remove
</button>
</div>
</li>
))}
</ul>
</div>
)
}
export default TransactionList
Steps to run the application:
Step 1: Run the expense tracker application server by below command
npm run dev
Step 2: We can access our application on below URL
localhost:3000
Output:
Similar Reads
Blogging Platform using Next JS
In this project, we will explore the process of building The Blogging Platform with Next.js. Blogging Platform is a web application that allows users to create and publish blog posts. The platform provides a user-friendly interface for managing blog content and includes functionalities to create new
5 min read
How to Create Todo App using Next.js ?
In this article, we will create a to-do application and understand the basics of Next.js. This to-do list can add new tasks we can also delete the tasks by clicking on them. Next.js is a widely recognized React framework that eÂnables server-side rendering and enhanceÂs the developmeÂnt of interact
4 min read
Document Management System using NextJS
The Document Management System is a web application developed using Next.js, that allows users to efficiently manage their documents. The system provides features for uploading, organizing, and retrieving documents. Users can upload documents through the web interface, which are then stored in local
5 min read
Create a Quiz App with Next JS
In this article, we’ll explore the process of building a Quiz App utilizing NextJS. The quiz app provides users with a series of multiple-choice questions with options. Users can select the option and move to the next question. At the end, the user will be able to see the analysis of the quiz. Outpu
5 min read
E-commerce Dashboard with NextJS
This project is an E-commerce Dashboard built with Next.js, providing features such as a dynamic sidebar, responsive navigation, order analytics, and most sold items of the week. It shows various features such as product analytics, order management, and user interaction. Output Preview: Prerequisite
11 min read
Social Networking Platform using Next.js
The Social Networking Platform built with NextJS is a web application that provides users the functionality to add a post, like a post, and be able to comment on it. The power of NextJS, a popular React framework for building server-side rendered (SSR) and statically generated web applications, this
8 min read
URL Shortener Service with NextJS
In this article, we will explore the process of building a URL shortener service using NextJS that takes a long URL and generates a shorter, more condensed version that redirects to the original URL when accessed. This shortened URL is typically much shorter and easier to share, especially in situat
2 min read
Contact Us Form using Next.js
Creating a Contact Us form in Next.js involves setting up a form component, handling form submissions, and potentially integrating with a backend service or API to send the form data. In this article, we will create a Contact Us Form with NextJS. Output Preview: Let’s have a look at what our final p
6 min read
Blogging Platform using Next JS
In this project, we will explore the process of building The Blogging Platform with Next.js. Blogging Platform is a web application that allows users to create and publish blog posts. The platform provides a user-friendly interface for managing blog content and includes functionalities to create new
5 min read
Music Player App with Next.js and API
In this tutorial, we'll create a Music Player App using NextJS, a React framework. Explore frontend development, API integration, and UI design to build a user-friendly app for seamless music enjoyment. Join us in harmonizing code and creativity to craft an engaging Music Player App with NextJS in t
3 min read