PocketTrack - Personal Finance & Piggy Bank App 💰

A comprehensive offline finance tracking app built with React Native and Expo. Track your expenses, manage your piggy bank savings, create savings goals, and collaborate on group savings—all stored locally on your device.

✨ Features

1. 📊 Home Dashboard

• Real-time overview of total piggy bank balance
• Today's expenses and deposits at a glance
• Quick summary of all financial activities
• One-tap Dark/Light mode toggle with persistent preference
• Clean, modern card-based layout

2. 💸 Expense Tracking

• Add daily expenses with amount and description
• 7 categories: Food, Transport, Shopping, Bills, Entertainment, Health, Other
• Category-based chip selection for easy categorization
• Edit and delete expense entries with confirmation
• View expense history sorted by most recent
• See total expenses at the top
• Weekly and monthly expense reports with charts

3. 🐷 Piggy Bank Management

• Track physical piggy bank deposits and withdrawals
• Toggle between Deposit and Withdrawal modes
• Add notes to each transaction
• Create multiple savings goals with daily targets
• Automatic monthly goal tracking with intelligent carry-over for shortfalls
• Example: Save ₱20/day → ₱600/month (auto-adjusts for month length)
• Progress tracking for each goal
• Mark goals as completed when reached
• View complete transaction history

4. 👥 Group Savings

• Create multiple savings groups (e.g., "Friends Vacation Fund", "Family Emergency")
• Add members when creating or editing groups
• Member chips with easy add/remove functionality
• Dropdown selector to choose which member is contributing
• Track each member's total contributions separately
• View recent contributions per group
• Edit and delete groups with cascade deletion protection
• Add, edit, and delete individual contributions
• See total group savings and per-member breakdowns
• Enhanced UI with rounded cards and shadows

5. 📈 Reports & Analytics

• Switch between Weekly and Monthly views
• Three interactive chart types:
  • Bar Chart: Financial overview (Expenses, Deposits, Withdrawals, Group savings)
  • Line Chart: Expense trends over time with smooth curves
  • Pie Chart: Expenses breakdown by category with percentages
• Net savings calculation (Income - Expenses)
• Expense breakdown by category with amounts
• Visual summaries of all financial data
• Color-coded charts for easy understanding

6. 🌓 Dark/Light Mode

• Beautiful dark theme with enhanced contrast
• Light theme optimized for readability
• Toggle anywhere from home screen
• Persistent theme preference across sessions
• Smooth color transitions throughout app
• Theme-aware colors for all components

🚀 Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• Expo Go app (for testing on physical device)

Get started

1. Install dependencies

   npm install --legacy-peer-deps

   Note: --legacy-peer-deps flag is required due to peer dependency conflicts with react-native-svg

2. Start the app

   npx expo start

In the output, you'll find options to open the app in a

• development build
• Android emulator
• iOS simulator
• Expo Go, a limited sandbox for trying out app development with Expo

Key Dependencies

• @react-native-async-storage/async-storage@2.1.0 - Local data persistence
• react-native-chart-kit@^6.12.0 - Charts and graphs
• react-native-svg@15.8.0 - SVG rendering for charts
• @expo/vector-icons - MaterialIcons icon set

📱 Usage Guide

Adding Expenses

1. Go to Expenses tab
2. Tap the + (floating button) at bottom-right
3. Enter amount and description
4. Select category by tapping the chip
5. Choose or edit the date (defaults to today)
6. Tap Save
7. Edit or delete expenses by tapping the action buttons on each item

Managing Piggy Bank

1. Go to Piggy Bank tab
2. Toggle between Deposit or Withdrawal
3. Enter amount and optional note
4. Tap Add Entry
5. View your total balance and transaction history

Creating Savings Goals

1. In Piggy Bank tab, tap Add Goal button
2. Enter goal name (e.g., "Emergency Fund", "New Phone")
3. Set daily amount (e.g., ₱20)
4. The app calculates monthly target automatically based on days in the month
5. Track your progress throughout the month
6. At month end, tap Complete Month to:
   • Mark as done if goal reached
   • Carry over shortfall to next month if not reached (automatic calculation)
7. Continue or delete completed goals

Group Savings

1. Go to Groups tab
2. Tap + (floating button) to create a new group
3. Enter group name (e.g., "Beach Trip 2026")
4. Add member names one by one:
   • Type name and tap + button
   • Members appear as chips
   • Remove by tapping X on chip
5. Must have at least one member to save
6. Tap Save to create the group
7. To add contributions:
   • Tap Add Contribution on the group card
   • Select member from dropdown
   • Enter amount, optional note, and date
   • Tap Save
8. View each member's total and recent contributions
9. Edit groups to add/remove members anytime
10. Delete groups removes all associated contributions

Viewing Reports

1. Go to Reports tab
2. Choose This Week or This Month
3. Switch between chart types:
   • Bar Chart: Compare expenses, deposits, withdrawals, and group savings
   • Line Chart: See expense trends day by day
   • Pie Chart: Visual breakdown of spending by category
4. Scroll down to see:
   • Net savings calculation
   • Detailed expense breakdown by category

🗂️ Project Structure

