MoneyMate is a modern, feature-rich personal finance management mobile application built with React Native and Expo. Take complete control of your finances with smart budgeting, transaction tracking, and insightful financial analytics.
- Frontend: React Native, Expo SDK 53, TypeScript
- Routing: Expo Router with file-based navigation
- Backend & Database: Firebase (Authentication, Firestore)
- Image Management: Expo Image, Cloudinary
- Charts & Analytics: React Native Gifted Charts
- State Management: React Context API
- Styling: StyleSheet with custom design system
- Multi-Wallet System: Create and manage multiple wallets (Cash, Bank, Credit Cards, etc.)
- Transaction Tracking: Add, edit, and delete income/expense transactions with categories
- Real-time Balance: Live balance calculations across all wallets
- Interactive Charts: Weekly, monthly, and yearly financial statistics
- Visual Reports: Bar charts showing spending patterns and trends
- Financial Overview: Dashboard with total balance, income, and expenses
- Transaction History: Detailed transaction lists with search and filtering
- Profile Management: Complete user profile with avatar upload
- Authentication: Secure Firebase authentication with email/password
- Image Upload: Cloudinary integration for profile and wallet images
- Node.js (v16 or higher) and npm/yarn installed
- Expo CLI (
npm install -g @expo/cli) - Android Studio (for Android development) or Xcode (for iOS development)
- Git (optional, for cloning the repository)
moneymate/
├── app/ # Main application screens
│ ├── (auth)/ # Authentication screens
│ │ ├── Login.tsx # User login screen
│ │ ├── Register.tsx # User registration screen
│ │ └── Welcome.tsx # Welcome/onboarding screen
│ ├── (modals)/ # Modal screens
│ │ ├── ProfileModal.tsx # Profile editing modal
│ │ ├── SearchModal.tsx # Transaction search modal
│ │ ├── TransactionModal.tsx # Add/edit transaction modal
│ │ └── WalletModal.tsx # Add/edit wallet modal
│ ├── (tabs)/ # Main tab screens
│ │ ├── index.tsx # Home dashboard
│ │ ├── Profile.tsx # User profile screen
│ │ ├── Statistics.tsx # Financial analytics
│ │ ├── Wallet.tsx # Wallet management
│ │ └── _layout.tsx # Tab navigation layout
│ ├── _layout.tsx # Root layout with navigation
│ └── index.tsx # App entry point
├── assets/ # Static assets
│ ├── fonts/ # Custom fonts
│ └── images/ # App images and icons
├── components/ # Reusable UI components
│ ├── BackButton.tsx # Navigation back button
│ ├── Button.tsx # Custom button component
│ ├── CustomTabs.tsx # Tab navigation component
│ ├── Header.tsx # Screen header component
│ ├── HomeCard.tsx # Dashboard balance card
│ ├── ImageUpload.tsx # Image upload component
│ ├── Input.tsx # Form input component
│ ├── Loading.tsx # Loading indicator
│ ├── ModalWrapper.tsx # Modal container
│ ├── ScreenWrapper.tsx # Screen container
│ ├── TransactionList.tsx # Transaction list component
│ ├── Typo.tsx # Typography component
│ ├── WalletListItem.tsx # Wallet item component
│ └── index.ts # Component exports
├── config/ # Configuration files
│ └── firebase.ts # Firebase configuration
├── constants/ # App constants
│ ├── data.ts # Static data and categories
│ └── theme.ts # Design system and colors
├── contexts/ # React Context providers
│ └── authContext.tsx # Authentication context
├── hooks/ # Custom React hooks
│ └── useFetchData.ts # Data fetching hook
├── services/ # Business logic services
│ ├── imageService.ts # Image upload service
│ ├── transactionService.ts # Transaction CRUD operations
│ ├── userService.ts # User management service
│ └── walletService.ts # Wallet CRUD operations
├── utils/ # Utility functions
│ ├── common.ts # Common helper functions
│ └── styling.ts # Styling utilities
├── types.ts # TypeScript type definitions
├── package.json # Dependencies and scripts
└── .env # Environment variables
git clone https://github.com/ahadalireach/moneymate.git
cd moneymatenpm installCreate a .env file in the root directory and add your Firebase and Cloudinary credentials:
API_KEY=your_firebase_api_key
APP_ID=your_firebase_app_id
STORAGE_BUCKET=your_firebase_storage_bucket
CLOUD_NAME=your_cloudinary_cloud_name
UPLOAD_PRESET=your_cloudinary_upload_preset- Create a new Firebase project at Firebase Console
- Enable Authentication (Email/Password)
- Create a Firestore database
- Add your Firebase configuration to the
.envfile
- Create a Cloudinary account at Cloudinary
- Get your cloud name and upload preset
- Add the credentials to the
.envfile
npx expo start- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- 📹 Demo Video: Watch Now
- ⭐ GitHub: github.com/ahadalireach/moneymate
For any questions, feedback, or collaboration opportunities, reach out at ahadali.reach@gmail.com
Built with 💻, ☕, and ❤️ by Ahad Ali