/Firebase-Vite-Financial-System

Primary LanguageJavaScript

Firebase-Vite Financial System

signin

Overview

The Firebase-Vite Financial System is a web application designed to manage personal financial records. Users can effortlessly add transactions, visualize their financial data using interactive graphs, view daily transactions, and export monthly reports as PDFs. The system is built with Vite for fast development and integrated with Firebase for real-time data management.

Features

1. Graph Visualization

  • Visualize your monthly financial analysis, including earnings and expenses, through interactive graphs.
  • Gain a comprehensive overview of your financial trends to make informed decisions.

dashboard

2. Add Transactions

  • Easily add your transactions to keep track of income and expenses.
  • Set a monthly budget to monitor and control your financial habits. Note that the monthly limit can only be set once per month.

transaction_exp

3. Daily Transactions

  • View detailed records of your daily transactions in a well-organized table format.
  • Transactions are grouped intelligently, providing clear insights into your spending patterns.

transaction

4. Export Monthly Transactions

  • Export your monthly transactions to a PDF file for record-keeping and sharing.
  • Generate comprehensive reports of your financial activities for archiving or printing.

pdf

Demo

Watch the video demonstration of the system to see it in action:

demo.mp4

Technologies Used

This project leverages a modern tech stack to provide an efficient and responsive user experience:

  • Vite: Fast and optimized web development build tool.
  • Firebase: For real-time database management and user authentication.
  • Tailwind CSS: A utility-first CSS framework for styling.
  • Flowbite: A component library built on top of Tailwind CSS for faster UI development.
  • ApexCharts: A library for creating beautiful data visualizations and charts.
  • jQuery: For handling DOM manipulation and asynchronous operations.

Installation

To set up this project locally:

  1. Clone the repository:

    git clone https://github.com/pheymin/Firebase-Vite-Financial-System.git
cd firebase-vite-financial-system

  2. Install dependencies using Yarn:

    yarn install

  3. Set up your Firebase credentials by creating a .env file and adding your Firebase API keys:

    VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
VITE_FIREBASE_APP_ID=your-app-id

  4. Start the development server:

    yarn dev

  5. Open the project in your browser:

    http://localhost:5173

Usage

  1. Dashboard: Get an overview of your financial status, including monthly budget, earnings, and expenses.
  2. Transactions: Manage your daily transactions, add new records, and set monthly limits.
  3. Graph Visualization: Analyze financial trends using interactive graphs.
  4. Export: Generate monthly reports in PDF format for printing or sharing.

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

📫 Contact

Pheymin - pheymin1223@gmail.com - https://github.com/pheymin