How dhanunjaya23-02-2006/expense-track works
TrackExpense is a browser-based expense tracker. A user enters or edits an expense in the form; the app keeps expense state in Home, saves changes to browser local storage, and displays expenses in a table with category filtering, amount sorting, totals, and a context menu for editing or deleting. The graph distinguishes app entry and page composition from form and table behavior. Source excerpts show the main component relationships and local-storage access; no README description or external service integration was provided.
Main entry points: Home.jsx Expense page · AddForm.jsx Expense form · ExpenseTable.jsx Expense table · App.jsx App shell
Components 10
App composition
- React entry
src/main.jsx - App shell
src/App.jsx - Expense page
src/components/Home.jsx - Title header
src/components/Header.jsx
Expense management
- Expense form
src/components/AddForm.jsx - Expense table
src/components/ExpenseTable.jsx - Context menu
src/components/ContextMenu.jsx
Form controls
- Input control
src/components/InputControl.jsx
Other components
- User
- Local storage
Connections 12
- React entry → App shell: renders
src/main.jsx - App shell → Expense page: renders
src/App.jsx - Expense page → Title header: renders
src/components/Home.jsx - Expense page → Expense form: renders
src/components/Home.jsx - Expense page → Expense table: renders
src/components/Home.jsx - Expense page → Local storage: loads expenses
src/components/Home.jsx - Expense form → Local storage: saves expenses
src/components/AddForm.jsx - Expense form → Input control: renders
src/components/AddForm.jsx - Expense table → Context menu: renders
src/components/ExpenseTable.jsx - User → Expense form: enters expenses
src/components/AddForm.jsx - User → Expense table: filters and sorts
src/components/ExpenseTable.jsx - User → Context menu: edits or deletes
src/components/ContextMenu.jsx