Back to Course

React: Personal Finance Tracker

0% Complete
0/0 Steps
Quiz 1 of 0

React: Personal Finance Tracker

Sonu August 30, 2024

Project Title: Personal Finance Tracker

Scope of Work:

Create a simple Personal Finance Tracker using React JS that allows users to track their income and expenses. The project will involve building a basic React application with components for adding transactions, displaying a summary of total income and expenses, and a list of recent transactions. The focus will be on using React state management, components, and basic styling.

User Stories:

  1. User Story 1: Add a New Transaction
    • As a user, I want to add a new transaction (income or expense) by entering the amount, type, and description, so that I can keep track of my financial activities.
    • Acceptance Criteria:
      • There should be a form with input fields for the transaction amount, type (Income/Expense), and description.
      • The form should have a “Add Transaction” button that, when clicked, adds the transaction to the list and updates the total balance.
  2. User Story 2: View Total Balance
    • As a user, I want to see my total balance calculated from all my transactions, so that I know how much money I currently have.
    • Acceptance Criteria:
      • The total balance should be displayed prominently on the screen.
      • The balance should be automatically updated whenever a new transaction is added or an existing one is deleted.
  3. User Story 3: View Recent Transactions
    • As a user, I want to see a list of my most recent transactions, so that I can review my income and expenses at a glance.
    • Acceptance Criteria:
      • There should be a list of transactions showing the description, type (Income/Expense), and amount.
      • The transactions should be listed in reverse chronological order (most recent first).
  4. User Story 4: Delete a Transaction
    • As a user, I want to delete a transaction if I made a mistake, so that my financial records are accurate.
    • Acceptance Criteria:
      • Each transaction in the list should have a delete button.
      • When the delete button is clicked, the transaction should be removed from the list and the total balance should be updated accordingly.

Wireframes:

  1. Home Screen:

    —————————————————-
    | Personal Finance Tracker |
    —————————————————-
    | Total Balance: $[Current Balance] |
    —————————————————-
    | [Add New Transaction] (Button) |
    —————————————————-
    | Recent Transactions: |
    | ———————————————- |
    | | Description | Type | Amount | [X] | |
    | ———————————————- |
    | | Salary | Income | $2,000 | [X] | |
    | ———————————————- |
    | | Grocery | Expense| $-150 | [X] | |
    | ———————————————- |
    | |
    | [More transactions below…] |
    —————————————————-
  2. Add New Transaction Form:
    —————————————————-
    | Add New Transaction |
    —————————————————-
    | Description: [_____________________] |
    | Amount: [_____________________] |
    | Type: [Income/Expense] (Dropdown) |
    —————————————————-
    | [Add Transaction] (Button) |
    —————————————————-

Acceptance Criteria:

  1. General UI/UX:
    • The interface should be clean and simple, with clear labels and buttons.
    • The application should be responsive and work well on different screen sizes.
    • Navigation between adding transactions and viewing the transaction list should be intuitive.
  2. Functional Criteria:
    • Users should be able to add transactions with a description, amount, and type.
    • The total balance should be calculated correctly based on the sum of all income and expenses.
    • Transactions should be displayed in a list with the most recent at the top.
    • Users should be able to delete a transaction, and the balance should be updated immediately.
  3. Code Quality:
    • Use React components to separate concerns (e.g., TransactionList, TransactionForm, Balance).
    • Manage state using React’s useState hook.
    • Ensure that the application is modular, with each component handling its own logic and UI.
    • Code should be well-commented and organized for easy understanding.

Time Estimate:

  • Setup React Environment and Initial Structure: 20 minutes
  • Create Transaction Form Component: 30 minutes
  • Create Transaction List and Display Component: 30 minutes
  • Implement State Management for Transactions: 30 minutes
  • Implement Add and Delete Transaction Logic: 30 minutes
  • Styling and UI Enhancements: 20 minutes
  • Testing and Refinement: 20 minutes

Total Time: 180 minutes

This project is ideal for beginners in React JS, as it covers essential concepts such as component-based architecture, state management, and basic event handling. The project can be extended in the future to include features like data persistence, filtering transactions, or generating reports.

Please enable JavaScript in your browser to complete this form.
NOTE: Begin your video by talking about your experience at CareerPhi, experience of building this project and then continue. Describe your code and project in depth, don’t cut corners. You can upload your video on Google Drive or similar and keep sharing as “Anyone with the link can view”. Share the Google Drive link in this box.
Remember, we are trying to build your portfolio so more recruiters start noticing you.
You consent CareerPhi may use the content on various platforms