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:
- Budget Buddy Screenshots: https://app.gemoo.com/share/image-annotation/589942646264229888?codeId=vJRmxVXpmGq21
- Front-End: React, TypeScript, Vite
- Back-End & Database: Firebase
- UI Design: HeroIcons, React Router Dom
- Utilities: React Calendar, Recharts, Google Auth
- 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.
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.
Follow these steps to set up and run this web app:
- Clone the Repository: git clone
- Go to the project directory cd
- Add your own .env file containing firebase credentials
- Install Dependencies npm install
- Run the App npm run dev
To use this React web app, follow these steps:
-
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.
-
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.
-
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!
- Name: Jieni Hou
- LinkedIn: Jieni Hou's LinkedIn Profile
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.