Giter VIP home page Giter VIP logo

budgetbuddy's Introduction

Budget Buddy

Introduction

Project Description: Oversee your financial outgoings and gain insights into your spending habits with my intuitive expense management too! Designed to simplify personal finance, this application allows you to meticulously record and categorize your expenses, enabling a clear view of your financial activity on a month-by-month basis. Whether you're looking to tighten your budget, save for future goals, or simply stay informed about where your money goes, our tool provides a comprehensive, user-friendly platform for all your financial tracking needs!

Screenshots:

Technologies Used

  • Front-End: React, TypeScript, Vite
  • Back-End & Database: Firebase
  • UI Design: HeroIcons, React Router Dom
  • Utilities: React Calendar, Recharts, Google Auth

Key Features

  • Google Login: Users can easily login and authenticate with Google sign in.
  • Manual Expense Entry: Easily add expenses manually and view them in a comprehensive list on the expenses page.
  • Monthly Spending Graph: Visualize your monthly financial performance with an intuitive graph.

Setup and Installation

Prerequisites

Before you can set up and run this web app, make sure you have the following prerequisites installed on your system:

  • Node.js: You'll need Node.js to run JavaScript and npm (Node Package Manager) to manage project dependencies.

Installation Steps

Follow these steps to set up and run this web app:

  1. Clone the Repository: git clone
  2. Go to the project directory cd
  3. Add your own .env file containing firebase credentials
  4. Install Dependencies npm install
  5. Run the App npm run dev

Usage

To use this React web app, follow these steps:

  1. Create an Account or Log In with Google Sign-In:

    • If you don't have an account, you can create one by following the registration process.
    • Alternatively, you can log in directly using your Google account by clicking the Google Sign-In option.
  2. Navigate to the Expenses Tab:

    • Once you are on the home page after logging in, find and click on the "Expenses" tab in the navigation menu.
  3. Start Adding Expenses:

    • In the "Expenses" section, you can start adding your expenses.
    • Click on the "Add Expense" button or a similar interface element to create a new expense entry.
    • Fill in the details for the expense, such as the date, description, amount, and any other relevant information.
    • Save the expense to record it.

You can continue to add, edit, and manage your expenses as needed while using the app. Enjoy tracking your expenses!

Contact Information

Future Scope:

  • Receipt Scanning: Implement a feature to add new expenses by capturing photos of receipts.
  • CSV Import: Enable uploading of expenses data through CSV files for easier bulk entry.
  • Budget Goals: Introduce the ability to set and track monthly or weekly budget goals.
  • Advanced Graphs: Expand the range of spending tracking graphs for more detailed financial insights.
  • Share Progress: Add functionality to share expense tracking progress with friends and family.
  • Bill Reminders: Implement reminders for upcoming bills or subscription renewals to avoid missed payments.
  • Miscellaneous: The mobile version of the app requires further refinement for optimal performance and user experience.

budgetbuddy's People

Contributors

jenz270 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.