1 of 41

PrismWealth�Team Member(s): Josue Miranda, Alex Choi, Gabriela Vega Lobatos, Dorys Ricardo Abellon�Product Owner(s): Alfredo Medina�Professor: Masoud Sadjadi�School of Computing and Information Sciences�Florida International University

VIP/Senior Project Final PresentationFall 2024

2 of 41

Problem definition

  • Whole Project:
    • The project will focus on creating a simulator that allows users to input their financial data, set savings goals, and receive personalized recommendations based on their spending habits. Key features will include budgeting tools, expense tracking, financial goal setting, and visual analytics to help users understand their financial health and progress.
  • My Part:
    • The Budgeting Tools feature addresses the challenge of managing personal finances by allowing users to input and categorize income and expenses. It provides a centralized interface to track budgets and transactions.

3 of 41

Requirements: User Stories

User Stories:

  1. As a user, I want to input my income and expenses so that I can track my finances.
  2. As a user, I want to categorize transactions to analyze my spending habits.
  3. As a user, I want to view a summary of my budget, so I know my financial status at a glance.

Most Significant User Story:

  • "As a user, I want to input my income and expenses so that I can track my finances."

4 of 41

Use Case

5 of 41

Requirements: Sequence Diagrams

6 of 41

System Design: Architecture

  • Frontend (React): The frontend is implemented using React to allow users to set financial goals and track their progress. It features a React form for adding and selecting financial goal types, with a user-friendly design powered by Material UI. Chart.js is utilized to visualize progress and data insights.
  • Backend (Django): The Django backend exposes API endpoints for managing budget data using ModelViewSet for simplified CRUD operations. Available endpoints include:
    • POST /api/budget: Create a new budget entry.
    • GET /api/budget: Retrieve existing budget data.
    • PUT /api/budget: Update an existing budget entry.
    • DELETE /api/budget: Delete a budget entry.
  • Database (PostgreSQL):
    • The PostgreSQL database includes a table with fields for user, category, budget_amount, start_date, and end_date, enabling storage and retrieval of budgeting data for effective management.

7 of 41

System Design: Deployment

  • System Deployment Diagram
  • Software: Frontend utilizes React, backend runs Django connected to a database in PostgreSQL.
  • Hardware: The project runs on URLs related to localhost and then on their respective ports, 5173 for React, 5432 for PostgreSQL, and 8000 for Django

8 of 41

System Design

  • Persistent data design:
    • The system uses a PostgreSQL database to manage budget data efficiently. It includes a Budget Table with fields for linking budgets to specific users, categorizing expenses, allocated budget, and defining the budget period. This design ensures scalable and reliable storage of budgeting information for data retrieval and management.
  • Security/Privacy:
    • User authentication ensures only authorized access to budget data.

9 of 41

Minimal Class Diagram

10 of 41

Test Suites and Test Cases

  • Sunny Day
    • The system works as intended, allowing users to add, edit, and delete budget items seamlessly via the React interface. Data is accurately stored in the database and retrieved through the API. Budget information is displayed clearly using Chart.js, and filters enable users to categorize transactions effectively.
  • Rainy Day
    • The system manages errors effectively. Invalid inputs, like incomplete fields or wrong formats, prompt validation alerts. Backend issues, such as failed API requests or database errors, provide clear notifications to inform users.

11 of 41

Summary

  • Summary
  • Josue Miranda - jmira131@fiu.edu
  • Questions?
  • Thank You!

12 of 41

Problem definition

  • Whole Project:
    • The project will focus on creating a simulator that allows users to input their financial data, set savings goals, and receive personalized recommendations based on their spending habits. Key features will include budgeting tools, expense tracking, financial goal setting, and visual analytics to help users understand their financial health and progress.
  • My Part:
    • The Expense Tracking feature enables users to monitor their spending through interactive visualizations and filters. This ensures users stay within their budget and identify areas where they can save money.

13 of 41

Requirements: User Stories

User Stories:

  • As a user, I want to track my expenses over time so I can stay within my budget.
  • As a user, I want to filter expenses by category and date for better insights.
  • As a user, I want to upload receipts and have the data automatically processed into expenses.

