udaychand348/expense-tracker-frontend

How udaychand348/expense-tracker-frontend works

This is a React expense-tracking application with signup, OTP verification, login, profile/logout, and expense entry, listing, editing, and deletion. The active entry point mounts App4, which references the main app and its context provider; the main app routes users to the screens. Auth and expense screens make direct HTTP requests to a backend at localhost:8079. A separate Redux counter example is present but appears unmounted. Some connections are omitted where only unsampled modules could establish their behavior.

Main entry points: App.js Router and Navigation · Mycontext.js Session Context · DisplayExpenses.js Expense List · UpdateExpense.js Edit Expense

Components 20

App Shell

React Entry src/index.js
App Wrapper src/App4.js
Router and Navigation src/App.js
Session Context src/context/Mycontext.js

Account Access

Signup src/components/Signup.js
OTP Verification src/components/Otpvalidate.js
Login src/components/Login.js
Logout src/components/Logout.js
Home Screen src/components/Home.js
Profile src/components/Profile.js

Expense Tracking

Add Expense src/expcomponents/Adddata.js
Expense List src/expcomponents/DisplayExpenses.js
Edit Expense src/expcomponents/UpdateExpense.js

Redux Example

Counter UI src/ReactReudx/App2.js
Counter Actions src/ReactReudx/Action.js
Redux Store src/ReactReudx/Store.js
Counter Reducer src/ReactReudx/Reducer.js

Other components

User
Browser Storage
Expense API

Connections 31

User → React Entry: opens app src/index.js
React Entry → App Wrapper: mounts src/index.js
App Wrapper → Router and Navigation: uses src/App4.js
App Wrapper → Session Context: provides state src/App4.js
Router and Navigation → Signup: routes to src/App.js
Router and Navigation → OTP Verification: routes to src/App.js
Router and Navigation → Login: routes to src/App.js
Router and Navigation → Logout: routes to src/App.js
Router and Navigation → Home Screen: routes to src/App.js
Router and Navigation → Profile: routes to src/App.js
Router and Navigation → Add Expense: routes to src/App.js
Router and Navigation → Expense List: routes to src/App.js
Router and Navigation → Edit Expense: routes to src/App.js
Router and Navigation → Session Context: reads session src/App.js
Session Context → Browser Storage: persists session src/context/Mycontext.js
Signup → Session Context: sets email src/components/Signup.js
Signup → Expense API: registers user src/components/Signup.js
OTP Verification → Session Context: reads email src/components/Otpvalidate.js
OTP Verification → Expense API: sends and verifies src/components/Otpvalidate.js
Login → Expense API: authenticates src/components/Login.js
Login → Session Context: sets session src/App.js
Logout → Session Context: clears session
Add Expense → Session Context: reads token src/expcomponents/Adddata.js
Add Expense → Expense API: creates expense src/expcomponents/Adddata.js
Expense List → Session Context: reads token src/expcomponents/DisplayExpenses.js
Expense List → Expense API: lists and deletes src/expcomponents/DisplayExpenses.js
Expense List → Edit Expense: navigates to edit src/expcomponents/DisplayExpenses.js
Edit Expense → Session Context: reads token src/expcomponents/UpdateExpense.js
Edit Expense → Expense API: fetches and updates src/expcomponents/UpdateExpense.js
Counter UI → Counter Actions: dispatches actions src/ReactReudx/App2.js
Redux Store → Counter Reducer: configures reducer src/ReactReudx/Store.js

Drawn by GitDiagram on November 13, 2026 from the repository's file tree, README and source files. Read as Markdown ·