Aha Mobile App

React Native mobile application for the Aha event management platform (powered by Expo SDK 54).

Features

This mobile app provides full feature parity with the web application:

Authentication

• ✅ User registration with email verification
• ✅ Login/Logout
• ✅ Forgot password & password reset
• ✅ Email verification
• ✅ Account settings (change email/password)

Dashboard

• ✅ View all events (organized by role: Owner, Manager, Member)
• ✅ Create new events
• ✅ Join events with join codes
• ✅ Email verification status and resend functionality
• ✅ Auto-refresh of user data

Event Management

• ✅ Event details view with tabs (Overview, Members, Shop)
• ✅ Real-time auto-refresh (every 5 seconds)
• ✅ Pull-to-refresh functionality
• ✅ View event join code
• ✅ Track personal token balance

Member Management (Owner/Manager)

• ✅ View all event members
• ✅ Add/remove tokens from members
• ✅ View member roles and token balances

Shop System

• ✅ Create shop items (Owner/Manager)
• ✅ Purchase items with tokens
• ✅ Receipt generation with unique codes
• ✅ Redeem receipts (Owner/Manager)
• ✅ View item descriptions, prices, and stock

Transactions

• ✅ View recent transaction history
• ✅ Real-time updates of token balance
• ✅ Transaction details (amount, description, timestamp)

Project Structure

mobile/
├── src/
│   ├── App.tsx                 # Main app component with navigation
│   ├── context/
│   │   └── AuthContext.tsx     # Authentication context provider
│   ├── services/
│   │   ├── api.ts              # API client and auth service
│   │   └── events.service.ts   # Events API service
│   └── screens/
│       ├── LoginScreen.tsx
│       ├── RegisterScreen.tsx
│       ├── ForgotPasswordScreen.tsx
│       ├── ResetPasswordScreen.tsx
│       ├── VerifyEmailScreen.tsx
│       ├── DashboardScreen.tsx
│       ├── EventDetailsScreen.tsx
│       └── SettingsScreen.tsx
├── package.json
├── tsconfig.json
├── babel.config.js
├── metro.config.js
├── index.js
└── app.json

Setup Instructions

Prerequisites

• Node.js 16 or higher
• Expo Go app installed on your mobile device (iOS or Android)
  • Download for iOS
  • Download for Android

Installation

1. Install dependencies:

npm install

Running the App

Using Expo Go (Recommended)

npx expo start

Then scan the QR code with:

• iOS: Use the Camera app
• Android: Use the Expo Go app

Start Development Server

npx expo start

API Configuration

The app is configured to connect to the backend API:

• Expo Go on Physical Device: Update the API_URL in src/services/api.ts to your computer's local IP address (e.g., http://192.168.1.XXX:3000)
• Android Emulator: http://10.0.2.2:3000
• iOS Simulator: http://localhost:3000

To change the API endpoint, edit src/services/api.ts:

const API_URL = 'http://YOUR_BACKEND_IP:3000';

Key Dependencies

• react-native: Core framework
• @react-navigation/native: Navigation library
• @react-navigation/native-stack: Stack navigator
• axios: HTTP client for API calls
• @react-native-async-storage/async-storage: Secure local storage for auth tokens

Features Comparison with Web App

Feature	Web App	Mobile App
User Authentication	✅	✅
Dashboard	✅	✅
Event Management	✅	✅
Token Management	✅	✅
Shop System	✅	✅
Receipt System	✅	✅
Settings	✅	✅
Auto-refresh	✅	✅
Email Verification	✅	✅
Password Reset	✅	✅
Archived Events	✅	⚠️ Partial
Big Screen Mode	✅	❌ N/A

Development Notes

• The app uses TypeScript for type safety
• Auto-refresh is implemented for real-time updates (5-second interval)
• Pull-to-refresh available on all data screens
• AsyncStorage is used for secure token persistence
• All navigation is handled through React Navigation
• Modals are used for creating events, managing tokens, and purchases

Building for Production

Android

cd android
./gradlew assembleRelease

iOS

cd ios
xcodebuild -workspace AhaMobile.xcworkspace -scheme AhaMobile -configuration Release

Troubleshooting

Metro Bundler Issues

npm start -- --reset-cache

Android Build Issues

cd android
./gradlew clean
cd ..
npm run android

iOS Build Issues

cd ios
pod deintegrate
pod install
cd ..
npm run ios

Notes

• The mobile app provides the same functionality as the web frontend
• UI is optimized for mobile touch interactions
• Real-time updates keep data synchronized
• Secure token storage using AsyncStorage