Zolara Mobile

Cross-Platform Mobile App for Real-Time Communication

🏠 Back to Main

• Nguyễn Văn Minh
• Nguyễn Trung Nguyên

Zolara Mobile is a feature-rich, cross-platform mobile application built with Expo and React Native. It provides seamless real-time messaging, voice/video calling, AI chatbot integration, and social networking features for iOS, Android, and Web platforms.

• 💬 Real-time Messaging - Instant chat with friends and groups
• 📞 Voice & Video Calls - High-quality WebRTC-based calling
• 🤖 AI Chatbot - Intelligent AI assistant for conversations
• 👥 Group Chats - Create and manage group conversations
• 👫 Friend Management - Send friend requests, manage contacts
• 📸 Media Sharing - Images, videos, documents, and voice messages
• 🔔 Push Notifications - Real-time notification system
• 🌙 Dark Mode - Full theme customization support
• 📱 Cross-Platform - iOS, Android, and Web support
• 🎵 Voice Messages - Record and send audio messages
• 📹 Video Messages - Share video clips
• 📄 Document Sharing - Send and receive files
• 🔐 Secure Authentication - JWT-based auth with secure storage
• 📊 User Status - Online/offline indicators
• 🔍 Contact Sync - Sync phone contacts
• 🎨 Customizable UI - Personalize your experience
• 📰 News Feed - Social posts and updates

• Expo 54.0.25 - Universal React framework
• React 19.1.0 - UI library
• React Native 0.81.5 - Cross-platform mobile framework
• TypeScript 5.9.2 - Type-safe JavaScript
• Expo Router 6.0.15 - File-based routing

• @react-navigation/native 7.0.14 - Navigation library
• @react-navigation/bottom-tabs 7.2.0 - Bottom tab navigation
• expo-router 6.0.15 - File-based navigation

• NativeWind 4.1.23 - Tailwind CSS for React Native
• Tailwind CSS 3.4.17 - Utility-first CSS framework
• GlueStack UI - Comprehensive component library:
  • @gluestack-ui/button 1.0.8
  • @gluestack-ui/input 0.1.32
  • @gluestack-ui/avatar 0.1.18
  • @gluestack-ui/toast 1.0.9
  • @gluestack-ui/menu 0.2.43
  • @gluestack-ui/alert 0.1.16
  • @gluestack-ui/actionsheet 0.2.46
  • And more...
• @rneui/themed 4.0.0-rc.8 - React Native Elements
• lucide-react-native 0.469.0 - Icon library
• @expo/vector-icons 15.0.3 - Vector icons
• @legendapp/motion 2.4.0 - Animations

• Zustand 5.0.3 - Lightweight state management
• @react-native-community/netinfo 11.4.1 - Network status

• Socket.IO Client 4.8.1 - WebSocket client
• React Native WebRTC 124.0.5 - Video/voice calling
• @config-plugins/react-native-webrtc 10.0.0 - WebRTC config plugin

• expo-image 3.0.10 - Optimized image component
• expo-image-picker 17.0.8 - Pick images from device
• expo-camera 17.0.9 - Camera access
• expo-av 16.0.7 - Audio/video playback
• expo-video 3.0.14 - Video player
• expo-video-thumbnails 10.0.7 - Generate video thumbnails
• expo-document-picker 14.0.7 - Document picker
• expo-file-system 19.0.19 - File system access
• react-native-image-viewing 0.2.2 - Image viewer
• react-native-qrcode-svg 6.3.15 - QR code generation

• expo-contacts 15.0.10 - Access device contacts
• expo-notifications 0.32.13 - Push notifications
• expo-secure-store 15.0.7 - Secure storage
• expo-haptics 15.0.7 - Haptic feedback
• expo-linking 8.0.9 - Deep linking
• expo-sharing 14.0.7 - Share content
• expo-web-browser 15.0.9 - In-app browser
• expo-splash-screen 31.0.11 - Splash screen

• expo-background-fetch 14.0.8 - Background fetch
• expo-task-manager 14.0.8 - Task scheduling

• react-native-gesture-handler 2.28.0 - Gesture system
• react-native-reanimated 4.1.1 - Advanced animations
• react-native-safe-area-context 5.6.0 - Safe area handling
• react-native-screens 4.16.0 - Native screen management
• react-native-svg 15.12.1 - SVG support
• expo-blur 15.0.7 - Blur effects
• expo-linear-gradient 15.0.7 - Gradient components

• react-native-date-picker 5.0.9 - Date picker
• @react-native-community/datetimepicker 8.4.4 - DateTime picker
• react-native-modal-datetime-picker 18.0.0 - Modal date picker
• react-native-otp-entry 1.8.5 - OTP input
• rn-emoji-keyboard 1.7.0 - Emoji keyboard
• react-native-emoji-selector 0.2.0 - Emoji selector

