How sandip-1-1/reactjs_final_project works
Pennywise is a personal expense tracker: users register or sign in, then manage income and expense records and review spending. The React app keeps a session and theme in browser storage, while its data hook loads and updates transactions and categories through an authenticated API; the backend scopes records to the authenticated user. The README also documents filtering, sorting, budgets, and insights. Backend route wiring and several UI interactions are not shown in the sampled source, so those connections are kept conservative.
Main entry points: Dashboard.jsx Expense dashboard · App.jsx App session routing · useExpenseData.js Expense data hook · AuthPage.jsx Sign in / register
Components 19
React application
- App session routing
Expense_Tracker_frontend/src/App.jsx - Sign in / register
Expense_Tracker_frontend/src/components/AuthPage.jsx - Expense dashboard
Expense_Tracker_frontend/src/components/Dashboard.jsx - Transaction entry
Expense_Tracker_frontend/src/components/TransactionForm.jsx - Transaction list
Expense_Tracker_frontend/src/components/TransactionList.jsx - Monthly insights
Expense_Tracker_frontend/src/components/MonthlySummary.jsx - Spending chart
Expense_Tracker_frontend/src/components/SpendingChart.jsx - Budget display
Expense_Tracker_frontend/src/components/BudgetCard.jsx - Expense data hook
Expense_Tracker_frontend/src/hooks/useExpenseData.js
API access
- HTTP API client
Expense_Tracker_frontend/src/services/api.js
Django API
- Django API routes
Expense_Tracker_backend/config/urls.py - Expense routes
Expense_Tracker_backend/expenses/urls.py - Authentication views
Expense_Tracker_backend/expenses/views.py - Expense and category API
Expense_Tracker_backend/expenses/viewsets.py - Data serializers
Expense_Tracker_backend/expenses/serializers.py - Expense data models
Expense_Tracker_backend/expenses/models.py
Persistence
- Browser local storage
Expense_Tracker_frontend/src/hooks/useLocalStorage.js - SQLite database
Expense_Tracker_backend/config/settings.py
Other components
- Tracker user
Connections 23
- Tracker user → App session routing: uses
- App session routing → Sign in / register: renders unauthenticated
- Sign in / register → App session routing: returns session
- App session routing → Expense dashboard: renders authenticated
- App session routing → Browser local storage: stores theme and session
- Expense dashboard → Expense data hook: loads expense data
- Transaction entry → Expense data hook: adds transactions
- Transaction list → Expense data hook: deletes transactions
- Expense data hook → Browser local storage: caches transactions
- Sign in / register → HTTP API client: requests authentication
- Expense data hook → HTTP API client: requests data
- HTTP API client → Django API routes: HTTP requests
- Django API routes → Expense routes: dispatches routes
- Expense routes → Authentication views: routes authentication
- Expense routes → Expense and category API: routes resources
- Expense and category API → Data serializers: serializes records
- Expense and category API → Expense data models: queries and saves
- Expense data models → SQLite database: persists records
- Expense dashboard → Transaction entry: presents entry
- Expense dashboard → Transaction list: presents records
- Expense dashboard → Monthly insights: presents summaries
- Expense dashboard → Spending chart: presents spending
- Expense dashboard → Budget display: presents budgets