Fin Tracker
Finance planner app to track and calculate finance info from expenses, banking, investments, savings, insurance and get advice from AI features. Developed with MERN, Firebase, Go, GraphQL, Redis, Postgresql, and ML based APIs.
financeplanner.io
Finance planner app to track and calculate finance info from expenses, banking, investments, savings, insurance and get advice from AI features. Developed with MERN, Firebase, Go, GraphQL, Redis, Postgresql, and ML based APIs.
The structure of the codebase is as follows:
└── 📁fin-tracker
└── 📁public
└── android-chrome-192x192.png
└── android-chrome-512x512.png
└── apple-touch-icon.png
└── favicon-16x16.png
└── favicon-32x32.png
└── favicon.ico
└── index.html
└── logo192.png
└── logo512.png
└── manifest.json
└── robots.txt
└── site.webmanifest
└── 📁src
└── 📁assets
└── blog-featured-what-is-chatbot.svg
└── close-button.svg
└── sunset-1373171_1280.jpg
└── 📁components
└── 📁shared
└── 📁about-links
└── about-links.component.tsx
└── about-links.styles.scss
└── 📁button
└── button.component.tsx
└── button.styles.scss
└── button.styles.tsx
└── 📁chatbot
└── 📁chatbot-response
└── chatbot-response.component.tsx
└── chatbot-response.styles.scss
└── chatbot-response.styles.tsx
└── 📁drop-button
└── drop-button.styles.tsx
└── 📁form-input
└── form-input.component.tsx
└── form-input.styles.scss
└── form-input.styles.tsx
└── 📁market-view
└── 📁market-data-graph
└── market-data-graph.component.tsx
└── market-data-graph.styles.scss
└── market-data-graph.styles.tsx
└── 📁market-data-search
└── market-data-search.component.tsx
└── market-data-search.styles.scss
└── market-data-search.styles.tsx
└── 📁mui
└── 📁accordion
└── accordion.component.tsx
└── accordion.styles.scss
└── 📁card
└── card.component.tsx
└── card.styles.scss
└── 📁drawer
└── drawer.component.tsx
└── drawer.styles.scss
└── 📁floating-action-button
└── floating-action-button.component.tsx
└── floating-action-button.styles.scss
└── 📁hidden-drawer
└── hidden-drawer.component.tsx
└── hidden-drawer.styles.scss
└── 📁media-card
└── media-card.component.tsx
└── media-card.styles.jsx
└── 📁paper
└── paper.component.tsx
└── paper.styles.scss
└── 📁responsive-drawer
└── responsive-drawer.component.tsx
└── responsive-drawer.styles.scss
└── 📁tabs
└── tabs.component.tsx
└── tabs.styles.scss
└── 📁savings-goal-calculator
└── 📁savings-goal-calculator-result
└── savings-goal-graph.component.tsx
└── savings-goal-graph.styles.scss
└── savings-goal-graph.styles.tsx
└── savings-goal-result.component.tsx
└── savings-goal-result.styles.scss
└── savings-goal-result.styles.tsx
└── savings-goal-table.component.tsx
└── savings-goal-table.styles.scss
└── savings-goal-table.styles.tsx
└── savings-goal-calculator.component.tsx
└── savings-goal-calculator.styles.scss
└── savings-goal-calculator.styles.tsx
└── 📁useful-tools
└── 📁currency-converter
└── currency-converter-result.component.tsx
└── currency-converter-result.styles.scss
└── currency-converter-result.styles.tsx
└── currency-converter.component.tsx
└── currency-converter.styles.scss
└── currency-converter.styles.tsx
└── 📁exchange-rate
└── exchange-rate-result.component.tsx
└── exchange-rate-result.styles.scss
└── exchange-rate-result.styles.tsx
└── exchange-rate.component.tsx
└── exchange-rate.styles.scss
└── exchange-rate.styles.tsx
└── 📁mortgage-calculator
└── mortgage-calculator-result.component.tsx
└── mortgage-calculator-result.styles.scss
└── mortgage-calculator-result.styles.tsx
└── mortgage-calculator.component.tsx
└── mortgage-calculator.styles.scss
└── mortgage-calculator.styles.tsx
└── 📁signed-in
└── 📁banking
└── 📁action-list
└── action-list.component.jsx
└── action-list.styles.jsx
└── action-list.styles.scss
└── 📁all-banking-summary
└── all-banking-summary.component.jsx
└── all-banking-summary.styles.jsx
└── all-banking-summary.styles.scss
└── 📁bank-account-form
└── bank-account-form.component.jsx
└── bank-account-form.styles.jsx
└── bank-account-form.styles.scss
└── 📁bank-accounts
└── bank-accounts.component.jsx
└── bank-accounts.styles.jsx
└── bank-accounts.styles.scss
└── 📁close-account
└── close-account.component.jsx
└── close-account.styles.jsx
└── close-account.styless.scss
└── 📁create-account
└── create-account.component.jsx
└── create-account.styles.jsx
└── create-account.styles.scss
└── 📁deposit
└── deposit.component.jsx
└── deposit.styles.jsx
└── deposit.styles.scss
└── 📁summary
└── summary.component.jsx
└── summary.styles.jsx
└── summary.styles.scss
└── 📁summary-graph
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── summary-graph.styles.scss
└── 📁transaction
└── transaction.component.jsx
└── transaction.styles.jsx
└── transaction.styles.scss
└── 📁transactions
└── transactions.component.jsx
└── transactions.styles.jsx
└── transactions.styles.scss
└── 📁transfer-money
└── transfer-money.component.jsx
└── transfer-money.styles.jsx
└── transfer-money.styles.scss
└── 📁withdraw
└── withdraw.component.jsx
└── withdraw.styles.jsx
└── withdraw.styles.scss
└── 📁expenses
└── 📁add-expense
└── add-expense.component.jsx
└── add-expense.styles.scss
└── 📁delete-expense
└── delete-expense.component.jsx
└── delete-expense.styles.scss
└── 📁expenses-filter
└── expense-filter.component.jsx
└── expense-filter.styles.jsx
└── expense-filter.styles.scss
└── 📁expenses-filter-info
└── expenses-filter-info.component.jsx
└── expenses-filter-info.styles.jsx
└── 📁expenses-form
└── expenses-form.component.jsx
└── expenses-form.styles.jsx
└── expenses-form.styles.scss
└── 📁expenses-graph
└── expenses-graph.component.jsx
└── expenses-graph.styles.jsx
└── expenses-graph.styles.scss
└── 📁expenses-summary
└── expenses-summary.component.jsx
└── expenses-summary.styles.jsx
└── expenses-summary.styles.scss
└── 📁expenses-table
└── expenses-table.component.jsx
└── expenses-table.styles.jsx
└── expenses-table.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── 📁exports
└── 📁email-export
└── email-export.component.jsx
└── email-export.styles.scss
└── email-icon.png
└── 📁export-box
└── export-box.component.jsx
└── export-box.styles.scss
└── 📁pdf-export
└── pdf-export.component.jsx
└── pdf-export.styles.scss
└── pdf-icon.png
└── 📁txt-export
└── txt-export.component.jsx
└── txt-export.styles.scss
└── txt-icon.png
└── 📁finance-tracker-item
└── finance-tracker-item.component.jsx
└── finance-tracker-item.styles.scss
└── 📁finance-tracker-item-info
└── finance-tracker-item-info.component.jsx
└── finance-tracker-item-info.styles.scss
└── 📁finance-tracker-item-summary
└── finance-tracker-item-summary.component.jsx
└── finance-tracker-item-summary.styles.scss
└── 📁finance-tracker-items
└── finance-tracker-items.component.jsx
└── finance-tracker-items.styles.scss
└── 📁form-view
└── form-view.component.jsx
└── form-view.styles.scss
└── 📁insurance
└── 📁add-insurance-form
└── add-insurance-form.component.jsx
└── add-insurance-form.styles.jsx
└── add-insurance-form.styles.scss
└── 📁filter-insurance-form
└── filter-insurance-form.component.jsx
└── filter-insurance-form.styles.jsx
└── filter-insurance-form.styles.scss
└── 📁insurance-filter-info
└── insurance-filter-info.component.jsx
└── insurance-filter-info.styles.jsx
└── 📁insurance-pie-chart
└── insurance-pie-chart.component.jsx
└── insurance-pie-chart.styles.jsx
└── insurance-pie-chart.styles.scss
└── 📁insurance-summary
└── insurance-summary.component.jsx
└── insurance-summary.styles.jsx
└── insurance-summary.styles.scss
└── 📁insurance-table
└── insurance-table.component.jsx
└── insurance-table.styles.jsx
└── insurance-table.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── 📁investment-savings-tracker-item
└── investment-savings-tracker-item.component.jsx
└── investment-savings-tracker-item.styles.scss
└── 📁investment-savings-tracker-items
└── investment-savings-tracker-items.component.jsx
└── investment-savings-tracker-items.styles.scss
└── 📁investments
└── 📁all-investments-summary
└── all-investments-summary.component.jsx
└── all-investments-summary.styles.jsx
└── all-investments-summary.styles.scss
└── 📁create-investment-form
└── create-investment-form.component.jsx
└── create-investment-form.styles.jsx
└── create-investment-form.styles.scss
└── 📁investment-form
└── investment-form.component.jsx
└── investment-form.styles.scss
└── 📁investment-info
└── investment-info.component.jsx
└── investment-info.styles.jsx
└── investment-info.styles.scss
└── 📁investments
└── investments.component.jsx
└── investments.styles.jsx
└── 📁summary
└── summary.component.jsx
└── summary.styles.jsx
└── summary.styles.scss
└── 📁summary-graph
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── summary-graph.styles.scss
└── 📁summary-table-investments
└── summary-table-investments.component.jsx
└── summary-table-investments.styles.jsx
└── summary-table-investments.styles.scss
└── 📁update-investment-form
└── update-investment-form.component.jsx
└── update-investment-form.styles.jsx
└── update-investment-form.styles.scss
└── 📁savings
└── 📁account-info
└── account-info.component.jsx
└── account-info.styles.jsx
└── account-info.styles.scss
└── 📁all-savings-summary
└── all-savings-summary.component.jsx
└── all-savings-summary.styles.jsx
└── all-savings-summary.styles.scss
└── 📁create-account-form
└── create-account-form.component.jsx
└── create-account-form.styles.jsx
└── create-account-form.styles.scss
└── 📁savings
└── savings.component.jsx
└── savings.styles.jsx
└── 📁savings-account-form
└── savings-account-form.component.jsx
└── savings-account-form.styles.scss
└── 📁summary
└── summary.component.jsx
└── summary.styles.jsx
└── summary.styles.scss
└── 📁summary-graph
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── summary-graph.styles.scss
└── 📁summary-table-savings-account
└── summary-table-savings-account.component.jsx
└── summary-table-savings-account.styles.jsx
└── summary-table-savings-account.styles.scss
└── 📁update-account-form
└── update-account-form.component.jsx
└── update-account-form.styles.jsx
└── update-account-form.styles.scss
└── 📁summary
└── 📁banking
└── 📁summary-graph
└── finance-summary.component.jsx
└── finance-summary.styles.jsx
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── 📁summary-info
└── summary-info.component.jsx
└── summary-info.styles.jsx
└── banking-summary.component.jsx
└── banking-summary.styles.jsx
└── banking-summary.styles.scss
└── 📁banking copy
└── banking-summary.component.jsx
└── banking-summary.styles.scss
└── 📁expenses
└── 📁expenses-summary-graph
└── expenses-summary-graph.component.jsx
└── expenses-summary-graph.styles.jsx
└── expenses-summary-graph.styles.scss
└── 📁expenses-summary-info
└── expenses-summary-info.component.jsx
└── expenses-summary-info.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── expenses.component.jsx
└── expenses.styles.jsx
└── expenses.styles.scss
└── 📁insurance
└── 📁insurance-summary-graph
└── insurance-summary-graph.component.jsx
└── insurance-summary-graph.styles.jsx
└── insurance-summary-graph.styles.scss
└── 📁insurance-summary-info
└── insurance-summary-info.component.jsx
└── insurance-summary-info.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── insurance-summary.component.jsx
└── insurance-summary.styles.jsx
└── insurance-summary.styles.scss
└── 📁investments
└── 📁summary-graph
└── finance-summary.component.jsx
└── finance-summary.styles.jsx
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── 📁summary-info
└── summary-info.component.jsx
└── summary-info.styles.jsx
└── investments-summary.component.jsx
└── investments-summary.styles.jsx
└── investments-summary.styles.scss
└── 📁savings
└── 📁summary-graph
└── finance-summary.component.jsx
└── finance-summary.styles.jsx
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── 📁summary-info
└── summary-info.component.jsx
└── summary-info.styles.jsx
└── savings-summary.component.jsx
└── savings-summary.styles.jsx
└── savings-summary.styles.scss
└── 📁signed-out
└── 📁banking
└── 📁action-list
└── action-list.component.jsx
└── action-list.styles.jsx
└── action-list.styles.scss
└── 📁all-banking-summary
└── all-banking-summary.component.jsx
└── all-banking-summary.styles.jsx
└── all-banking-summary.styles.scss
└── 📁bank-account-form
└── bank-account-form.component.jsx
└── bank-account-form.styles.jsx
└── bank-account-form.styles.scss
└── 📁bank-accounts
└── bank-accounts.component.jsx
└── bank-accounts.styles.jsx
└── bank-accounts.styles.scss
└── 📁close-account
└── close-account.component.jsx
└── close-account.styles.jsx
└── close-account.styless.scss
└── 📁create-account
└── create-account.component.jsx
└── create-account.styles.jsx
└── create-account.styles.scss
└── 📁deposit
└── deposit.component.jsx
└── deposit.styles.jsx
└── deposit.styles.scss
└── 📁summary
└── summary.component.jsx
└── summary.styles.jsx
└── summary.styles.scss
└── 📁summary-graph
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── summary-graph.styles.scss
└── 📁transaction
└── transaction.component.jsx
└── transaction.styles.jsx
└── transaction.styles.scss
└── 📁transactions
└── transactions.component.jsx
└── transactions.styles.jsx
└── transactions.styles.scss
└── 📁transfer-money
└── transfer-money.component.jsx
└── transfer-money.styles.jsx
└── transfer-money.styles.scss
└── 📁withdraw
└── withdraw.component.jsx
└── withdraw.styles.jsx
└── withdraw.styles.scss
└── 📁expenses
└── 📁add-expense
└── add-expense.component.jsx
└── add-expense.styles.scss
└── 📁delete-expense
└── delete-expense.component.jsx
└── delete-expense.styles.scss
└── 📁expenses-filter
└── expense-filter.component.jsx
└── expense-filter.styles.jsx
└── expense-filter.styles.scss
└── 📁expenses-filter-info
└── expenses-filter-info.component.jsx
└── expenses-filter-info.styles.jsx
└── 📁expenses-form
└── expenses-form.component.jsx
└── expenses-form.styles.jsx
└── expenses-form.styles.scss
└── 📁expenses-graph
└── expenses-graph.component.jsx
└── expenses-graph.styles.jsx
└── expenses-graph.styles.scss
└── 📁expenses-summary
└── expenses-summary.component.jsx
└── expenses-summary.styles.jsx
└── expenses-summary.styles.scss
└── 📁expenses-table
└── expenses-table.component.jsx
└── expenses-table.styles.jsx
└── expenses-table.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── 📁finance-tracker-item
└── finance-tracker-item.component.jsx
└── finance-tracker-item.styles.scss
└── 📁finance-tracker-item-info
└── finance-tracker-item-info.component.jsx
└── finance-tracker-item-info.styles.scss
└── 📁finance-tracker-item-summary
└── finance-tracker-item-summary.component.jsx
└── finance-tracker-item-summary.styles.scss
└── 📁finance-tracker-items
└── finance-tracker-items.component.jsx
└── finance-tracker-items.styles.scss
└── 📁form-view
└── form-view.component.jsx
└── form-view.styles.scss
└── 📁insurance
└── 📁add-insurance-form
└── add-insurance-form.component.jsx
└── add-insurance-form.styles.jsx
└── add-insurance-form.styles.scss
└── 📁filter-insurance-form
└── filter-insurance-form.component.jsx
└── filter-insurance-form.styles.jsx
└── filter-insurance-form.styles.scss
└── 📁insurance-filter-info
└── insurance-filter-info.component.jsx
└── insurance-filter-info.styles.jsx
└── 📁insurance-pie-chart
└── insurance-pie-chart.component.jsx
└── insurance-pie-chart.styles.jsx
└── insurance-pie-chart.styles.scss
└── 📁insurance-summary
└── insurance-summary.component.jsx
└── insurance-summary.styles.jsx
└── insurance-summary.styles.scss
└── 📁insurance-table
└── insurance-table.component.jsx
└── insurance-table.styles.jsx
└── insurance-table.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── 📁investment-savings-tracker-item
└── investment-savings-tracker-item.component.jsx
└── investment-savings-tracker-item.styles.scss
└── 📁investment-savings-tracker-items
└── investment-savings-tracker-items.component.jsx
└── investment-savings-tracker-items.styles.scss
└── 📁investments
└── 📁all-investments-summary
└── all-investments-summary.component.jsx
└── all-investments-summary.styles.jsx
└── all-investments-summary.styles.scss
└── 📁create-investment-form
└── create-investment-form.component.jsx
└── create-investment-form.styles.jsx
└── create-investment-form.styles.scss
└── 📁investment-form
└── investment-form.component.jsx
└── investment-form.styles.scss
└── 📁investment-info
└── investment-info.component.jsx
└── investment-info.styles.jsx
└── investment-info.styles.scss
└── 📁investments
└── investments.component.jsx
└── investments.styles.jsx
└── 📁summary
└── summary.component.jsx
└── summary.styles.jsx
└── summary.styles.scss
└── 📁summary-graph
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── summary-graph.styles.scss
└── 📁summary-table-investments
└── summary-table-investments.component.jsx
└── summary-table-investments.styles.jsx
└── summary-table-investments.styles.scss
└── 📁update-investment-form
└── update-investment-form.component.jsx
└── update-investment-form.styles.jsx
└── update-investment-form.styles.scss
└── 📁savings
└── 📁account-info
└── account-info.component.jsx
└── account-info.styles.jsx
└── account-info.styles.scss
└── 📁all-savings-summary
└── all-savings-summary.component.jsx
└── all-savings-summary.styles.jsx
└── all-savings-summary.styles.scss
└── 📁create-account-form
└── create-account-form.component.jsx
└── create-account-form.styles.jsx
└── create-account-form.styles.scss
└── 📁savings
└── savings.component.jsx
└── savings.styles.jsx
└── 📁savings-account-form
└── savings-account-form.component.jsx
└── savings-account-form.styles.scss
└── 📁summary
└── summary.component.jsx
└── summary.styles.jsx
└── summary.styles.scss
└── 📁summary-graph
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── summary-graph.styles.scss
└── 📁summary-table-savings-account
└── summary-table-savings-account.component.jsx
└── summary-table-savings-account.styles.jsx
└── summary-table-savings-account.styles.scss
└── 📁update-account-form
└── update-account-form.component.jsx
└── update-account-form.styles.jsx
└── update-account-form.styles.scss
└── 📁sign-in-form
└── sign-in-form.component.jsx
└── sign-in-form.styles.jsx
└── sign-in-form.styles.scss
└── 📁sign-up-form
└── sign-up-form.component.jsx
└── sign-up-form.styles.jsx
└── sign-up-form.styles.scss
└── 📁summary
└── 📁banking
└── 📁summary-graph
└── finance-summary.component.jsx
└── finance-summary.styles.jsx
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── 📁summary-info
└── summary-info.component.jsx
└── summary-info.styles.jsx
└── banking-summary.component.jsx
└── banking-summary.styles.jsx
└── banking-summary.styles.scss
└── 📁expenses
└── 📁expenses-summary-graph
└── expenses-summary-graph.component.jsx
└── expenses-summary-graph.styles.jsx
└── expenses-summary-graph.styles.scss
└── 📁expenses-summary-info
└── expenses-summary-info.component.jsx
└── expenses-summary-info.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── expenses.component.jsx
└── expenses.styles.jsx
└── expenses.styles.scss
└── 📁insurance
└── 📁insurance-summary-graph
└── insurance-summary-graph.component.jsx
└── insurance-summary-graph.styles.jsx
└── insurance-summary-graph.styles.scss
└── 📁insurance-summary-info
└── insurance-summary-info.component.jsx
└── insurance-summary-info.styles.scss
└── 📁schedule
└── 📁schedule-calendar
└── schedule-calendar.component.jsx
└── schedule-calendar.styles.jsx
└── schedule-calendar.styles.scss
└── 📁schedule-day-info
└── schedule-day-info.component.jsx
└── schedule-day-info.styles.jsx
└── schedule-day-info.styles.scss
└── insurance-summary.component.jsx
└── insurance-summary.styles.jsx
└── insurance-summary.styles.scss
└── 📁investments
└── 📁summary-graph
└── finance-summary.component.jsx
└── finance-summary.styles.jsx
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── 📁summary-info
└── summary-info.component.jsx
└── summary-info.styles.jsx
└── investments-summary.component.jsx
└── investments-summary.styles.jsx
└── investments-summary.styles.scss
└── 📁savings
└── 📁summary-graph
└── finance-summary.component.jsx
└── finance-summary.styles.jsx
└── summary-graph.component.jsx
└── summary-graph.styles.jsx
└── 📁summary-info
└── summary-info.component.jsx
└── summary-info.styles.jsx
└── savings-summary.component.jsx
└── savings-summary.styles.jsx
└── savings-summary.styles.scss
└── 📁contexts
└── 📁shared
└── 📁chatbot
└── chatbot.context.tsx
└── chatbot.types.ts
└── 📁market-data
└── market-data.context.tsx
└── market-data.types.ts
└── 📁savings-goal-calculator
└── savings-goal-calculator.context.tsx
└── savings-goal-calculator.types.ts
└── 📁useful-tools
└── useful-tools.context.tsx
└── useful-tools.types.ts
└── 📁user
└── user.context.tsx
└── user.types.ts
└── 📁signed-in
└── 📁banking
└── banking.context.tsx
└── banking.types.ts
└── 📁dashboard
└── dashboard.context.tsx
└── dashboard.types.ts
└── 📁expenses
└── expenses.context.tsx
└── expenses.types.ts
└── 📁exports
└── exports.context.tsx
└── exports.types.ts
└── 📁insurance
└── insurance.context.tsx
└── insurance.types.ts
└── 📁investments
└── investments.context.tsx
└── investments.types.ts
└── 📁savings
└── savings.context.tsx
└── savings.types.ts
└── 📁signed-out
└── 📁banking
└── banking.context.tsx
└── banking.types.ts
└── 📁dashboard
└── dashboard.context.tsx
└── dashboard.types.ts
└── 📁expenses
└── expenses.context.tsx
└── expenses.types.ts
└── 📁insurance
└── insurance.context.tsx
└── insurance.types.ts
└── 📁investments
└── investments.context.tsx
└── investments.types.ts
└── 📁savings
└── savings.context.tsx
└── savings.types.ts
└── 📁pages
└── 📁shared
└── 📁chatbot
└── chatbot.component.tsx
└── chatbot.styles.scss
└── chatbot.styles.tsx
└── 📁home
└── home.component.tsx
└── home.styles.scss
└── home.styles.tsx
└── 📁market-view
└── market-view.component.tsx
└── market-view.styles.scss
└── market-view.styles.tsx
└── 📁useful-tools
└── useful-tools.component.tsx
└── useful-tools.styles.scss
└── useful-tools.styles.tsx
└── 📁signed-in
└── 📁banking
└── banking.component.tsx
└── banking.styles.scss
└── banking.styles.tsx
└── 📁dashboard
└── summary.component.tsx
└── summary.styles.scss
└── summary.styles.tsx
└── 📁expenses
└── expenses.component.tsx
└── expenses.styles.scss
└── expenses.styles.tsx
└── 📁exports
└── 📁insurance
└── insurance.component.tsx
└── insurance.styles.scss
└── insurance.styles.tsx
└── 📁investments
└── investments.component.tsx
└── investments.styles.scss
└── investments.styles.tsx
└── 📁savings
└── savings.component.tsx
└── savings.styles.scss
└── savings.styles.tsx
└── 📁signed-out
└── 📁banking
└── banking.component.tsx
└── banking.styles.scss
└── banking.styles.tsx
└── 📁dashboard
└── summary.component.tsx
└── summary.styles.scss
└── summary.styles.tsx
└── 📁expenses
└── expenses.component.tsx
└── expenses.styles.scss
└── expenses.styles.tsx
└── 📁insurance
└── insurance.component.tsx
└── insurance.styles.scss
└── insurance.styles.tsx
└── 📁investments
└── investments.component.tsx
└── investments.styles.scss
└── investments.styles.tsx
└── 📁savings
└── savings.component.tsx
└── savings.styles.scss
└── savings.styles.tsx
└── 📁routes
└── 📁shared
└── 📁home
└── home.component.tsx
└── home.styles.scss
└── 📁navigation
└── navigation.component.tsx
└── navigation.styles.scss
└── navigation.styles.tsx
└── 📁useful-tools
└── useful-tools.component.tsx
└── useful-tools.styles.scss
└── 📁signed-in
└── 📁banking
└── banking.component.tsx
└── banking.styles.scss
└── 📁dashboard
└── dashboard.component.tsx
└── dashboard.styles.scss
└── 📁expenses
└── expenses.component.tsx
└── expenses.styles.scss
└── 📁exports
└── exports.component.tsx
└── exports.styles.scss
└── 📁insurance
└── insurance.component.tsx
└── insurance.styles.scss
└── 📁investments
└── investments.components.tsx
└── investments.styles.scss
└── 📁savings
└── savings.components.tsx
└── savings.styles.scss
└── 📁signed-out
└── 📁authentication
└── authentication.component.tsx
└── authentication.styles.scss
└── 📁banking
└── banking.component.tsx
└── banking.styles.scss
└── 📁dashboard
└── dashboard.component.tsx
└── dashboard.styles.scss
└── 📁expenses
└── expenses.component.tsx
└── expenses.styles.scss
└── 📁insurance
└── insurance.component.tsx
└── insurance.styles.scss
└── 📁investments
└── investments.components.tsx
└── investments.styles.scss
└── 📁savings
└── savings.components.tsx
└── savings.styles.scss
└── 📁store
└── 📁middleware
└── logger.ts
└── 📁shared
└── 📁chatbot
└── 📁market-data
└── 📁savings-goal-calculator
└── savings-goal-calculator.action.ts
└── savings-goal-calculator.reducer.toolkit.ts
└── savings-goal-calculator.reducer.ts
└── savings-goal-calculator.selector.ts
└── savings-goal-calculator.types.ts
└── 📁useful-tools
└── 📁user
└── user.action.ts
└── user.reducer.toolkit.ts
└── user.reducer.ts
└── user.saga.ts
└── user.selector.ts
└── user.types.ts
└── 📁signed-in
└── 📁banking
└── banking.action.ts
└── banking.reducer.ts
└── banking.saga.ts
└── banking.selector.ts
└── banking.types.ts
└── 📁dashboard
└── 📁expenses
└── 📁exports
└── 📁insurance
└── 📁investments
├── savings
└── 📁signed-out
└── 📁banking
└── banking.action.ts
└── banking.reducer.toolkit.ts
└── banking.reducer.ts
└── banking.selector.ts
└── banking.types.ts
└── 📁dashboard
└── dashboard.action.ts
└── dashboard.reducer.toolkit.ts
└── dashboard.reducer.ts
└── dashboard.selector.ts
└── dashboard.types.ts
└── 📁expenses
└── expenses.action.ts
└── expenses.reducer.toolkit.ts
└── expenses.reducer.ts
└── expenses.selector.ts
└── expenses.types.ts
└── 📁insurance
└── insurance.action.ts
└── insurance.reducer.ts
└── insurance.selector.ts
└── insurance.types.ts
└── 📁investments
└── investments.action.ts
└── investments.reducer.toolkit.ts
└── investments.reducer.ts
└── investments.selector.ts
└── investments.types.ts
└── 📁savings
└── savings.action.ts
└── savings.reducer.toolkit.ts
└── savings.reducer.ts
└── savings.selector.ts
└── savings.types.ts
└── root-reducer.toolkit.ts
└── root-reducer.ts
└── root-saga.ts
└── store.toolkit.ts
└── store.ts
└── 📁utils
└── 📁alerts
└── insurance.alerts.ts
└── 📁api-requests
└── banking.requests.ts
└── chatbot.requests.ts
└── expenses.requests.ts
└── exports.requests.ts
└── insurance.requests.ts
└── investments.requests.ts
└── market-data.requests.ts
└── savings.requests.ts
└── summary.requests.ts
└── useful-tools.requests.ts
└── 📁calculations
└── banking.calculations.ts
└── expenses.calculations.ts
└── investments-test.calculations.ts
└── investments.calculations.ts
└── savings.calculations.ts
└── useful-tools.calculations.ts
└── 📁constants
└── banking.constants.ts
└── chatbot.constants.ts
└── expenses.constants.ts
└── exports.constants.ts
└── insurance.constants.ts
└── investments.constants.ts
└── market-data.constants.ts
└── regex.constants.ts
└── savings.constants.ts
└── shared.constants.ts
└── useful-tools.constants.ts
└── 📁errors
└── banking.errors.ts
└── chatbot.errors.ts
└── expenses.error.ts
└── exports.errors.ts
└── insurance.errors.ts
└── investments.errors.ts
└── market-data.errors.ts
└── savings.errors.ts
└── summary.errors.ts
└── useful-tools.errors.ts
└── user.errors.ts
└── 📁firebase
└── firebase.utils.ts
└── 📁graphql
└── banking.graphql.ts
└── expenses.graphql.ts
└── insurance.graphql.ts
└── investments.graphql.ts
└── savings.graphql.ts
└── 📁helpers
└── helpers.utils.ts
└── 📁reducer
└── reducer.utils.ts
└── 📁validations
└── banking.validation.ts
└── chatbot.validation.ts
└── expenses.validation.ts
└── insurance.validation.ts
└── investments.validation.ts
└── market-data.validation.ts
└── savings.validation.ts
└── useful-tools.validation.ts
└── App.test.js
└── App.tsx
└── custom.d.ts
└── index.scss
└── index.tsx
└── logo.svg
└── reportWebVitals.js
└── setupTests.js
└── .dockerignore
└── .env
└── .gitignore
└── Dockerfile
└── package-lock.json
└── package.json
└── README.md
└── tsconfig.json
The application consists of the following main components:
- Client: React frontend web application which sends requests to the Finance Planner and Finance Predict APIs. The frontend is developed using JavaScript with a TypeScript shift currently in place. State is managed by Redux and the React context API. UI is developed using Material UI, styled components, Tailwind and Bootstrap. It is also deployed with Docker. The client supports requests for the following:
- Chatbot responses
- Expenses
- Banking
- Historic market data
- Finance prediction
- Investments
- Savings
- Insurance
- Miscellaneous financial tools
- Authentication
- Authentication: Authentication is handled using Firebase Authentication and Functions.
- Finance Planner API: API developed using Express and GraphQL, which services majority of requests from the client, excluding predictions. The API requests MongoDB clusters, Redis, Cloud Firestore, AWS RDS databases. Additionally, it requests the ml-job-scheduler to trigger a job to generate finance predictions. It also uses the OpenAI API, polygon.io and other external APIs.
- Finance Predict API: Finance prediction API developed using django and deployed to AWS EC2. API serves requests for finance prediction, market data queries and chatbot queries.
- Services: The following services are used:
- OpenAI: Services chatbot requests
- polygon.io: Provides market data for requests from the Finance Planner API
- External APIs: Includes APIs for financial calculations, tools, country specific financial data, etc.
- Databases: The following databases are used:
- MongoDB:
- Expenses
- Banking
- Finance prediction
- Investments
- Savings
- Insurance
- Redis:
- Cached data
- Cloud Firestore:
- Authentication
- AWS RDS:
- ML training data
- Machine learning: ML models for BTC and stock predictions developed using TensorFlow / PyTorch. ml-job-scheduler handles the automated job runs from preprocessing, training, predictions, postprocessing, etc. The logs of the job runs are stored in S3 and the data is stored in MongoDB.
- Data engineering: Performs manual data migration using an external ETL / ELT API developed in Go, etl-elt-api
- Security: AWS security services (AWS Inspector and GuardDuty) which monitors the security of APIs. Later, data and logs from the services are queried and viewed using an external security tool.
- Monitoring: Monitoring service which collects data and logs from APIs using CloudWatch, then stores them in S3 to be viewed as a dashboard via an external monitoring tool.
- Notifications: Receives various data and logs in S3 buckets and later sends emails (on issues or failures) using SQS and Lambda.
Setting up the development environment:
- Cloning the repository: You would first need to clone this repository on the host you want to set up your development environment:
git clone https://github.com/tahmid-saj/fin-tracker.git - Installing dependencies: Install the required NPM packages in package.json:
npm install - Environment variables: The required environment variables are used:
```env
firebase
REACT_APP_FIREBASE_API_KEY="" REACT_APP_FIREBASE_AUTH_DOMAIN="" REACT_APP_FIREBASE_PROJECT_ID="" REACT_APP_FIREBASE_STORAGE_BUCKET="" REACT_APP_FIREBASE_MESSAGING_SENTER_ID="" REACT_APP_FIREBASE_APP_ID=""
There are several other environment variables for the APIs and services used in the client
4. __APIs__: Client requests go to two APIs:
* __Finance Planner API__
* __Finance Predict API__
5. __Services__: API keys are used from the following services in the __Finance Planner API__:
* OpenAI: Services chatbot requests
* polygon.io: Provides market data for requests from the __Finance Planner API__
* External APIs: There are several other external APIs providing financial calculations, tools, country specific financial data, etc.
6. __Databases__: A MongoDB cluster and collections are created, and a connection is established with the __Finance Planner and Finance Predict APIs__. A Redis cluster is also created for storing cached data. Additionally Cloud Firestore and AWS RDS are both initialized for storing authentication and ML model training data respectively.
7. __Data engineering__: The set up for the development environment for the data engineering tool can be found [here](https://github.com/tahmid-saj/etl-elt-api).
8. __Machine learning__: The set up for the development environment for the ML job scheduler can be found [here](https://github.com/tahmid-saj/ml-job-scheduler).
9. __AWS__: Setting up the AWS services is an optional step as this is on a development environment. However, the same services could be used to create the tools mentioned in the high level view.
10. __Running the client__: The client can be run using:
npm start
