Expense Tracker using Next.js

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:

👁 Screenshot-(471)

Prerequisites:

• NPM & NodeJS
• React JS
• NextJS
• JavaScript

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:

👁 Screenshot-(473)

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.
  

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: