santhoshk0409/budjet-buddy

Purpose and Entry Points

Wallet Buddy is a mobile-first personal finance tracker with multi-wallet budgets, expenses, history, analytics, reports, backup/restore, offline storage, and Supabase-backed synchronization. The Vite/React client starts at src/main.tsx, mounts the application in src/App.tsx, and is hosted as a static SPA with deployment routing in vercel.json, netlify.toml, and public/_redirects.

Application Shell and Navigation

src/App.tsx is the primary UI orchestrator: it selects authenticated versus onboarding/auth states and switches among major finance views. src/components/layout/BottomNavigation.tsx provides the mobile-oriented navigation boundary for Home, History, Analytics, Reports, and Settings. Shared visual styling is rooted in src/index.css and src/App.css.

Authentication and User Scope

src/context/AuthContext.tsx owns the authenticated-user/session state exposed to the React tree. Authentication screens are separated into src/components/auth/LoginView.tsx, src/components/auth/SignUpView.tsx, and src/components/auth/SplashScreen.tsx. Supabase Auth is the external identity provider; finance data operations should be scoped by the active authenticated user.

Persistence, Offline-First, and Sync Boundary

src/db/database.ts defines the Dexie/IndexedDB local persistence layer, enabling immediate offline reads and writes. src/lib/supabase.ts initializes the Supabase client from Vite environment variables, while src/services/supabaseService.ts centralizes cloud CRUD/synchronization behavior. The Supabase PostgreSQL schema and likely row/security contract are captured in supabase_schema.sql; this is the principal boundary between local app state and the hosted backend.

Finance Domain and Data Flow

Shared domain contracts for wallets, expenses, categories, budgets, and related records live in src/types/index.ts. User actions flow from modal editors—src/components/wallet/WalletModal.tsx, src/components/expense/AddExpenseModal.tsx, and src/components/category/ExpenseTypeModal.tsx—to local storage and cloud service operations. Budget-period rollover is explicitly handled by src/components/budget/NewMonthResetModal.tsx.

Views, Analysis, and Reporting

src/views/HomeView.tsx presents the primary budget/wallet status and spending experience. Historical querying is handled by src/views/HistoryView.tsx, aided by src/components/common/CalendarDateSelector.tsx for single-date and range selection. Derived spending analysis is surfaced through src/views/AnalyticsView.tsx and src/views/ReportsView.tsx; src/views/SettingsView.tsx is the likely control point for preferences and data export/import.

Runtime and Infrastructure

The frontend is React 19 + TypeScript built and served by Vite (vite.config.ts, package.json). Browser IndexedDB is the local runtime datastore; Supabase supplies Auth, PostgreSQL, and real-time/cloud synchronization. Production deployment supports Vercel and Netlify, with VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY required for backend connectivity.