• Axios 1.7.9 - HTTP client
• @react-native-community/netinfo 11.4.1 - Network info

• lodash 4.17.21 - Utility functions
• clsx 2.1.1 - Conditional classnames
• uuid 11.1.0 - UUID generation
• react-native-uuid 2.0.3 - UUID for React Native
• react-native-restart 0.0.27 - App restart
• react-native-markdown-display 7.0.2 - Markdown renderer
• react-native-toast-message 2.3.0 - Toast notifications

• Jest 29.2.1 - Testing framework
• jest-expo 54.0.13 - Expo Jest preset
• Husky 9.1.7 - Git hooks
• lint-staged 15.3.0 - Lint staged files
• Prettier 3.4.2 - Code formatter
• cross-env 7.0.3 - Cross-platform env variables

zolara-mobile/
├── app/                          # Expo Router screens
│   ├── _layout.tsx              # Root layout
│   ├── index.tsx                # Landing page
│   ├── +not-found.tsx           # 404 page
│   │
│   └── (screens)/               # Main screens
│       ├── _layout.tsx
│       │
│       ├── (auth)/              # Authentication flows
│       │   ├── welcome.tsx
│       │   ├── login.email.tsx
│       │   ├── signup.name.tsx
│       │   ├── signup.email.tsx
│       │   ├── signup.detail.tsx
│       │   ├── verify.tsx
│       │   ├── login.success.tsx
│       │   ├── confirm.password.tsx
│       │   └── forgot/
│       │
│       ├── (tabs)/              # Main tab navigation
│       │   ├── _layout.tsx
│       │   ├── index.tsx        # Home/Chats
│       │   ├── contacts/        # Contacts tab
│       │   ├── discover/        # Discover tab
│       │   ├── news/            # News feed
│       │   └── info/            # Profile/Settings
│       │
│       └── (user)/              # User-specific screens
│           ├── chat/            # Chat screens
│           ├── chatbot/         # AI chatbot
│           ├── friend/          # Friend management
│           ├── group/           # Group screens
│           ├── info/            # User info
│           └── settings/        # Settings
│
├── src/
│   ├── components/              # Reusable components
│   │   ├── ChatItem.tsx
│   │   ├── ConversationList.tsx
│   │   ├── CustomToast.tsx
│   │   ├── GroupDetailsModal.tsx
│   │   ├── MessageForwardModal.tsx
│   │   ├── UserStatusIndicator.tsx
│   │   │
│   │   ├── chat/               # Chat components
│   │   │   ├── chat.header.tsx
│   │   │   ├── message.bubble.tsx
│   │   │   ├── message.actions.tsx
│   │   │   ├── media.preview.tsx
│   │   │   ├── media.grid.tsx
│   │   │   ├── audio.message.tsx
│   │   │   ├── video.message.tsx
│   │   │   ├── voice.recorder.tsx
│   │   │   ├── image.viewer.tsx
│   │   │   └── document.preview.tsx
│   │   │
│   │   ├── customize/          # Customization components
│   │   ├── post/               # Post components
│   │   └── ui/                 # UI components
│   │
│   ├── services/               # API services
│   │   ├── agent-service.ts
│   │   ├── conversation-service.ts
│   │   ├── friend-service.ts
│   │   ├── group-service.ts
│   │   ├── message-service.ts
│   │   ├── notification-service.ts
│   │   ├── post-service.ts
│   │   ├── user-service.ts
│   │   └── call/              # Call services
│   │
│   ├── store/                  # Zustand stores
│   │   ├── authStore.ts
│   │   ├── chatStore.ts
│   │   ├── conversationsStore.ts
│   │   ├── agentStore.ts
│   │   └── userStatusStore.ts
│   │
│   ├── hooks/                  # Custom hooks
│   │   ├── useAuth.ts
│   │   ├── useSocket.ts
│   │   ├── useColorScheme.ts
│   │   ├── useThemeColor.ts
│   │   └── userNetworkStatus.ts
│   │
│   ├── providers/              # Context providers
│   │   └── SocketProvider.tsx
│   │
│   ├── lib/                    # Libraries
│   │   ├── axios.ts
│   │   └── socket.ts
│   │
│   ├── tasks/                  # Background tasks
│   │   └── background-tasks.ts
│   │
│   ├── utils/                  # Utilities
│   │   ├── constants.ts
│   │   └── convertHelper.ts
│   │
│   ├── types/                  # TypeScript types
│   │   └── index.ts
│   │
│   ├── constants/              # Constants
│   │   └── Colors.ts
│   │
│   ├── assets/                 # Static assets
│   │   ├── images/
│   │   │   ├── brand/         # Logo and branding
│   │   │   └── default/       # Default images
│   │   ├── fonts/             # Custom fonts
│   │   ├── sounds/            # Sound files
│   │   └── svgs/              # SVG icons
│   │
│   └── global.css             # Global styles
│
├── assets/                     # Public assets
│   └── sounds/
│
├── app.json                    # Expo configuration
├── babel.config.js            # Babel configuration
├── metro.config.js            # Metro bundler config
├── tailwind.config.js         # Tailwind CSS config
├── tsconfig.json              # TypeScript config
├── package.json               # Dependencies
└── .env                       # Environment variables

