QChat - WhatsApp-style Chat App

A production-ready frontend-only chat application built with Expo SDK 54 and expo-router, featuring Sri Lankan flag-inspired theming and AI-powered message assistance.

Features

• 🎨 Sri Lankan Flag Theme: Beautiful color palette inspired by the Sri Lankan flag
• 🤖 AI Message Assistant: Smart draft generation, translation, and tone adjustment
• 📱 WhatsApp-like UI: Familiar chat interface with bubbles, status indicators, and more
• 🌙 Dark/Light Mode: Automatic theme switching with user preference persistence
• ⚡ Optimized Performance: Highly optimized FlatLists for smooth scrolling
• 🔍 Smart Search: Debounced search with recent history
• 📞 Calls Integration: Voice and video call history
• 🌐 Explorer: Discover channels, contacts, and communities

Tech Stack

• Expo SDK 54 with expo-router for navigation
• TypeScript for type safety
• React Native Reanimated for smooth animations
• AsyncStorage for data persistence
• Mock APIs for realistic data simulation

Getting Started

# Install dependencies
npm install

# Start the development server
npm run start

# Run on iOS
npm run ios

# Run on Android
npm run android

# Run on Web
npm run web

Project Structure

app/
  (tabs)/           # Bottom tab navigation
    index.tsx       # Chats screen
    explorer.tsx    # Discovery screen
    calls.tsx       # Call history
    more.tsx        # Profile & settings
  chat/[chatId].tsx # Individual chat screen
  settings.tsx      # Settings modal
components/         # Reusable UI components
lib/               # Utilities, types, and mock data
  theme/           # Theme provider and colors
  api.ts           # Mock API functions
  mockData.ts      # Seed data
  types.ts         # TypeScript definitions

Color Palette

The app uses a Sri Lankan flag-inspired color scheme:

• Maroon #8B1538 - Primary brand color
• Gold #F4C430 - Accent and highlights
• Green #0B7A3E - Success states
• Orange #FF6F00 - Warnings
• Badge Yellow rgb(254,198,1) - Unread indicators

AI Features

• Summarize: Get quick summaries of conversations
• Draft Reply: AI-generated response suggestions
• Translate: Multi-language translation (Sinhala, Tamil, English)
• Change Tone: Adjust message tone (formal, casual, friendly)
• Extract Tasks: Identify action items from conversations

Performance Optimizations

• Fixed-height FlatList items with getItemLayout
• Memoized components with React.memo
• Stable callback references with useCallback
• Optimized rendering with windowSize and initialNumToRender
• Debounced search to reduce API calls

Bundle Configuration

• iOS Bundle ID: lk.qchat.com
• Android Package: lk.qchat.com
• App Name: QChat

License

MIT License - Built for demonstration purposes.