A modern, feature-rich finance tracking mobile application built with React Native and Expo. Track your income and expenses, manage budgets, and gain insights into your spending habits with a beautiful dark/light theme interface.
- Add Transactions: Record income and expenses with detailed information (amount, reason, second party, date)
- Edit Transactions: Tap any transaction to modify its details
- Delete Transactions: Remove transactions with confirmation dialog
- Transaction Filters: Filter by All, Expenses, or Income on the Transactions screen
- Real-time Balance: View your current total balance
- Weekly Spending: Track your spending for the current week
- Spending Trends: Compare current week spending vs. last week with percentage change
- Budget Management: Set and manage monthly budget limits
- Dark/Light Theme: Toggle between dark and light modes
- Modern Design: Clean, intuitive interface with yellow accent colors
- Spending Card: Visual representation of your financial status
- Quick Actions: Receive and Send buttons for fast transaction entry
- Local Storage: All data saved using AsyncStorage
- Automatic Sync: Changes reflected immediately across the app
- Currency Support: F CFA currency format
- Node.js (v14 or higher)
- npm or yarn
- Expo CLI
-
Clone the repository
git clone <repository-url> cd finance-track-antigravity
-
Install dependencies
npm install
-
Start the development server
npx expo start
-
Run on your device
- Scan the QR code with Expo Go (Android) or Camera app (iOS)
- Or press
afor Android emulator - Or press
ifor iOS simulator
finance-track-antigravity/
├── app/ # Expo Router screens
│ ├── (tabs)/ # Tab navigation screens
│ │ ├── index.tsx # Home screen
│ │ ├── transactions.tsx # Transactions list screen
│ │ ├── settings.tsx # Settings screen
│ │ └── _layout.tsx # Tab layout configuration
│ └── _layout.tsx # Root layout
├── src/
│ ├── components/ # Reusable components
│ │ ├── SpendingCard.tsx # Main spending card component
│ │ ├── TransactionForm.tsx # Add/Edit transaction form
│ │ └── TransactionItem.tsx # Transaction list item
│ ├── constants/
│ │ └── theme.ts # Theme colors and global styles
│ ├── context/
│ │ └── AppContext.tsx # Global state management
│ ├── services/
│ │ └── storage.ts # AsyncStorage wrapper
│ ├── types/
│ │ └── index.ts # TypeScript type definitions
│ └── utils/
│ └── currency.ts # Currency formatting utilities
└── package.json
- Tap the + button on the Transactions screen, or
- Use Receive (for income) or Send (for expenses) buttons on the Home screen
- Fill in the transaction details
- Tap "Add Transaction"
- Tap any transaction in the list
- Modify the details as needed
- Tap "Update Transaction"
- Tap the transaction you want to delete
- Tap "Delete Transaction" button
- Confirm the deletion
- Go to the Settings tab
- Toggle the Dark Mode switch
- The app will immediately update across all screens
- Go to the Settings tab
- Enter your desired monthly budget limit
- Tap "Update Budget"
- React Native: Cross-platform mobile development
- Expo: Development platform and tooling
- Expo Router: File-based navigation
- TypeScript: Type-safe development
- AsyncStorage: Local data persistence
- React Context API: Global state management
- Online database synchronization
- AI-driven financial advice
- Budget target tracking
- Transaction categories
- Export data functionality
- Charts and analytics
- Multi-currency support
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
Built with ❤️ using Expo and React Native