wetriedreallyhardtofindaname - BudgetBuddy

Budget Buddy for your personal finance managment

Comment

Inspiration

Our lack of budget managment(we have been overseas this entire month:')

What it does

SummerBuild 2025 Project Write-Up BudgetBuddy Team Name: wetriedrlyhardtofindaname Team Members: Chia Sze Ying, Vera Chua Shun Kah BudgetBuddy - Personal Finance Management App 1

  1. Project Overview 1
  2. Key Functionalities 1
  3. Pain Points Solved 2
  4. External APIs Used 2
  5. Tech Stack Implementation 3
  6. Key Features in Detail 4 a) Authentication Flow 4 b) Expense Management 4 c) Budget Tracking 5 d) Receipt Scanning 5
  7. Future Enhancements 5
  8. Conclusion 6 BudgetBuddy - Personal Finance Management App
  9. Project Overview BudgetBuddy is a mobile application designed to help users track their expenses, set budgets, and gain insights into their spending habits. Built with React Native, the app provides a seamless cross-platform experience for iOS and Android users.
  10. Key Functionalities ● User Authentication ○ Secure login and registration ○ Profile management with personal details ○ Session persistence using AsyncStorage ● Expense Tracking ○ Add expenses with categories, amounts, and dates ○ View expense history with detailed breakdowns ○ Delete unwanted expenses ● Budget Management ○ Set monthly budgets ○ Visual progress tracking with progress bars ○ Spending alerts when approaching budget limits ● Data Visualization ○ Pie charts for expense category breakdown ○ Spending trends over time ● Receipt Scanning ○ Camera integration for receipt capture ○ OCR processing via Veryfi API ○ Automatic expense extraction ● Navigation ○ Bottom tab navigation for main app sections ○ Smooth transitions between screens
  11. Pain Points Solved ➢ Financial Awareness - Helps users understand where their money goes with clear visualizations and categorization. ➢ Budget Adherence - Provides real-time feedback on spending relative to set budgets. ➢ Manual Entry Reduction - The receipt scanning feature automates expense logging, saving time and reducing errors. ➢ Cross-Platform Access - Works on both iOS and Android with a consistent experience. ➢ Offline Capability - Uses AsyncStorage to maintain data when offline, syncing when connection is restored.
  12. External APIs Used ● Veryfi API - For receipt scanning and OCR functionality to extract expense details from receipts. ● Expo Camera - For accessing device cameras to capture receipt images.
  13. Tech Stack Implementation Frontend (React Native) Backend (Node.js/Express)
  14. Core Components ○ Built with React Native for cross-platform compatibility ○ Uses React Navigation for screen management ○ Implements custom reusable components (Buttons, Inputs, etc.)
  15. State Management ○ Local state with React hooks (useState, useEffect) ○ AsyncStorage for persistent data (user sessions, expenses) ○ Context API could be added for more complex state needs
  16. Styling ○ StyleSheet for component styling ○ Responsive design using Dimensions API ○ Custom fonts via expo-google-fonts
  17. Data Visualization ○ react-native-progress for budget progress bars ○ react-native-chart-kit for pie charts
  18. Animation ○ Animated API for smooth transitions and interactions ○ PanResponder for swipe gestures
  19. API Server ○ Express.js for routing and middleware ○ CORS for cross-origin requests ○ Better-sqlite3 for lightweight database
  20. Database ○ SQLite database for user and expense data ○ Tables for users, expenses, and scans ○ Prepared statements for efficient queries
  21. Authentication ○ JWT token-based authentication ○ Password hashing for security
  22. Third-Party Integration ○ Veryfi API integration for receipt processing ○ Axios for making API requests
  23. Key Features in Detail a) Authentication Flow The app implements a secure authentication system with: ● Email validation ● Password confirmation ● JWT token storage ● Protected routes ● Session management b) Expense Management The expense system allows users to: ● Add expenses manually or via receipt scan ● Categorize expenses (Food, Transport, etc.) ● View expense history with sorting ● Delete incorrect entries ● See visual breakdowns of spending c) Budget Tracking Users can: ● Set monthly budgets ● See real-time spending progress ● Get visual feedback via progress bars ● View remaining budget amounts d) Receipt Scanning The innovative receipt scanner: ● Uses device camera to capture receipts ● Sends images to Veryfi API for processing ● Extracts vendor, date, amount, and items ● Automatically categorizes expenses ● Stores raw receipt data for reference
  24. Future Enhancements ➢ Cloud Sync - Add Firebase or similar for cross-device sync ➢ Export Data - CSV/PDF export of expense reports ➢ Recurring Expenses - Track monthly subscriptions ➢ Goals - Save for specific financial goals
  25. Conclusion BudgetBuddy provides a comprehensive solution for personal finance management, combining ease of use with powerful features. By addressing key pain points in expense tracking and budget adherence, it helps users gain better control over their finances through intuitive interfaces and automation. Team’s Note: For our Demo Video, the interface may seem slightly laggy due to weak wifi (We are overseas) 🙁 ## How we built it We did it via horrible wifi and using vscode and expogo to test it out. Postman was also used to test out the backend ## Challenges we ran into We ran into horrible wifi around the world and had issues with running the servers. ## Accomplishments that we're proud of We manage to connect to all the backend and frontend in time ## What we learned Backend related linking ## What's next for wetriedreallyhardtofindaname Defintiely more projects while we are overseas

Built With

Share this project:

Updates