PocketTrack/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx          # Home Dashboard with stats
│   │   ├── expenses.tsx       # Expense Tracking with categories
│   │   ├── piggybank.tsx      # Piggy Bank & Savings Goals
│   │   ├── groups.tsx         # Group Savings with members
│   │   ├── reports.tsx        # Reports & Charts
│   │   └── _layout.tsx        # Tab Navigation (5 tabs, MaterialIcons)
│   └── _layout.tsx            # Root Layout with ThemeProvider
├── contexts/
│   └── ThemeContext.tsx       # Dark/Light Mode Theme Provider
├── types/
│   └── index.ts               # TypeScript Interfaces
├── utils/
│   ├── storage.ts             # AsyncStorage CRUD Operations
│   └── helpers.ts             # Date & Currency Helpers
├── components/
│   └── ui/                    # Reusable UI Components
├── constants/
│   └── theme.ts               # Color Constants
└── package.json               # Dependencies

🎨 UI/UX Features

• MaterialIcons: Consistent icon system throughout the app
• Floating Action Buttons: Easy-to-reach add buttons on Expenses and Groups screens
• Modal Forms: Clean, centered forms with clear labels
• Card-based Layout: Modern card design with shadows and borders
• Category Chips: Interactive category selection with visual feedback
• Member Chips: Elegant member management with add/remove functionality
• Dropdown Selector: User-friendly member selection for contributions
• Empty States: Helpful messages with large icons when no data exists
• Responsive Design: Adapts to different screen sizes
• Color-coded Data: Easy-to-read financial information with semantic colors
• Tab Bar: Larger navigation bar (70px) with clear icons and labels

💾 Data Storage

All data is stored locally using AsyncStorage:

• Expenses: All spending records with categories and dates
• Piggy Bank Entries: Deposits and withdrawals with notes
• Savings Goals: Active and completed goals with monthly tracking
• Group Savings: Groups with member lists and all contributions
• Group Contributions: Individual contribution records linked to groups and members
• Theme Preference: Dark/Light mode setting (persisted)

100% Offline: No internet connection required! Your data stays private and secure on your device. No servers, no cloud sync, complete privacy.

📝 Example Workflows

Scenario 1: Daily Savings Goal with Carry-Over

1. Create goal: "Save ₱20 per day"
2. Each day, add ₱20 deposit to piggy bank
3. At month end with 30 days: Target = ₱600 (₱20 × 30)
4. If you saved ₱580, shortfall of ₱20 automatically carries to next month
5. Next month (31 days) target = ₱640 (₱20 × 31 + ₱20 carry-over)
6. System tracks everything automatically!

Scenario 2: Group Vacation Fund

1. Create group: "Beach Trip 2026"
2. Add members: John, Mary, Sarah
3. Track contributions over time:
   • Week 1: John ₱500, Mary ₱500, Sarah ₱500
   • Week 2: John ₱300, Sarah ₱400
   • Week 3: Mary ₱600, Sarah ₱200
4. View totals: John ₱800, Mary ₱1,100, Sarah ₱1,100
5. Total saved: ₱3,000
6. Everyone can see who contributed what and when

Scenario 3: Weekly Budget Tracking

1. Set mental weekly spending limit (e.g., ₱3,000)
2. Track all expenses daily using the app
3. Check Reports tab on Sunday:
   • View "This Week" bar chart
   • See line chart for daily trends
   • Check pie chart for category breakdown
4. Discover you spent:
   • Food: ₱1,200 (40%)
   • Transport: ₱600 (20%)
   • Shopping: ₱900 (30%)
   • Other: ₱300 (10%)
5. Total: ₱3,000 - right on budget!
6. Adjust spending next week based on insights

Scenario 4: Multiple Savings Goals

1. Create "Emergency Fund": ₱50/day
2. Create "New Laptop": ₱30/day
3. Create "Vacation Fund": ₱20/day
4. Total daily target: ₱100/day
5. Track each goal separately
6. View progress on all goals in Piggy Bank tab
7. Complete goals independently as you reach them

Learn more

To learn more about developing your project with Expo, look at the following resources:

• Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
• Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

🔧 Technical Notes

• Peer Dependency Fix: The --legacy-peer-deps flag is required during installation due to react-native-svg peer dependency conflicts
• Icon System: Switched from IconSymbol to MaterialIcons for better cross-platform compatibility
• Tab Navigation: 5 tabs with consistent 70px height for better usability
• Theme Colors: Enhanced dark mode contrast for better readability
• Data Models: Well-structured TypeScript interfaces for type safety
• Storage Pattern: Consistent async/await patterns with AsyncStorage

🐛 Troubleshooting

Installation fails

• Use npm install --legacy-peer-deps instead of regular npm install
• Clear cache: npm cache clean --force then retry

Icons not showing

• Make sure you're using MaterialIcons from @expo/vector-icons
• Icons are properly configured in tab navigation

Dark mode not working

• Theme toggle is on the home screen (top-right)
• Theme preference is saved automatically

Data not persisting

• AsyncStorage requires proper async/await handling (already implemented)
• Check console for any storage errors

---

Built with ❤️ using React Native, Expo, and TypeScript

Currency: Philippine Peso (₱)
Language: English
Platform: iOS & Android (via Expo Go)

Happy Saving! 💰✨