Cross-Platform Mobile Finance App · React Native & Firebase
Mobile Expense Tracker is a cross-platform personal finance application built with React Native (Expo) and TypeScript. It allows users to register, log in, and securely manage their income and expenses from a single unified codebase that runs natively on both Android and iOS. Firebase Authentication handles account management while Firebase Realtime Database stores and syncs transaction data across devices instantly.
The app is structured around a clean context-driven architecture. Authentication state and wallet data each live in their own context provider, keeping concerns well separated and making components easy to reason about. Custom hooks encapsulate all Firebase interactions so screens remain declarative and free of data-fetching logic.
This project demonstrates practical mobile development skills including real-time database integration, secure authentication flows, TypeScript typing across Firebase data models, and cross-platform UI consistency — reflecting a solid understanding of building production-quality mobile applications with modern tooling.
The ER diagram illustrates entities: Users and Transactions. Each user owns a collection of transaction records stored in Firebase Realtime Database.
The flow diagram illustrates the user authentication journey (register and login) and the transaction recording lifecycle including real-time wallet balance updates.
Solution: Used cleanup functions inside useEffect hooks to unsubscribe from Firebase listeners on component unmount, preventing memory leaks and stale UI updates when navigating between screens.
Solution: Separated state into AuthContext for Firebase authentication state and WalletContext for transaction and balance data, so each screen subscribes only to the data it actually needs.
Solution: Defined strict TypeScript interfaces for all data models (User, Transaction) and used type guards when reading snapshot values from the Realtime Database to ensure end-to-end type safety.
Solution: Computed wallet balance dynamically by aggregating all stored transactions at read time rather than maintaining a mutable running total, ensuring the balance stays correct even if an intermediate write previously failed.
Solution: Used React Native's SafeAreaView, KeyboardAvoidingView, and Platform-specific adjustments to handle status bars, notches, and soft keyboards uniformly on both iOS and Android.