Personal Budget Tracker

Personal Budget Tracker is a web application that allows you to manage your personal finances, track transactions, and keep an eye on your account balance. This project is built using React for the frontend and a Node.js backend with Express for database storage.

Table of Contents

• Introduction
• Features
• Technologies
• Getting Started
• Usage
• Folder Structure
• Contributing
• Back End
• Live-Site

Introduction

Managing personal finances is essential for financial stability and planning. Personal Budget Tracker provides a user-friendly interface for tracking your income and expenses, categorizing transactions, and calculating your account balance.

Features

• Transaction Management: Add, edit, and delete transactions with ease.
• Categorization: Categorize transactions into various categories, such as Food, Income, Transportation, and more.
• Account Balance: Keep track of your account balance, which is updated automatically based on transaction inputs.
• User-Friendly Interface: A clean and intuitive user interface for efficient financial management.

Technologies

• Frontend:

  • React
  • React Router
  • Axios for API calls
  • CSS for styling

• Backend:

  • Node.js
  • Express

Getting Started

To set up and run the Personal Budget Tracker locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Joseph-Carter/Budget-App-Frontend.git cd Budget-App-Frontend

Install frontend dependencies

cd client npm install

Install backend dependencies

cd ../server npm install

Start the frontend

cd client npm start

Start the backend

cd ../server npm start

Usage

• Home Page: The homepage provides an overview of your account balance and recent transactions.

• Transactions Page: Manage your transactions, add new transactions, and view a list of all transactions.

• Transaction Details: Click on a transaction to view its details, edit, or delete it.

• Adding a Transaction: To add a new transaction, navigate to the "Manage Transactions" page and click "Add Transaction." Fill in the details, such as the name, date, amount, and category.

• Editing a Transaction: Click on a transaction in the list to access its details and choose the "Edit" button. Make the necessary changes and save.

• Deleting a Transaction: In the transaction details, you can click the "Delete" button to remove the transaction.

Contributing

Contributions are welcome! If you'd like to contribute to the project, please open an issue, fork the repository, create a new branch, and submit a pull request. Be sure to follow our code of conduct.