• Node.js 18.x or higher
• npm or yarn or pnpm
• Expo CLI (installed globally)
• iOS Simulator (Mac only) or Android Studio
• Expo Go app (for physical device testing)

Create a .env file in the root directory:

EXPO_PUBLIC_API_URL=http://localhost:3000
EXPO_PUBLIC_SOCKET_URL=ws://localhost:3000

For production:

EXPO_PUBLIC_API_URL=https://your-api-domain.com
EXPO_PUBLIC_SOCKET_URL=wss://your-api-domain.com

1. Install dependencies

   npm install

2. Start the development server

   npm start

npm run ios

npm run android

npm run web

1. Install Expo Go app from App Store or Play Store
2. Scan the QR code from the terminal

1. Welcome screen with logo and branding
2. Email-based login/signup
3. OTP verification via email
4. Profile setup with name and details
5. Secure JWT token storage

• Home/Chats: Recent conversations and messages
• Contacts: Phone contacts and Zolara users
• Discover: Find new friends and groups
• News: Social feed and posts
• Profile: User profile and settings

• Send text messages
• Share images, videos, documents
• Record and send voice messages
• React to messages with emojis
• Forward messages
• Delete messages
• Message read receipts
• Typing indicators

• Voice calls with WebRTC
• Video calls with camera switching
• Mute/unmute audio
• Turn camera on/off
• Call history

• Create groups with multiple members
• Group chat with all features
• Add/remove members
• Change group name and avatar
• Group admin controls

• Natural language conversations
• Context-aware responses
• Powered by Google Generative AI

The app is configured with:

• Custom splash screen
• App icons for all platforms
• Required permissions (Camera, Microphone, Contacts, etc.)
• Background modes for calling
• Push notification settings
• Deep linking support

Strict TypeScript configuration with:

• Path aliases for imports
• Type checking enabled
• Expo types included

The app uses NativeWind (Tailwind CSS for React Native) for styling:

<View className="flex-1 bg-white dark:bg-gray-900">
  <Text className="text-lg font-bold text-gray-900 dark:text-white">
    Hello Zolara
  </Text>
</View>

• Light and dark mode
• Auto-detect system theme
• Persistent theme preference
• Custom color schemes

npm test

npm run lint

npm run build:ios

npm run build:android

npm run build

Push notifications are handled with Expo Notifications:

• Token registration on app launch
• Local and remote notifications
• Custom notification sounds
• Notification interactions
• Background notification handling

• Expo Image for optimized loading
• Image picker for gallery access
• Camera integration
• Image viewing with zoom and swipe

• Video player with controls
• Video recording
• Thumbnail generation
• Video sharing

• Voice message recording
• Audio playback
• Background audio support

The app handles offline scenarios:

• Network status detection
• Offline message queue
• Auto-retry failed requests
• Cached data display

• JWT token-based authentication
• Secure storage with Expo SecureStore
• Encrypted message transmission
• Biometric authentication support (optional)

Using Zustand for lightweight state management:

// authStore.ts
export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  isAuthenticated: false,
  login: (user) => set({ user, isAuthenticated: true }),
  logout: () => set({ user: null, isAuthenticated: false }),
}));

Real-time features powered by Socket.IO:

• Auto-connect on app launch
• Reconnection handling
• Event listeners for messages, calls, status updates
• Emit events for sending messages, typing indicators

import { useAuth } from '@/hooks/useAuth';
import { ChatItem } from '@/components/ChatItem';
import { authStore } from '@/store/authStore';

Press r in the terminal to reload the app during development.

Use React Native Debugger or Expo Dev Tools for debugging.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
  },
});

• Expo account
• Apple Developer account (for iOS)
• Google Play Developer account (for Android)

Follow Expo's guide for submitting to:

• Apple App Store
• Google Play Store

Metro bundler cache issues:

expo start -c

Node modules issues:

rm -rf node_modules
npm install

iOS build issues:

cd ios
pod install
cd ..

This project is licensed under the MIT License.

• Zolara Server - Backend API server
• Zolara Admin - Admin dashboard