💰 My Wallet - Multi-Platform Finance Tracker

A beautiful and intuitive personal finance tracking application built with React Native and Expo

📱 About The Project

My Wallet is a comprehensive multi-platform financial management application that helps users track their income and expenses efficiently. Built with modern technologies and following best practices, this app provides a seamless experience across iOS, Android, and Web platforms.

✨ Key Features

🔐 Secure Authentication - User authentication powered by Clerk
💸 Transaction Management - Easy addition, viewing, and deletion of transactions
📊 Real-time Balance Tracking - Instant overview of total balance, income, and expenses
🏷️ Category Organization - Organize transactions with 9 predefined categories:
- Food & Drinks
- Snack
- Transportation
- Shopping
- Entertainment
- Health
- Bills
- Income
- Other
💰 Income & Expense Tracking - Separate tracking for income and expenses
🔄 Pull to Refresh - Easy data synchronization
🎨 Modern UI/UX - Clean, intuitive interface with smooth animations
📱 Multi-Platform Support - Runs on iOS, Android, and Web
🌐 Cloud Sync - Transactions stored and synced via backend API
💱 Indonesian Rupiah (Rp) Support - Built-in currency formatting

🛠️ Tech Stack

Frontend

React Native (0.81.5) - Cross-platform mobile framework
Expo (~54.0) - Development platform and toolchain
TypeScript (5.9.2) - Type-safe JavaScript
Expo Router (6.0.15) - File-based routing
React Navigation - Navigation library

Authentication & State

@clerk/clerk-expo (2.19.2) - User authentication and management
React Hooks - State management with custom hooks

UI Components & Libraries

@expo/vector-icons - Icon library (Ionicons)
React Native Gesture Handler - Touch and gesture handling
React Native Reanimated - Smooth animations
React Native Keyboard Aware Scroll View - Keyboard handling

Backend Integration

RESTful API integration for transaction management
Secure data storage with user-specific data isolation

📁 Project Structure

my-wallet-multi-platform/
├── app/                          # Application screens (Expo Router)
│   ├── (auth)/                   # Authentication flow
│   │   ├── sign-in.tsx          # Sign in screen
│   │   ├── sign-up.tsx          # Sign up screen
│   │   └── _layout.tsx          # Auth layout
│   ├── (root)/                   # Main app flow
│   │   ├── index.tsx            # Home screen (transaction list)
│   │   ├── create.tsx           # Create transaction screen
│   │   └── _layout.tsx          # Root layout
│   └── _layout.tsx              # App root layout
├── assets/                       # Static assets
│   ├── images/                  # Image files (logos, icons, illustrations)
│   └── styles/                  # StyleSheet definitions
│       ├── auth.styles.ts       # Authentication screens styles
│       ├── create.styles.ts     # Create transaction styles
│       └── home.styles.ts       # Home screen styles
├── components/                   # Reusable UI components
│   ├── BalanceCard.tsx          # Balance display card
│   ├── NoTransactionFound.tsx   # Empty state component
│   ├── PageLoader.tsx           # Loading indicator
│   ├── SafeScreen.tsx           # Safe area wrapper
│   ├── SignOutButton.tsx        # Sign out button
│   └── TransactionItem.tsx      # Transaction list item
├── constants/                    # App constants
│   ├── api.ts                   # API endpoints configuration
│   └── colors.ts                # Color palette
├── hooks/                        # Custom React hooks
│   └── useTransactions.ts       # Transaction management hook
├── lib/                          # Utility functions
│   └── utils.ts                 # Helper functions (currency formatting)
├── app.json                      # Expo configuration
├── package.json                  # Dependencies and scripts
├── tsconfig.json                 # TypeScript configuration
└── README.md                     # Project documentation

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or newer)
npm or yarn
Expo CLI (optional, but recommended)
iOS Simulator (macOS only) or Android Emulator

Installation

Clone the repository

git clone https://github.com/atavada/my-wallet-multi-platform.git
cd my-wallet-multi-platform

Install dependencies
```
npm install
```
Configure environment variables

Create a .env file in the root directory (if needed for custom API endpoints):
```
# Add your environment variables here
```
Start the development server
```
npm start
# or
npx expo start
```
Run on your preferred platform
- iOS: Press i in the terminal or run npm run ios
- Android: Press a in the terminal or run npm run android
- Web: Press w in the terminal or run npm run web

📱 Usage Guide

User Authentication

Sign Up: Create a new account with email and password
Sign In: Log in to your existing account
Sign Out: Use the sign-out button in the home screen header

Managing Transactions

Adding a Transaction

Click the "Add" button in the home screen header
Select transaction type: Expense or Income
Enter the amount in Indonesian Rupiah (Rp)
Add a transaction title/description
Choose a category from the 9 available options
Click "Save" to create the transaction

Viewing Transactions

All transactions are displayed on the home screen
Each transaction shows:
- Icon based on category
- Title/description
- Amount (color-coded: red for expenses, green for income)
- Timestamp

Deleting a Transaction

Swipe left on a transaction or tap the delete icon
Confirm deletion in the alert dialog

Balance Overview

The balance card at the top of the home screen displays:

Total Balance: Current account balance
Income: Total income (green)
Expenses: Total expenses (red)

🔧 Available Scripts

npm start - Start the Expo development server
npm run android - Run on Android emulator/device
npm run ios - Run on iOS simulator/device
npm run web - Run on web browser
npm run lint - Run ESLint for code quality checks
npm run reset-project - Reset the project to a clean state

🌐 API Integration

The app integrates with a backend API for data persistence:

Base URL: https://my-wallet-atavada4802-oexs6ff5.apn.leapcell.dev/api

Endpoints Used:

POST /transactions - Create a new transaction
GET /transactions/:userId - Get all transactions for a user
GET /transactions/summary/:userId - Get financial summary
DELETE /transactions/:transactionId - Delete a transaction

🎨 Design Features

Color Scheme: Modern, clean palette with blue accent colors
Typography: Clear, readable fonts with proper hierarchy
Icons: Ionicons for consistent iconography
Animations: Smooth transitions using React Native Reanimated
Responsive Design: Adapts to different screen sizes
Dark Mode Ready: Automatic UI style switching

🧪 Development

Linting

npm run lint

TypeScript Type Checking

npx tsc --noEmit

Building for Production

Android

eas build --platform android

iOS

eas build --platform ios

Web

npm run web

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Development Guidelines

Follow the existing code style
Write meaningful commit messages
Update documentation for new features
Test on multiple platforms before submitting

📄 License

MIT

👨‍💻 Author

atavada

GitHub: @atavada

🙏 Acknowledgments

Expo - For the amazing development platform
Clerk - For authentication services
React Native - For the cross-platform framework
Ionicons - For the beautiful icons

📞 Support

If you have any questions or need help with the project, please feel free to reach out.

Made using React Native and Expo

Name		Name	Last commit message	Last commit date
Latest commit History 20 Commits
.vscode		.vscode
app		app
assets		assets
components		components
constants		constants
hooks		hooks
lib		lib
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
app.json		app.json
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

License

atavada/my-wallet-multi-platform

Folders and files

Latest commit

History

Repository files navigation