How bogdannakai/fintrack works
FinTrack is a browser-based personal-finance tracker. Its user journey is sign-up or login, access-controlled navigation, then reviewing finance pages for transactions, budgets, goals, reports, and profile information. The README describes localStorage-backed accounts, demo tables and charts, and a transactions Redux store; it also marks full CRUD and several data controls as in development. The graph shows route and storage calls evidenced in sampled source; feature-page internals are represented from the tree and README, without assuming their wiring.
Main entry points: Routes.tsx Route config · ProtectedRoutes.tsx Route guard · App.tsx App · LoginPage.tsx Login page
Components 24
App and navigation
- App
src/App.tsx - Route config
src/routes/Routes.tsx - Route guard
src/routes/ProtectedRoutes.tsx
Accounts and persistence
- Login page
src/pages/auth/LoginPage.tsx - Sign-up page
src/pages/auth/SignUpPage.tsx - Account forms
src/features/auth/components - Local storage
src/services/localStorage.ts - Storage keys
src/services/storageKeys.ts
Finance features
- Dashboard
src/pages/Dashboard/DashboardPage.tsx - Transactions
src/pages/Transactions/TransactionsPage.tsx - Transaction views
src/features/transactions/component - Budgets
src/pages/Budget/BudgetPage.tsx - Budget views
src/features/budget/components - Financial goals
src/pages/Goals/GoalsPage.tsx - Goal views
src/features/goals/components - Reports
src/pages/Reports/ReportsPage.tsx - Profile
src/pages/Profile/ProfilePage.tsx - Dashboard views
src/features/dashboard/components
Client state
- Redux store
src/app/store.ts - Transaction slice
src/features/transactions/transactionsSlice.ts
Shared interface
- Charts
src/components/charts - Modal context
src/context/ModalContex.tsx - Shared forms
src/components/Form
Other components
- User
Connections 18
- User → App: uses
- App → Route config: renders
- Route config → Login page: routes to
- Route config → Sign-up page: routes to
- Route config → Route guard: guards routes
- Route guard → Local storage: reads account
- Route guard → Storage keys: uses keys
- Route config → Dashboard: routes to
- Route config → Transactions: routes to
- Route config → Budgets: routes to
- Route config → Financial goals: routes to
- Route config → Reports: routes to
- Route config → Profile: routes to
- Login page → Account forms: uses forms
- Sign-up page → Account forms: uses forms
- Transactions → Redux store: state access
- Redux store → Transaction slice: registers reducer
- Dashboard views → Charts: renders charts