🕵️ Dr. Detective - Expo Mobile App

A beautiful, animated Expo React Native app for the Dr. Detective API (Akinator game). Features a detective character with dynamic expressions and smooth animations.

By NextgenX - Mobile Edition

🚀 Built with Expo SDK 54 (Latest)

✨ Features

• 🎭 Animated Detective Character with 7 different expressions
• 🌈 Gorgeous UI with gradients and smooth transitions
• 🎯 Dynamic Expressions that change based on game progress
• 📱 Fully Responsive mobile experience
• 🌍 Multi-Language Support (16 languages)
• 🎨 Multiple Themes (Characters, Animals, Objects)
• ⚡ Smooth Animations using React Native Reanimated
• 🔄 Real-time Progress Tracking
• 🎉 Victory Animations with character reveals

📱 Screenshots

Home Screen

• Detective character with "thinking" expression
• Language selector with flags
• Theme selector with emojis
• Animated start button

Game Screen

• Dynamic detective expressions:
  • 🤔 Thinking (0-40% progress)
  • 👀 Curious (40-60% progress)
  • ✨ Excited (60-80% progress)
  • 😎 Confident (80-100% progress)
  • 😕 Confused (after 20 questions)
  • 🎉 Victory (when guessed)
  • 😲 Shocked (when guess rejected)

Victory Screen

• Character image with details
• Accept/Reject buttons
• Play again functionality

🚀 Quick Start

Prerequisites

• Node.js 16+ installed
• Expo CLI installed globally
• Expo Go app on your mobile device
• Dr_DetectiveAPI deployed to Vercel (or running locally)

Installation

1. Navigate to project directory:

cd DrDetectiveExpo

2. Install dependencies:

npm install

3. Configure API URL (Optional - already set):

The API URL is configured in .env:

API_BASE_URL=https://dr-detective-api-ddgt.vercel.app/api

To change it, edit .env file and restart with npm start --clear

See ENV_SETUP.md for detailed configuration options.

4. Start the app:

npm start

5. Run on your device:

• Scan the QR code with Expo Go app (Android)
• Scan with Camera app (iOS)

🔧 API Configuration

Deploying to Vercel

1. Navigate to your API directory:

cd ../Dr_DetectiveAPI

2. Install Vercel CLI (if not already installed):

npm install -g vercel

3. Deploy:

vercel

4. Copy the deployment URL and update it in the Expo app:

// services/DrDetectiveAPI.js
const API_BASE_URL = 'https://your-deployment-url.vercel.app/api';

Local Testing

1. Start the Flask API:

cd ../Dr_DetectiveAPI
python api.py

2. Find your computer's IP:

# Linux/Mac
hostname -I | awk '{print $1}'

# Or check network settings
ip addr show | grep "inet "

3. Update API URL in Expo app:

const API_BASE_URL = 'http://YOUR_IP:5000/api';
// Example: 'http://192.168.1.100:5000/api'

📂 Project Structure

DrDetectiveExpo/
├── App.js                      # Main app with navigation
├── package.json                # Dependencies
├── app.json                    # Expo configuration
├── babel.config.js             # Babel configuration
│
├── services/
│   └── DrDetectiveAPI.js       # API service layer
│
├── components/
│   └── Detective.js            # Animated detective character
│
├── screens/
│   ├── HomeScreen.js           # Start screen
│   └── GameScreen.js           # Game/question screen
│
└── assets/                     # Images and icons

🎨 Detective Expressions

The detective character dynamically changes expressions based on the game state:

Expression	Trigger	Eyes	Icon
Thinking	Start/Low progress	🤔	🔍
Curious	40-60% progress	👀	❓
Excited	60-80% progress	✨	😃
Confident	80%+ progress	😎	💡
Confused	20+ questions	😕	❔
Victory	Correct guess	🎉	🏆
Shocked	Guess rejected	😲	‼️

🎮 How to Play

1. Start the app and select your preferences:

   • Choose a theme (Characters, Animals, or Objects)
   • Choose a language

2. Think of a character (or animal/object)

3. Answer the detective's questions:

   • ✅ Yes
   • ❌ No
   • 🤷 Don't Know
   • 🤔 Probably
   • 😕 Probably Not

4. Watch the detective get more confident as progress increases