Most Significant User Story:

  • "As a user, I want to filter expenses by category and date for better insights."

14 of 41

Use Case

15 of 41

Requirements: Sequence Diagrams

16 of 41

System Design: Architecture

  • Frontend (React): The frontend is implemented using React to allow users to set financial goals and track their progress. It features a React form for adding and selecting financial goal types, with a user-friendly design powered by Material UI. Chart.js is utilized to visualize progress and data insights.
  • Backend (Django): The backend provides RESTful API endpoints to manage expense data:
    • POST /api/expense/: Create a new expense entry.
    • GET /api/expense/: Retrieve expenses, with optional filtering by category or date.
    • PUT /api/expense/{id}/: Update a specific expense entry.
    • DELETE /api/expense/{id}/: Delete an expense entry.
  • Database (PostgreSQL):
    • The database schema includes an Expense Table to store details such as user, amount, description, category, date, and optional receipt attachment.

17 of 41

System Design: Deployment

  • System Deployment Diagram
  • Software: Frontend utilizes React, backend runs Django connected to a database in PostgreSQL.
  • Hardware: The project runs on URLs related to localhost and then on their respective ports, 5173 for React, 5432 for PostgreSQL, and 8000 for Django

18 of 41

System Design

  • Persistent data design
    • The system uses a PostgreSQL database to store and manage expense data. The Expense Table includes fields for user, amount, description, category, date, and optional receipt_attachment to track individual expenses. A Category Table holds predefined categories for consistent classification and filtering. This design ensures efficient data management, updates, and integration with visualization tools.
  • Security/Privacy
    • User authentication ensures only authorized access to budget data.

19 of 41

Minimal Class Diagram

20 of 41

Test Suites and Test Cases

  • Sunny Day
    • The system works seamlessly, allowing users to add, edit, and delete expenses via the React form. Expense data is accurately stored and retrieved, with filters enabling category or date-based views. Interactive charts dynamically update to reflect real-time changes.
  • Rainy Day
    • The system handles errors effectively. Invalid inputs like missing fields or wrong formats show validation messages, while backend issues return clear error notifications to keep users informed.

21 of 41

Summary

  • Summary
  • Gabriela Vega Lobatos - gvega038@fiu.edu
  • Questions?
  • Thank You!

22 of 41

Problem definition

  • Whole Project:
    • The project will focus on creating a simulator that allows users to input their financial data, set savings goals, and receive personalized recommendations based on their spending habits. Key features will include budgeting tools, expense tracking, financial goal setting, and visual analytics to help users understand their financial health and progress.
  • My Part:
    • The Financial Goal Setting feature allows users to set measurable financial targets and track their progress, helping them save for important life goals like buying a house or vacationing.

23 of 41

Requirements: User Stories

User Stories:

  • As a user, I want to set financial goals so I can achieve specific targets.
  • As a user, I want to track my progress towards my goals.
  • As a user, I want to be alerted if I’m falling behind on my goals.

Most Significant User Story:

  • "As a user, I want to set financial goals so I can achieve specific targets."

24 of 41

Use Case

25 of 41

Requirements: Sequence Diagrams

26 of 41

System Design: Architecture

  • Frontend (React): The frontend is implemented using React to allow users to set financial goals and track their progress. It features a React form for adding and selecting financial goal types, with a user-friendly design powered by Material UI. Chart.js is utilized to visualize progress and data insights.
  • Backend (Django REST Framework): The backend provides a set of API endpoints to manage financial goals:
    • POST /api/goal/: Creates a new financial goal.
    • GET /api/goal/: Retrieves all financial goals for the user.
    • PUT /api/goal/{id}/: Updates the details of a specific financial goal.
    • DELETE /api/goal/{id}/: Deletes a financial goal.
  • Database (PostgreSQL):
    • Table has columns like user, deadline, created at, target amount and current amount

27 of 41

