This is a simple budget tracker application built with React.js. It allows users to track their expenses and income, categorize transactions, and visualize their financial data.
-
Add new transactions with a description, amount, and category.
-
Categorize transactions as income or expense.
-
View a list of all transactions with details.
-
Filter transactions by category or date range.
-
See a summary of total income, total expenses, and current balance.
-
Visualize financial data using charts and graphs.
-
Responsive design for use on desktop, tablet, and mobile devices.
-
React.js: A JavaScript library for building user interfaces.
-
Chart.js: A JavaScript library for creating charts and graphs.
-
Material-UI: A popular React UI framework for designing responsive and customizable components.
-
LocalStorage: Used for storing transaction data locally on the user's device.
-
JWT (JSON Web Token): Used to authenticate user
-
SQLite: A lightweight relational database management system used for storing transaction data locally on the user's device.
-
Express.js: A fast, unopinionated, minimalist web framework for Node.js used for building the backend API.
-
Node.js: A JavaScript runtime environment that executes JavaScript code outside of a web browser, commonly used for building server-side applications.
-
RESTful API: An architectural style for building web services that uses HTTP methods and follows representational state transfer (REST) principles for communication between client and server.
- Clone the repository:
git clone https://github.com/Ibrahim2713/budget-tracker-app.git
Navigate to the project directory: cd budget-tracker-app
npm install
npm start Open your web browser and navigate to http://localhost:3000 to view the application.
Add new transactions by entering a description, amount, and category, then click "Add Transaction". Click on a transaction to edit or delete it. Use the filter options to view transactions by category or date range. View the summary section to see total income, total expenses, and current balance. Explore the charts and graphs to visualize your financial data.
Contributions are welcome! If you have any suggestions, feature requests, or bug reports, please create an issue or submit a pull request.