shangguanwang / flowfi

【WIP】personal financial planner, built with TypeScript, SASS

Hi there 👋

🌱 Weclome to my Github page, I'm Shangguan

👀 I'm a self-taught Frontend Developer with a passion for building meaningful products, proficient in React and JavaScript.

Projects:

• BerryCart Shopping List 🍓
• NFT Marketplace 🖼️
• Little Joy 🌸
• TypeScript todo list 📝

💪 I'm currently working as a frontend engineer at a startup, continuing #100DaysofCode challenges, and contributing to open-source projects.

Tech Stack:

Connect With Me:

📫 Reach me at my [email protected]

📊 GitHub Stats:

flowfi's Issues

12. As a user, I want to see a Net Worth Summary Card on the Dashboard Page

Summary

The Net Worth Summary page should display the following:

• Total Asset Amount
• Total Debt Amount
• Debt to Asset Ratio

Acceptance Criteria

• As the user makes updates on the Assets or Debt view, the Net Worth card will update immediately to reflect the latest value.

15. Edit Goals - As a user, I want to be able to edit an existing goal

Summary

Users need to be able to edit an existing goal.

Acceptance Criteria

• The Goals page has an edit button that brings the user to the edit page when clicked
• The GoalEdit page should be prepopulated with the existing goal row, user can either edit the data and save, or click cancel to go back to the Goals page.
• create an editGoalsData function in api/firebase.js to edit the existing goal in the Firebase database

4. As a user, I want to be able to delete an asset

Summary

Users need to be able to delete assets.

Acceptance Criteria

• The Assets page has delete button that allows the user to delete an asset when clicked
• Add a deleteData function in api/firebase.js to delete an asset from the Firebase database

Future Improvements

• Clicking the delete button prompts the user to confirm that they really want to delete the item

9. As a user, I want to navigate to Sign Up Page

Summary

Create a Register page that share the same layout as the landing(Sign in) page except for the form, the form should include: username, email, password

Acceptance Criteria

• The Register page should share a common layout with the Landing.tsx page to ensure the code is DRY
• The Register page should include a sign up form that allows users to input their information
• After clicking create account button, users will be automatically redirected to the Layout(Home) page.

Firebase Authentication Task:

• If there is a firebase error (e.g. password shorter than 6 characters/user already exists), prevent the user from being redirected to the Layout(Home) page until the error is addressed.
• If the user clicks the create account button and their input meets criteria, the input are saved to Firebase Authentication database

13. As a user, I want to see a Debt Pie Chart on the Dashboard page

Summary

Users need to be able to see their debt sliced by type in a donut pie chart

Acceptance Criteria

• The Home page displays a donut pie chart based on the data in the Debt page

17. userAuth - As a user, I want to be able to Log In to the app and Log Out

Acceptance Criteria

UI related tasks:

• After users type in email and password and click Sign In, they should be redirected to the Home Page
• If users click on the Logout button on the home page, they will be redirected back to the sign-in Landing page

Firebase related task:

• use Firebase Authentication to save users' email and password in the database.

8. As a user, I want to be prompted when the email I typed in is invalid

Summary

Email validation for the landing page

Acceptance Criteria

• Helper text will appear if the user types an invalid email
• Helper text automatically disappears after the user types a valid email

10. Add & Delete Debts - As a user, I want to be able to add a new debt, delete an existing debt, and view the debt in a table

Summary

The Debt view UI will look similar to Assets. The key of this Issue is to think about how to refactor some of the existing code in #3 for reuse.

Acceptance Criteria

• By clicking on Add Debt button, users should be redirected to a form consisting of the following fields: Debt Name, Debt Amount, Debt Type, Annual Interest Rate
• After successfully input the data, users should be redirected back to the Debt view, and the new data should be reflected in a table view.
• Firebase data task: debt data should be saved in a separate sub-collection under the same user in Firebase.

Calculation Tasks

• Total Debt number is computed and displayed at the top of the Debt view
• Monthly payment is computed and display as a column in the debt table

3. Add Assets - As a user, I want to be able to add a new asset and view the asset I just added in a table

Summary

Users should be able to add a new asset. To do so, the Assets view should have a + Add Assets button.

Acceptance Criteria

UI-related tasks

• By clicking on the + Add Assets button, users are redirected to the AssetsAdd view
• The AssetsAdd view presents users with a form that allows them to enter 3 things:
  • Asset Name (string)
  • Asset Amount (number)
  • Asset Type (dropdown)
• After inputting data, users can click Save to save the data to the database and automatically redirected back to the Assets page

Data-related tasks

• User data is saved to Firebase
• User data can be retrieved from Firebase
• Display user data in table format
• Display total asset amount at the top

Notes

• You will know your is correctly implemented if you click on the label and keyboard focus moves to the related input.

1. Navbar - As a user, I want to be able to navigate to all the pages in the application by clicking the links in the navbar

Summary

Users need to be able to navigate between the pages of our application in order to access all of its features.

Acceptance Criteria

• The nav element is added to the Layout component
• Links to the "Home", "Assets", "Debt", "Income" and "Expenses" pages of the app are In the nav element
• The links all function as expected using the NavLink component from react-router-dom

2. Add Footer

Summary

in Layout.tsx, include a footer that describes software version, year, and author

5. As a user, I want to be able to edit an asset

Summary

Users need to be able to edit assets.

Acceptance Criteria

• The Assets page has an edit button that brings the user to the edit page when clicked
• The AssetsEdit page should be prepopulated with the existing asset row, user can either edit the data and save, or click cancel to go back to the Assets page.
• Add an editData function in api/firebase.js to edit an asset in the Firebase database

14. Add & Delete Goals - As a user, I want to be able to add a new goal, delete an existing goal, and view my goals in a table

Acceptance Criteria

• By clicking on Add Goal button, users should be redirected to a form consisting of the following fields: Name, Amount, Due Date. There is an additional number field called "Saved So Far" which will default to zero.
• After successfully input the data, users should be redirected back to the Goals view, and the new data should be reflected in a table view.
• Firebase data task: debt data should be saved in a separate sub-collection under the same user in Firebase.

16. As a user, I want to see the Summary Card and a Progress Bar Chart for my goals

Acceptance Criteria

• Users should be able to see 3 Number Cards on the Goals page that displays Total Needed amount, Total Saved, To Go amount
• Users should be able to see a dynamic progress bar chart on the Home page that displays the % of saved towards the saving goals.

7. Landing Page UI

Summary

Create a landing Page UI under views folder that contains the following

• Logo (refactor into component for repeat use)
• Description: heading and paragraph
• Form for Login (Email and Password)
• Login Button
• Link: Don't have an account? Sign up
• Illustration Image from Freepik

Acceptance Criteria

• If users click on the Login Button, they will be directed to the Layout page
• If users click on the Sign up link, they will be directed to the register page

6. As a user, I want to see a Asset Pie Chart and total Assets number on the Dashboard page

Summary

Users need to be able to see their assets sliced by type in a donut pie chart

Acceptance Criteria

• The Home page displays a donut pie chart based on the data in the Assets page

11. As a user, I want to be able to edit an existing debt

Summary

Users need to be able to edit an existing debt item.

Acceptance Criteria

• The Debt page has an edit button that brings the user to the edit page when clicked
• The DebtEdit page should be prepopulated with the existing debt row, user can either edit the data and save, or click cancel to go back to the Debt page.
• create a editDebtData function in api/firebase.js to edit a debt in the Firebase database