NinaChat App

A React Native application featuring the fully functional NinaChat component with all its features including user onboarding, authentication, and chat functionality.

Features

• NinaChat Component: Complete chat interface with AI assistant
• User Onboarding: Full signup flow with location, interests, and profile setup
• Authentication: Login and signup with OTP verification
• Location Services: Google Maps integration for location selection
• Image Upload: Profile photo capture and selection
• API Integration: Complete backend integration for all features

Project Structure

NinaChatApp/
├── components/
│   ├── NinaChat/           # Main NinaChat component
│   ├── Header/             # App header component
│   ├── AiMessage/          # AI message display
│   ├── UserMessage/        # User message display
│   ├── PhoneNumberEntry/   # Phone number input
│   ├── OTPVerification/    # OTP verification
│   ├── Steps/              # Onboarding step components
│   └── utils/              # Utility functions
├── api/                    # API client and endpoints
├── screens/                # Success animation screens
├── assets/                 # Images and media files
└── utils/                  # General utilities

Installation

1. Install Dependencies:

   npm install

2. iOS Setup (if on macOS):

   cd ios && pod install

3. Android Setup:

   • Ensure Android Studio is installed
   • Set up Android SDK and emulator

Running the App

Android

npm run android

iOS

npm run ios

Start Metro Bundler

npm start

Usage

The app automatically loads the NinaChat component with the following props:

<NinaChat
  onCreateAccount={userData => console.log('Create account callback')}
  onLogin={() => console.log('Login callback')}
  onNavigateToOnboarding={userData =>
    console.log('Navigate to onboarding callback')
  }
  onNavigateToExplore={userData => console.log('Navigate to explore callback')}
/>

API Configuration

The app is configured to use the production API endpoint:

• Base URL: http://13.126.14.168
• Authentication: Bearer token based
• Endpoints: Signup, Login, Country codes, Location services

Dependencies

Core Dependencies

• React Native 0.81.0
• React 19.1.0
• TypeScript 5.8.3

Key Libraries

• @react-navigation/native - Navigation
• react-native-maps - Maps integration
• react-native-image-picker - Image selection
• @react-native-community/datetimepicker - Date picker
• axios - HTTP client
• react-native-mmkv - Storage
• react-native-toast-message - Toast notifications

Features Included

NinaChat Component

• ✅ Complete chat interface
• ✅ AI message handling
• ✅ User message display
• ✅ Onboarding flow
• ✅ Authentication flow
• ✅ Location selection
• ✅ Profile photo upload
• ✅ Form validation
• ✅ OTP verification
• ✅ Success animations

API Integration

• ✅ Signup API
• ✅ Login API
• ✅ Country codes API
• ✅ Location services
• ✅ Image upload

UI Components

• ✅ Responsive design
• ✅ Dark theme
• ✅ Custom animations
• ✅ Interactive maps
• ✅ Form inputs
• ✅ Image picker

Development

The project is set up with:

• TypeScript for type safety
• ESLint for code quality
• Prettier for code formatting
• Jest for testing

Notes

• The app is configured to work with the existing production API
• All assets and components are included
• The project is completely independent of the original investLuxury project
• Ready to run on both Android and iOS platforms

Troubleshooting

1. Metro bundler issues: Run npx react-native start --reset-cache
2. Android build issues: Clean and rebuild with cd android && ./gradlew clean && cd .. && npx react-native run-android
3. iOS build issues: Run cd ios && pod install && cd .. && npx react-native run-ios
4. TypeScript errors: Run npx tsc --noEmit to check for type errors