System Design: Deployment

  • System Deployment Diagram
  • Software: Frontend utilizes React, backend runs Django connected to a database in PostgreSQL.
  • Hardware: The project runs on URLs related to localhost and then on their respective ports, 5173 for React, 5432 for PostgreSQL, and 8000 for Django

28 of 41

System Design

  • Persistent data design
    • The system uses a PostgreSQL database with a User Table for user data, a Goal Table to track financial goals (user ID, deadlines, target amounts, progress), a Transaction Table for goal-linked transactions, and a Recommendation Table for personalized insights. This design ensures efficient and scalable financial data management.
  • Security/Privacy
    • User authentication ensures only authorized access to budget data.

29 of 41

Minimal Class Diagram

30 of 41

Test Suites and Test Cases

  • Sunny Day
    • The system performs as expected, allowing users to create, update, and delete financial goals seamlessly. Goals are accurately stored and retrieved from the database, and progress is visualized in real-time using Chart.js. Recommendations display relevant insights based on user data.
  • Rainy Day
    • The system manages errors, with validation errors for invalid goal submissions and clear messages for unavailable data or endpoints. Attempts to update or delete non-existent goals and insufficient data for recommendations return appropriate error responses.

31 of 41

Summary

  • Summary
  • Alex Choi - achoi009@fiu.edu
  • Questions?
  • Thank You!

32 of 41

Problem definition

  • Whole Project:
    • The project will focus on creating a simulator that allows users to input their financial data, set savings goals, and receive personalized recommendations based on their spending habits. Key features will include budgeting tools, expense tracking, financial goal setting, and visual analytics to help users understand their financial health and progress.
  • My Part:
    • The Personalized Recommendations feature uses data analytics to provide users with actionable financial advice, such as savings tips or alerts about overspending trends.

33 of 41

Requirements: User Stories

User Stories:

  • As a user, I want to receive actionable insights so I can optimize my financial decisions.
  • As a user, I want tips on saving money based on my spending habits.
  • As a user, I want to be alerted about overspending trends.

Most Significant User Story:

  • "As a user, I want to receive actionable insights so I can optimize my financial decisions."

34 of 41

Use Case

35 of 41

Requirements: Sequence Diagrams

36 of 41

System Design: Architecture

  • Frontend (React): The frontend will display personalized recommendations in a modal or dedicated page. Recommendations could include savings tips, overspending warnings, or spending insights.
    • Use a react form for adding and selecting available types of financial goals
    • Create a user-friendly form using Material UI to add and select types of financial goals.
    • Chart.js to be able to visualize insights from recommendations
  • Backend (Django REST Framework): Endpoints:
    • GET /api/recommendation/: Retrieve personalized recommendations for the user based on their financial data.
    • POST /api/goal/: Add a new financial goal.
    • GET /api/goal/: Retrieve all financial goals.
    • PUT /api/goal/{id}/: Update a financial goal.
    • DELETE /api/goal/{id}/: Delete a specific goal.
  • Database (PostgreSQL):
    • Store user-specific information, store generated recommendations for each user.

37 of 41

System Design: Deployment

38 of 41

System Design

  • Persistent data design
    • The system uses a PostgreSQL database with tables for users, expenses, goals, transactions, and recommendations. User data includes credentials and optional income. Expenses track amounts, categories, and dates. Goals manage types, targets, progress, and deadlines. Transactions link contributions to goals, and recommendations store user-specific insights.
  • Security/Privacy
    • User authentication ensures only authorized access to budget data.

39 of 41

Minimal Class Diagram

40 of 41

Test Suites and Test Cases

  • Sunny Day
    • The system performs as expected. Users can log in with valid credentials, add financial goals with complete details, view accurate recommendations based on sufficient data, update expenses successfully, and visualize financial data correctly on the dashboard.
  • Rainy Day
    • The system handles errors gracefully. Invalid login attempts show error messages. Adding goals with missing fields or updating expenses with invalid data triggers validation errors. Viewing recommendations without sufficient data displays a "Not enough data" message.

41 of 41

Summary

  • Summary
  • Dorys - drica010@fiu.edu
  • Questions?
  • Thank You!