How datle04/fintrack-frontend works
FinTrack is a React frontend for personal finance management. Users enter through login, then manage transactions, budgets, savings goals, dashboard summaries, and financial statistics; the README also documents alerts, AI advice, and PDF reports. Admins have a separate dashboard and management area. The sampled code confirms route composition, transaction-page dispatches, transaction-form actions, and authentication API calls. Other feature wiring is inferred only at the subsystem level from the README and file tree; backend and AI services are external.
Main entry points: App.jsx App routes · TransactionPage.jsx Transactions · authSlice.js Auth state · transactionSlice.js Transaction state
Components 21
Application shell
- App routes
src/App.jsx - Login
src/pages/LoginPage.jsx
Personal finance
- Dashboard
src/pages/DashboardPage.jsx - Transactions
src/pages/TransactionPage.jsx - Transaction form
src/components/TransactionModal.jsx - Budgets
src/pages/BudgetPage.jsx - Savings goals
src/pages/GoalPage.jsx - Statistics
src/pages/StatPage.jsx - User settings
src/pages/SettingPage.jsx
Administration
- Admin dashboard
src/pages/admin/AdminDashboard.jsx - Admin management
src/pages/admin/AdminUser.jsx
Services and reporting
- PDF reports
src/pages/ReportExport.jsx - AI advisor
src/components/Chat/ChatWidget.jsx - Alerts
src/features/notificationSlice.js
Client state
- Auth state
src/features/authSlice.js - Transaction state
src/features/transactionSlice.js - Axios client
src/api/axiosInstance.js - Redux store
src/store.js
Other components
- User
- Backend API
- Chatbot service
Connections 24
- User → App routes: opens
- App routes → Login: routes
- App routes → Dashboard: routes
- App routes → Transactions: routes
- App routes → Budgets: routes
- App routes → Savings goals: routes
- App routes → Statistics: routes
- App routes → User settings: routes
- App routes → PDF reports: routes
- App routes → AI advisor: renders
- App routes → Admin dashboard: routes
- App routes → Admin management: routes
- Transactions → Transaction state: dispatches
- Transactions → Transaction form: opens
- Transaction form → Transaction state: dispatches
- Login → Auth state: dispatches
- Auth state → Axios client: calls
- Axios client → Backend API: requests
- AI advisor → Chatbot service: advises
- Admin dashboard → Backend API: loads data
- Admin management → Backend API: manages records
- Alerts → User: notifies
- Redux store → Auth state: stores state
- Redux store → Transaction state: stores state