⚠️ IMPORTANT DISCLAIMER: This is a DEMONSTRATION/EDUCATIONAL application only. This is NOT a real banking application and should NEVER be used with real money or real financial data. This project is intended for learning purposes, portfolio demonstration, and educational use only.
A modern, cross-platform banking demo application built with React Native and Expo. This app demonstrates banking-like features including user authentication, transaction management, and profile features for educational and portfolio purposes.
Note: All features are simulated for demonstration purposes. No real financial transactions occur.
- User Registration - Create a demo account with username, password, and profile image
- User Login - Simulated authentication with JWT tokens
- Session Management - Persistent login with AsyncStorage
- Profile Image Upload - Upload and update profile pictures
- Deposit - Simulate adding funds to your demo account
- Withdraw - Simulate removing funds from your demo account (with balance validation)
- Transfer - Simulate sending money to other demo users
- Payment Links - Generate shareable payment links with QR codes for receiving simulated payments
- QR Code Generation - Visual QR codes for easy payment link sharing
- Transaction History - View all your simulated transactions with filtering options
- Transaction Details - Detailed view of individual demo transactions
- Advanced Filtering - Filter by type (Deposit, Withdraw, Transfer, All), date range, and amount range
- Real-time Updates - Automatic refresh after simulated transactions
- Transaction Sound Effects - Audio feedback for transactions (Send, Receive, Deposit)
- Level System - Earn XP and level up based on transaction activity
- Achievements - Unlock achievements for various milestones:
- Getting Started (First transaction)
- Active User (10 transactions)
- Power User (50 transactions)
- Transaction Master (100 transactions)
- Money Maker (Deposit milestones)
- Saver (Balance milestones)
- Sharing is Caring (Transfer milestones)
- Centurion (100 transactions)
- Thousandaire (1,000 transactions)
- High Roller (10,000 KWD balance)
- Progress Tracking - Visual progress bars for achievements and level progression
- Points System - Earn points for each transaction with bonuses for different types
- Streak Tracking - Track consecutive days with transactions
- Friends List - Add and manage friends from the user directory
- User Directory - Browse and search for other demo users
- User Profiles - View other users' profiles and transaction history
- Snake Game - Classic snake game with high score tracking
- Game Integration - Play games directly within the banking app
- Dashboard - Overview of demo balance, account number, recent transactions, and gamification stats
- Profile Management - View and update profile information
- Animated Background - Dynamic animated background for enhanced visual appeal
- Bottom Navigation - Easy navigation between Home, Friends, and Level screens
- Responsive Design - Works seamlessly on web, iOS, and Android
- Loading States - Skeleton loaders for better UX
- Error Handling - Comprehensive error messages and retry mechanisms
- Image Preloading - Optimized image loading for better performance
- Stable Image Component - Robust image handling with fallbacks
- React Native (0.81.5) - Cross-platform mobile framework
- Expo (~54.0.23) - Development platform and tooling
- TypeScript (~5.9.2) - Type-safe JavaScript
- React (^19.2.0) - UI library
- Expo Router (^6.0.14) - File-based routing
- React Query (@tanstack/react-query ^5.90.7) - Data fetching and caching
- Formik (^2.4.9) - Form management
- Yup (^1.7.1) - Schema validation
- Axios (^1.13.2) - HTTP client
- AsyncStorage (@react-native-async-storage/async-storage ^2.2.0) - Local storage
- Expo Image Picker (~17.0.8) - Image selection and upload
- React Native QR Code SVG (^6.3.0) - QR code generation for payment links
- Expo AV - Audio playback for sound effects (dynamically loaded)
- React Native Safe Area Context (~5.6.0) - Safe area handling
- ✅ Web - Full functionality in web browsers
- ✅ iOS - Native iOS app support
- ✅ Android - Native Android app support
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher recommended)
- npm or yarn package manager
- Expo CLI (installed globally or via npx)
- Git for version control
For mobile development:
- iOS: Xcode (for iOS simulator) - macOS only
- Android: Android Studio (for Android emulator)
-
Clone the repository
git clone <repository-url> cd banking-project
-
Install dependencies
npm install # or yarn install -
Start the development server
npm start # or yarn start
npm run web
# or
yarn webOpens in your default browser at http://localhost:8081
npm run ios
# or
yarn iosRequires Xcode and iOS Simulator (macOS only)
npm run android
# or
yarn androidRequires Android Studio and an Android emulator
npm start
# or
yarn startOpens Expo DevTools where you can:
- Scan QR code with Expo Go app (iOS/Android)
- Press
wto open in web browser - Press
ito open iOS simulator - Press
ato open Android emulator
banking-project/
├── api/ # API integration layer
│ ├── auth.ts # Authentication endpoints
│ ├── index.ts # Axios configuration
│ └── transactions.ts # Transaction endpoints
├── app/ # Application screens (Expo Router)
│ ├── _layout.tsx # Root layout
│ ├── index.tsx # Home/Dashboard screen
│ ├── login.tsx # Login screen
│ ├── register.tsx # Registration screen
│ ├── profile.tsx # Profile management
│ ├── deposit.tsx # Deposit funds
│ ├── withdraw.tsx # Withdraw funds
│ ├── transfer.tsx # Transfer money
│ ├── generate-link.tsx # Generate payment link with QR code
│ ├── deposit-link.tsx # Deposit via payment link
│ ├── transaction-detail.tsx # Transaction details
│ ├── transactions.tsx # Full transaction history
│ ├── users.tsx # User directory
│ ├── (tabs)/ # Tab navigation screens
│ │ ├── _layout.tsx # Tab layout
│ │ ├── home.tsx # Home tab (redirects to index)
│ │ ├── friends.tsx # Friends list and management
│ │ └── level.tsx # Gamification and achievements
│ └── games/ # Game screens
│ └── snake.tsx # Snake game
├── assets/ # Static assets
│ ├── icon.png
│ ├── favicon.png
│ ├── splash-icon.png
│ ├── *.png # Achievement icons, UI icons
│ └── *.mp3 # Sound effects (Send, Receive, Deposit)
├── components/ # Reusable components
│ ├── Skeleton.tsx # Loading skeleton components
│ ├── BottomNav.tsx # Bottom navigation bar
│ ├── AnimatedBackground.tsx # Animated background component
│ ├── GamificationSummaryCard.tsx # Achievement summary card
│ ├── StableImage.tsx # Robust image component with fallbacks
│ └── DatePickerModal.tsx # Date picker for filtering
├── constants/ # Constants and configuration
│ └── imageAssets.ts # Image asset imports
├── contexts/ # React contexts
│ └── AuthContext.tsx # Authentication context
├── hooks/ # Custom React hooks
│ ├── useLogin.ts # Login hook
│ ├── useRegister.ts # Registration hook
│ ├── useGamification.ts # Gamification logic and calculations
│ └── useSound.ts # Sound effects hook
├── utils/ # Utility functions
│ └── imagePreloader.ts # Image preloading for performance
├── app.json # Expo configuration
├── package.json # Dependencies and scripts
└── tsconfig.json # TypeScript configuration
Note: This demo app connects to a demonstration backend API. All data and transactions are simulated.
The application connects to a demo backend API. The base URL is configured in:
api/index.ts- Main API configuration- Individual API files reference:
https://react-bank-project.eapi.joincoded.com/
- User registers/logs in to the demo system
- JWT token is received and stored in AsyncStorage
- Token is automatically attached to authenticated requests via Axios interceptors
- Token is validated on each request
The app provides comprehensive filtering options:
- Type Filtering - Filter by transaction type (All, Deposit, Withdraw, Transfer)
- Date Range Filtering - Filter transactions by start and end dates
- Amount Range Filtering - Filter by minimum and maximum amounts
- Advanced Filters - Collapsible advanced filter panel with all options
The app includes a complete gamification system:
- XP Calculation - Earn XP based on transaction activity:
- Base: 10 points per transaction
- Deposit bonus: +20 points
- Transfer bonus: +15 points
- Withdraw bonus: +5 points
- Level Progression - Levels increase with XP, requiring more XP for each subsequent level
- Achievement Tracking - 10+ achievements with progress tracking
- Visual Feedback - Progress bars, level indicators, and achievement badges
Audio feedback enhances the user experience:
- Transaction Sounds - Different sounds for Send, Receive, and Deposit
- Platform Support - Works on web (HTML5 Audio) and native (Expo AV)
- Automatic Playback - Sounds play automatically for new income transactions
Large amounts are automatically formatted:
- Thousands:
1.500K KWD - Millions:
2.500M KWD - Billions:
1.200B KWD - Trillions: Full number with commas
The app intelligently resolves user IDs to usernames:
- Fetches all users on app load
- Dynamically fetches missing users from transaction history
- Handles both numeric and alphanumeric user IDs
- Falls back gracefully when users cannot be found
- Supports both local and remote images
- Handles base64 encoded images for web
- Automatic fallback to placeholder with user initial
- Error handling for failed image loads
- Image preloading for better performance
- Stable image component with retry logic
- Generate shareable payment links with QR codes
- Easy sharing via QR code scanning
- Visual QR code display in the app
- TypeScript for type safety
- Functional components with hooks
- Custom hooks for reusable logic
- Context API for global state management
- Formik for form state management
- Yup for schema validation
- Real-time validation feedback
- Error messages displayed inline
- React Query for server state
- Context API for authentication state
- Local state with useState for UI state
- Automatic cache invalidation after mutations
Issue: Cannot input text on web
- Solution: Ensure TextInput components don't have unsupported props like
inputModeon web
Issue: Images not loading
- Solution: Check network connectivity and verify BASE_URL is correct
- Ensure image URLs are properly formatted
Issue: Authentication token expired
- Solution: Log out and log back in to refresh the token
Issue: Transactions not updating
- Solution: Check React Query cache invalidation is working
- Manually refresh by pulling down on the screen
- Uses
window.confirmandwindow.alertfor dialogs - File input for image selection
- Responsive design with flexbox
- Native Alert dialogs
- Image picker with permissions
- Safe area handling
- Native Alert dialogs
- Image picker with permissions
- Edge-to-edge support
Important: While this demo app implements security best practices for demonstration purposes, it is NOT production-ready and should NOT be used with real financial data or real money.
- JWT tokens stored securely in AsyncStorage (for demo purposes)
- Automatic token attachment to authenticated requests
- Error handling for 401/403 responses
- Input validation on all forms
- Secure password handling (never logged)
This is a demonstration application. For production banking applications, additional security measures would be required including:
- End-to-end encryption
- PCI DSS compliance
- Multi-factor authentication
- Regulatory compliance (KYC, AML, etc.)
- Professional security audits
- And many other enterprise-level security requirements
This project is designed for:
- Learning - Understanding React Native, Expo, and mobile app development
- Portfolio - Demonstrating full-stack development skills
- Education - Teaching modern mobile app architecture and patterns
- Practice - Practicing authentication, state management, and API integration
This is NOT intended for:
- Real financial transactions
- Production banking services
- Handling real money or sensitive financial data
- Commercial banking operations
This project is private and proprietary.
This is a private demo/educational project. For questions or issues, please contact the project maintainers.
- Classic snake game implementation
- High score tracking with AsyncStorage
- Touch controls and joystick support
- Animated game elements
- Pause/resume functionality
- Game over detection and restart
Potential features for future development:
- Biometric authentication
- Push notifications for transactions
- Export transaction history
- Multi-currency support
- Transaction categories and tags
- Budgeting and analytics
- Recurring transactions
- Additional mini-games
- Social features (leaderboards, challenges)
- Transaction sharing
This application is a DEMONSTRATION and EDUCATIONAL project only.
- ❌ DO NOT use with real money
- ❌ DO NOT use for real financial transactions
- ❌ DO NOT use for production banking services
- ✅ DO use for learning and portfolio purposes
- ✅ DO use to understand mobile app development patterns
- ✅ DO use as a reference for educational projects
The developers and maintainers are not responsible for any misuse of this application.
Built with ❤️ using React Native and Expo
For educational and demonstration purposes only