
Rachma Mobile
January 1, 2024
GitHubReact NativeExpoTypeScriptMobileGaming
Rachma Mobile
A vibrant, cartoon-themed mobile game application that brings classic card games and party games to your phone. Built with React Native and Expo, Rachma Mobile combines playful design with powerful features for tracking game scores, managing players, and analyzing statistics.
🎮 Features
Card Games
- Belote - Full score tracking with team management
- Coming Soon: Ramy, Chkobba, Trix
Party Games
- Spin Wheel - Random player selector with customizable options
- Coming Soon: Chess, Undercover, Werewolf
Player Management
- Create and manage player profiles with custom avatars
- Profile photos with camera integration
- Emoji or photo avatars
- Duplicate name prevention
Statistics & History
- Comprehensive player statistics and performance tracking
- Team performance analytics
- Match history with filters by game type and players
- Victory photos to capture winning moments
- Leaderboards for competitive tracking
Data Management
- Export/Import data as JSON
- Image backup with Base64 encoding
- Storage size monitoring (5MB warning threshold)
- Automatic image compression (800px, 70% quality)
- Clear all data option
🎨 Design Philosophy
The app features a vibrant cartoon aesthetic with:
- Bold colors and thick borders (4-5px)
- 3D button effects with shadow layers
- Animated background with floating clouds
- Smooth transitions and haptic feedback
- Consistent playful theme throughout
🛠️ Technical Stack
- React Native 0.81.5 - Cross-platform mobile framework
- Expo 54 - Development and build tooling
- TypeScript 5.3 - Type-safe development
- React Navigation 7 - Screen navigation
- React Native Reanimated 4.1 - Smooth animations
- Expo Haptics - Tactile feedback
- AsyncStorage - Data persistence
- NativeWind - Tailwind CSS for React Native
🏗️ Architecture
The app follows a component-based architecture with centralized services:
- Storage Service - Profile management, match history, statistics calculation
- Haptics Service - Global haptic feedback control with persistent state
- Reusable Components - CartoonButton, GameContainer, Modals, and more
⚡ Performance Optimizations
- FlatList for all scrollable lists with pagination support
- Stats caching - Recalculates only when match count changes
- Image compression - Automatic resize to 800px width, 70% quality
- Memory management - Optimized cloud animations
- Proper animation cleanup on unmount
🚀 Key Achievements
- Built a complete game tracking system with statistics
- Implemented smooth animations and haptic feedback
- Created a reusable component library with cartoon aesthetic
- Optimized performance for smooth 60fps animations
- Designed intuitive UX for all age groups
Built with ❤️ using React Native & Expo