React: Personal Finance Tracker
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:
- 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.
- 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.
- 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).
- 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:
- 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…] |
—————————————————- - Add New Transaction Form:
—————————————————-
| Add New Transaction |
—————————————————-
| Description: [_____________________] |
| Amount: [_____________________] |
| Type: [Income/Expense] (Dropdown) |
—————————————————-
| [Add Transaction] (Button) |
—————————————————-
Acceptance Criteria:
- 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.
- 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.
- 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.