How yashaswinimullalli/banking-system works
UNIQUE Bank is a React frontend demo, not a real banking service: signup and login are client-side, and account activity uses fictional data with browser-local persistence. The user journey runs from signup/login into a routed dashboard, then branches into account management, banking services, plans, and lifestyle offers. Dashboard and domain views consume shared banking state; the sampled context persists selected values in localStorage. The graph reflects documented capabilities and indexed imports, but unsampled modules and their internal calls are not verified.
Main entry points: BankingContext.jsx Banking state · DashboardPage.jsx Dashboard page · App.jsx Route application · Header.jsx Navigation header
Components 21
Entry and identity
- Route application
src/App.jsx - Signup and login
src/pages/SignupPage.jsx - Signup form
src/components/signup/SignupForm.jsx - Login form
src/components/login/LoginForm.jsx
Dashboard experience
- Dashboard page
src/pages/DashboardPage.jsx - Navigation header
src/components/dashboard/Header.jsx - Dashboard navigation
src/components/dashboard/Sidebar.jsx - Dashboard widgets
src/components/dashboard - Transaction history
src/components/dashboard/RecentTransactions.jsx
Banking features
- Account management
src/pages/AccountPage.jsx - Payment methods
src/components/dashboard/PaymentMethods.jsx - PIN verification
src/components/common/PinVerificationModal.jsx - UPI dialogs
src/components/common/UpiModals.jsx - Banking services
src/components/dashboard/ServiceViews.jsx - Plans and tiers
src/pages/PlansPage.jsx - Lifestyle offers
src/pages/LifestylePage.jsx
Demo state and data
- Banking state
src/context/BankingContext.jsx - Fictional banking data
src/data/mockData.js - User name helpers
src/utils/user.js
Other components
- Bank customer
- Browser local storage
Connections 34
- Bank customer → Route application: opens app
README.md - Route application → Signup and login: routes to
src/App.jsx - Route application → Dashboard page: routes to
src/App.jsx - Route application → Account management: routes to
src/App.jsx - Route application → Plans and tiers: routes to
src/App.jsx - Route application → Lifestyle offers: routes to
src/App.jsx - Route application → Banking state: provides state
src/App.jsx - Signup and login → Signup form: renders
src/pages/SignupPage.jsx - Signup and login → Login form: renders
src/pages/SignupPage.jsx - Signup form → Dashboard page: navigates after signup
README.md - Signup form → Bank customer: validates locally
README.md - Login form → Bank customer: accepts login input
src/components/login/LoginForm.jsx - Dashboard page → Navigation header: renders
src/pages/DashboardPage.jsx - Dashboard page → Dashboard navigation: renders
src/pages/DashboardPage.jsx - Dashboard page → Dashboard widgets: renders
src/pages/DashboardPage.jsx - Dashboard page → Transaction history: renders
src/pages/DashboardPage.jsx - Dashboard page → Banking state: reads state
src/pages/DashboardPage.jsx - Navigation header → User name helpers: formats user
src/components/dashboard/Header.jsx - Navigation header → Banking state: reads state
src/components/dashboard/Header.jsx - Account management → Navigation header: renders
src/pages/AccountPage.jsx - Account management → Banking state: reads and updates
src/pages/AccountPage.jsx - Account management → UPI dialogs: opens dialogs
src/pages/AccountPage.jsx - Payment methods → PIN verification: opens verification
src/components/dashboard/PaymentMethods.jsx - Payment methods → UPI dialogs: opens dialogs
src/components/dashboard/PaymentMethods.jsx - PIN verification → Banking state: reads PIN
src/components/common/PinVerificationModal.jsx - Banking services → Banking state: uses banking state
src/components/dashboard/ServiceViews.jsx - Banking services → PIN verification: uses verification
src/components/dashboard/ServiceViews.jsx - Dashboard page → Banking services: renders service views
src/pages/DashboardPage.jsx - Plans and tiers → Navigation header: renders
src/pages/PlansPage.jsx - Plans and tiers → Banking state: records activity
src/pages/PlansPage.jsx - Lifestyle offers → Navigation header: renders
src/pages/LifestylePage.jsx - Lifestyle offers → Banking state: records activity
src/pages/LifestylePage.jsx - Banking state → Fictional banking data: loads defaults
src/context/BankingContext.jsx - Banking state → Browser local storage: persists state
src/context/BankingContext.jsx