5. When the detective makes a guess:

   • Accept if correct
   • Reject to continue playing

🛠️ Development

Running in Development

# Start Expo development server
npm start

# Start on Android emulator
npm run android

# Start on iOS simulator (Mac only)
npm run ios

# Start in web browser
npm run web

Key Components

Detective Component (components/Detective.js):

• Animated character with breathing effect
• Dynamic color gradients based on expression
• Glow animation
• Progress indicator
• Bounce effect on expression changes

API Service (services/DrDetectiveAPI.js):

• Singleton API client
• Automatic session management
• Error handling
• Connection testing
• Support for all API endpoints

Home Screen (screens/HomeScreen.js):

• Language and theme selection
• Entrance animations
• API connection testing
• Error handling with user feedback

Game Screen (screens/GameScreen.js):

• Question display with animations
• Answer buttons with gradients
• Progress tracking
• Victory screen with character info
• Back navigation

🌍 Supported Languages

• 🇬🇧 English (en)
• 🇪🇸 Spanish (es)
• 🇫🇷 French (fr)
• 🇩🇪 German (de)
• 🇮🇹 Italian (it)
• 🇯🇵 Japanese (jp)
• 🇰🇷 Korean (kr)
• 🇨🇳 Chinese (cn)
• 🇷🇺 Russian (ru)
• 🇹🇷 Turkish (tr)
• 🇵🇹 Portuguese (pt)
• 🇳🇱 Dutch (nl)
• 🇵🇱 Polish (pl)
• 🇸🇦 Arabic (ar)
• 🇮🇱 Hebrew (il)
• 🇮🇩 Indonesian (id)

🎯 Themes

• 👤 Characters - Famous people, fictional characters
• 🐾 Animals - Real and fictional animals
• 📦 Objects - Various objects and things

🐛 Troubleshooting

"Network request failed" error

Problem: App can't connect to API

Solutions:

1. Check API URL in services/DrDetectiveAPI.js
2. Ensure API is running (check with browser)
3. Use IP address instead of localhost for physical devices
4. Check firewall settings on your computer

"Could not start game" error

Problem: API returns error when starting game

Solutions:

1. Check API logs for errors
2. Verify Vercel deployment is working
3. Test API endpoint in browser: https://your-api.vercel.app/
4. Check network connectivity

Detective not animating

Problem: Character appears static

Solutions:

1. Ensure react-native-reanimated is installed
2. Check babel.config.js includes reanimated plugin
3. Restart Expo with npm start --clear

Expo Go won't connect

Problem: QR code scan doesn't work

Solutions:

1. Ensure phone and computer are on same WiFi
2. Try tunnel mode: npm start --tunnel
3. Update Expo Go app to latest version

📦 Building for Production

Android APK

# Install EAS CLI
npm install -g eas-cli

# Configure EAS
eas build:configure

# Build APK
eas build --platform android --profile preview

iOS IPA (requires Mac + Apple Developer account)

# Build for iOS
eas build --platform ios

🎨 Customization

Change Theme Colors

Edit gradients in screens/components:

// Example: Change background gradient
<LinearGradient
  colors={['#YOUR_COLOR_1', '#YOUR_COLOR_2', '#YOUR_COLOR_3']}
  style={styles.container}
/>

Add New Detective Expressions

Add to components/Detective.js:

case 'your_expression':
  return {
    eyes: '😊',
    mouth: '🎉',
    color1: '#FF6B6B',
    color2: '#4ECDC4'
  };

Modify Animations

Adjust timing in components:

Animated.timing(scaleAnim, {
  toValue: 1.05,
  duration: 2000,  // Change duration
  useNativeDriver: true,
})

📄 License

MIT License

🙏 Credits

• API: Dr_DetectiveAPI (Flask wrapper for akinator.py)
• Base Library: akinator.py by Omkaar
• Framework: Expo / React Native
• Animations: React Native Reanimated
• Navigation: React Navigation
• Original Game: Akinator.com

🤝 Contributing

Contributions welcome! Please feel free to submit a Pull Request.

📧 Support

Having issues? Please check:

1. API is running and accessible
2. API URL is correctly configured
3. All dependencies are installed
4. Expo Go app is up to date

---

Made with ❤️ by NextgenX

Enjoy playing Dr. Detective! 🕵️‍♂️🔍