Personal Finance Tracker App

Overview

This Personal Finance Tracker App is built using React.js for the frontend, Firebase for the backend (including Firestore for the database), Ant Design for UI components, PapaParse for CSV import/export, and Firebase Authentication for secure user authentication. These technologies combine to offer users a robust platform to manage their finances effectively, with features for income and expense tracking, financial data visualization, and transaction management.

Technologies Used

• Frontend: React.js, Ant Design
• Backend: Firebase (Authentication)
• Database: Firestore
• CSV Import/Export: PapaParse
• React-Toastify: Used React-Toastify for seamless user alerts/notifications, enhancing app experience.

Live Demo

Check out the live demo: Personal Finance Tracker App

Features

User Authentication

• Implements Firebase Authentication for secure user sign-up and login processes.
• Supports authentication methods such as email/password and Google for user convenience and data security.

Signup

Signin

Income and Expense Management

• Users can add, edit, and delete income and expense entries for real-time tracking of their financial activities.
• Displays the current balance to provide a quick snapshot of the user's financial status.

Add Income and Expense Modal

Financial Data Visualization

• Utilizes Ant Design components for visually representing financial statistics and data.
• Presents financial insights through line charts for trends and pie charts for expenditure distribution.

Transaction Features

• Enhances user experience with a search functionality for efficiently finding specific transactions.

• Organizes transaction data in categorized tables, allowing sorting by date or amount, with pagination for improved data management.

  

Import to CSV and Export to CSV

• Utilizes PapaParse for importing financial data from CSV files, enabling bulk transaction entries.
• Enables users to export financial data to CSV for external analysis or backup purposes using PapaParse.

Notifications

-Incorporating React-Toastify for easy notification implementation, the app now provides seamless user alerts, enhancing the overall user experience.

Usage

To run the Personal Finance Tracker App:

1. Clone the repository to your local machine.
2. Install dependencies using npm install.
3. Launch the app locally with npm start.
4. Sign up or log in to commence tracking your personal finances.