Created
March 7, 2025 23:44
-
-
Save championswimmer/c2ec21486c8418b3977a8d2e0963a69f to your computer and use it in GitHub Desktop.
Revisions
-
championswimmer created this gist
Mar 7, 2025 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,129 @@ Build me a website which will be a personal financial tracker that helps create plan for future income and expenses and plan for goals in life. Basic Details and Tech Stack to be used Tech Stack - Framework: React - Language: Typescript - Styling: Tailwind - Icons: Lucide - Charting: Recharts Basic logic of the underlying core calculations ```ts Portfolio { startYear: Int, default=2015 // year from which calculations to be started endYear: Int default=2075 // year till which to calculate incomeStreams: IncomeStream[] expenseStreams: ExpenseStream[] majorExpenses: MajorExpense[] assets: Asset[] } IncomeStream { // there can be multiple income streams name // eg: salary, consulting startYear // from when this income started endYear // till when this income will exist annualAmount // amount of income in the first year (startYear) annualGrowth (percentage) } ExpenseStream { // there can be multiple ongoing expense streams name // eg: daily-life, children-education startYear endYear annualAmmount annualGrowth // inflation of expenses } MajorExpense { // these are for large expenses like car, house name totalAmmount isInInstallments // if true, then spent over years (eg via a loan) annualInstallmentAmount installmentStartYear installmentEndYear // same as installment start year if not in installments annualInterest // 0 if not in installments, use this to calculate annualInstallmentAmount } Asset { type // eg: cash, stocks, property, name currentAmmount annualGrowth // the APR of growth, can be negative for depreciating asset like car spendPriority // a ranking number, higher ranked is spent from first when required for expenses isForSavings: boolean // if true, then some part of annual savings get contributed to this } SavingsDistribution { // during different spans, you might be saving in different mixes startYear endYear distribution: Map<Asset, Number> // how much percentage goes into which asset. sum MUST BE 100! } // there cannot be savings distribution ranges with overlapping start and end years ``` The website should have the following sections to take input from the user - Basic Infor - Their age - Start year - End Year - Income Streams - allow adding income streams with [+ Add] button - every income stream, user can enter start, end years, income ammount and growth - ammount entered is considered current year ammount, and values between startYear to current year are interpolated - Expense Streams - allow adding expense streams with [+ Add] button - every expense stream, user can enter start, end years, income ammount and growth - Assets - allow adding assets with a [+ Add] button - asset type should be a selector between "Cash & Equivalents", "Stocks & Equities", "Movable Property (Car)", "Immovable Property (House)" - add a checkbox for "Add savings into this asset every year" - add a drop down [1-10] "Priority of spending from this asset if required (higher is spent first)" - Major Expenses - allow adding major expenses with [+ Add] button - when adding expense have a checkbox for "Loan / Installments" - when this is checked, take data for % interest, start and end year and calculate the annual value from there - Savings Distribution - Let people distribute their savings among different assets - Add multiple distribution ranges using [+Add] button, make sure valid ranges exist for the ENTIRE duration of start to end year - For any distribution range, give sliders to distribute saving among all active assets that year (that have isForSavings=true) - Sum of those sliders is constrainted to be 100 After taking input from the user, here is how the calculations should be done. - For the year eg: 2021 - For every income stream - increase the 2020 value by % growth - if the endYear has come then turn down income to 0 - For every expense stream - increase the 2020 value by % inflation - if endYear has come, then turn expense down to 0 - if new expense stream starts this year, start with initial value - major expenses are just a one-time expense if they are not in installments - if they are in installments, they are just like another expense stream, - but they have constant value per year, no % inflation - For assets - first calculate if total income > total expense or not - if income > expense; then savings = income - expense - split savings as per that year's savingsDistribution and add to savings - also grow savings be the % growth of that savings - thus; asset[2021] = asset[2020] + asset[2020] x growth + savings x distribution share of this asset - if income < expense; then burn = expense - income - go through the assets in decreasing order of their spendPriority and reduce them by the burn - if all assets are zeroed out and still that year's burn is not accounted for, then throw a calculation error - The chart at the end of the website should live-update, as inputs are added by user. There should be a "Refresh" button to force the calculations too. There should be an "Export CSV" button to export the chart data in CSV format. The chart should use the following ways to display. - Incomes: stacked bars, +ve (above 0) - Expenses: stacked bars, -ve (below 0) - Assets: stacked area - Major Expenses (if without installedment): scatter dot - major expenses which are installments should be stacked with other expense streams in the bars