{"id":25415407,"url":"https://github.com/isharax9/chatapp","last_synced_at":"2026-02-28T16:32:26.903Z","repository":{"id":203157066,"uuid":"699891116","full_name":"isharax9/ChatApp","owner":"isharax9","description":"An advanced real-time mobile chat application, built using the REACT NATIVE framework, seamlessly integrates multiple functionalities and features while harnessing the power of Mongo Db, forming a robust MERN STACK-based solution. Please read the readme file and get start. Also  if you find this project useful, consider giving it a star ⭐️.","archived":false,"fork":false,"pushed_at":"2025-01-17T17:24:47.000Z","size":3339,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-17T18:32:24.647Z","etag":null,"topics":["chatapp","expo-go","gradle","mern-project","mern-stack-app","mobile-app","mongodb-atlas","node","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isharax9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-03T14:42:31.000Z","updated_at":"2025-01-17T17:24:42.000Z","dependencies_parsed_at":"2024-07-06T17:22:55.418Z","dependency_job_id":"030cd444-28a8-4437-873c-07fbd4119950","html_url":"https://github.com/isharax9/ChatApp","commit_stats":null,"previous_names":["isharax9/chat_app","isharax9/chatapp"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isharax9%2FChatApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isharax9%2FChatApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isharax9%2FChatApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isharax9%2FChatApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isharax9","download_url":"https://codeload.github.com/isharax9/ChatApp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239151581,"owners_count":19590362,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatapp","expo-go","gradle","mern-project","mern-stack-app","mobile-app","mongodb-atlas","node","react-native"],"created_at":"2025-02-16T15:34:38.455Z","updated_at":"2025-10-31T08:31:38.461Z","avatar_url":"https://github.com/isharax9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 💬 Cross Platform ChatApp\n\n[![React Native](https://img.shields.io/badge/React%20Native-0.74.5-blue.svg)](https://reactnative.dev/)\n[![Expo](https://img.shields.io/badge/Expo-52.0.11-black.svg)](https://expo.dev/)\n[![Node.js](https://img.shields.io/badge/Node.js-18+-green.svg)](https://nodejs.org/)\n[![Express](https://img.shields.io/badge/Express-4.21.2-lightgrey.svg)](https://expressjs.com/)\n[![MongoDB](https://img.shields.io/badge/MongoDB-Atlas-green.svg)](https://www.mongodb.com/atlas)\n[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n\n*A modern, cross-platform real-time chat application built with React Native and Express.js*\n\n[Features](#-features) • [Quick Start](#-quick-start) • [API Documentation](#-api-documentation) • [Screenshots](#-screenshots) • [Contributing](#-contributing)\n\n\u003c/div\u003e\n\n---\n\n## 📋 Table of Contents\n\n- [🚀 Introduction](#-introduction)\n- [✨ Features](#-features)\n- [🏗️ Architecture](#️-architecture)\n- [📋 Prerequisites](#-prerequisites)\n- [🚀 Quick Start](#-quick-start)\n- [⚙️ Installation Guide](#️-installation-guide)\n- [🗄️ Database Setup](#️-database-setup)\n- [📱 Running the Application](#-running-the-application)\n- [🔌 API Documentation](#-api-documentation)\n- [📱 App Structure](#-app-structure)\n- [📸 Screenshots](#-screenshots)\n- [🛠️ Troubleshooting](#️-troubleshooting)\n- [🗺️ Roadmap](#️-roadmap)\n- [🤝 Contributing](#-contributing)\n- [📄 License](#-license)\n- [⭐ Support](#-support)\n\n---\n\n## 🚀 Introduction\n\n**ChatApp** is a modern, cross-platform mobile chat application that brings people together through seamless real-time communication. Built with cutting-edge technologies like React Native and Express.js, this app provides a comprehensive social messaging experience with friend management, multimedia sharing, and intuitive user interactions.\n\n### 🎯 What makes it special?\n- **Cross-Platform**: Works seamlessly on both iOS and Android\n- **Real-time Communication**: Instant messaging with live updates\n- **Modern UI/UX**: Clean, intuitive interface designed for modern mobile users\n- **Social Features**: Friend requests, user discovery, and social interactions\n- **Multimedia Support**: Text, emojis, and image sharing capabilities\n- **Secure Authentication**: JWT-based authentication system\n\n## ✨ Features\n\n### 👤 User Management\n- **🔐 Secure Registration**: Create accounts with email, password, and profile picture\n- **🔑 JWT Authentication**: Secure login system with token-based authentication\n- **👥 User Discovery**: Browse and discover other users on the platform\n- **🖼️ Profile Pictures**: Upload and display profile images via URL\n\n### 🤝 Social Features\n- **📬 Friend Requests**: Send, receive, accept, and decline friend requests\n- **👫 Friend Management**: Manage your friend list and connections\n- **🔍 User Search**: Find and connect with other users\n- **📊 Friend Status**: Real-time updates on friendship status\n\n### 💬 Real-Time Messaging\n- **⚡ Instant Chat**: Real-time message exchange between friends\n- **📝 Text Messages**: Send and receive text messages instantly\n- **😊 Emoji Support**: Express yourself with a wide range of emojis\n- **🖼️ Image Sharing**: Share images in conversations\n- **⏰ Message Timestamps**: See when messages were sent and received\n\n### 📱 User Interface\n- **🎨 Modern Design**: Clean, intuitive mobile-first interface\n- **🔄 Real-time Updates**: Live message updates without refresh\n- **📋 Chat History**: Browse previous conversations and messages\n- **🏠 Home Dashboard**: Overview of all users and friend requests\n- **💬 Chat List**: Quick access to all ongoing conversations\n\n### 🔧 Technical Features\n- **📱 Cross-Platform**: Runs on both iOS and Android devices\n- **☁️ Cloud Database**: MongoDB Atlas for reliable data storage\n- **🔄 State Management**: Efficient React Context for app state\n- **📐 Responsive Design**: Optimized for various screen sizes\n- **🛡️ Secure API**: Protected endpoints with authentication middleware\n\n## 🏗️ Architecture\n\n### System Overview\n```\n┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐\n│   React Native  │    │   Express.js    │    │  MongoDB Atlas  │\n│   Frontend      │◄──►│   Backend API   │◄──►│   Database      │\n│   (Expo)        │    │   (Node.js)     │    │   (Cloud)       │\n└─────────────────┘    └─────────────────┘    └─────────────────┘\n```\n\n### Tech Stack\n\n#### Frontend (Mobile App)\n- **Framework**: React Native 0.74.5\n- **Platform**: Expo 52.0.11\n- **Navigation**: React Navigation 6.x\n- **State Management**: React Context API\n- **Authentication**: JWT with AsyncStorage\n- **Image Handling**: Expo Image Picker\n- **HTTP Client**: Axios\n\n#### Backend (API Server)\n- **Runtime**: Node.js 18+\n- **Framework**: Express.js 4.21.2\n- **Database ODM**: Mongoose 8.9.5\n- **Authentication**: JWT + Passport.js\n- **File Upload**: Multer 2.0.2\n- **CORS**: Cross-Origin Resource Sharing enabled\n\n#### Database \u0026 Storage\n- **Database**: MongoDB Atlas (Cloud)\n- **Image Storage**: Local file system (expandable to cloud storage)\n- **Session Management**: JWT tokens\n\n#### Development \u0026 Deployment\n- **Package Manager**: Yarn\n- **Process Manager**: Nodemon (development)\n- **Version Control**: Git\n- **Mobile Testing**: Expo Go app\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed on your development environment:\n\n### System Requirements\n- **Node.js** (version 18 or higher) - [Download](https://nodejs.org/)\n- **Yarn** package manager - [Installation Guide](https://yarnpkg.com/getting-started/install)\n- **Git** for version control - [Download](https://git-scm.com/)\n\n### Development Tools\n- **Expo CLI** - Install globally: `npm install -g @expo/cli`\n- **Code Editor** - VS Code recommended\n- **Mobile Device** with Expo Go app installed\n  - [iOS App Store](https://apps.apple.com/app/expo-go/id982107779)\n  - [Google Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent)\n\n### Cloud Services\n- **MongoDB Atlas Account** - [Sign up free](https://www.mongodb.com/cloud/atlas)\n- **Active Internet Connection** for database and real-time features\n\n### Optional Tools\n- **Android Studio** (for Android development)\n- **Xcode** (for iOS development on macOS)\n- **Postman** or similar API testing tool\n\n## 🚀 Quick Start\n\nGet up and running in less than 5 minutes:\n\n```bash\n# 1. Clone the repository\ngit clone https://github.com/isharax9/ChatApp.git\ncd ChatApp\n\n# 2. Install frontend dependencies\nyarn install\n\n# 3. Install backend dependencies\ncd api\nyarn install\n\n# 4. Set up your MongoDB Atlas connection (see Database Setup section)\n\n# 5. Start the backend server\nyarn start\n\n# 6. In a new terminal, start the frontend\ncd ..\nnpx expo start\n```\n\n## ⚙️ Installation Guide\n\n### Step 1: Clone the Repository\n\nChoose one of the following methods:\n\n**Method 1: Using Git (Recommended)**\n```bash\ngit clone https://github.com/isharax9/ChatApp.git\ncd ChatApp\n```\n\n**Method 2: Download ZIP**\n- Download the code as a ZIP file from the GitHub repository\n- Extract the ZIP file to your desired location\n- Navigate to the project folder\n\n### Step 2: Frontend Dependencies Installation\n\nOpen your first terminal in the project root directory:\n\n```bash\n# Navigate to project location\ncd your_project_location\n\n# Install Expo modules\nnpx install-expo-modules@latest\n\n# Install main dependencies\nyarn add react-native react-native-screens react-native-safe-area-context react-native-emoji-selector jsonwebtoken jwt-decode\n\n# Install navigation dependencies\nyarn add @react-navigation/native\nyarn add @react-navigation/native-stack\n\n# Install Expo-specific packages\nnpx expo install @react-native-async-storage/async-storage\nnpx expo install react-native-screens react-native-safe-area-context expo-image-picker\n\n# Install additional packages\nnpm install cors\n```\n\n### Step 3: Backend Dependencies Installation\n\nOpen your second terminal and navigate to the API directory:\n\n```bash\n# Navigate to backend directory\ncd your_project_location\ncd api\n\n# Install backend dependencies\nyarn add express cors body-parser mongoose multer nodemon passport passport-local jsonwebtoken jwt-decode axios\n```\n\n### 📦 Complete Dependencies List\n\n#### Frontend Dependencies\n```json\n{\n  \"@react-native-async-storage/async-storage\": \"1.23.1\",\n  \"@react-navigation/native\": \"^6.1.8\",\n  \"@react-navigation/native-stack\": \"^6.9.14\",\n  \"axios\": \"^1.8.2\",\n  \"cors\": \"^2.8.5\",\n  \"expo\": \"^52.0.11\",\n  \"expo-image-picker\": \"~15.0.7\",\n  \"expo-status-bar\": \"~1.12.1\",\n  \"jsonwebtoken\": \"^9.0.2\",\n  \"jwt-decode\": \"^3.1.2\",\n  \"react\": \"18.2.0\",\n  \"react-native\": \"0.74.5\",\n  \"react-native-emoji-selector\": \"^0.2.0\",\n  \"react-native-safe-area-context\": \"4.10.5\",\n  \"react-native-screens\": \"3.31.1\"\n}\n```\n\n#### Backend Dependencies\n```json\n{\n  \"express\": \"^4.21.2\",\n  \"cors\": \"^2.8.5\",\n  \"body-parser\": \"^1.20.2\",\n  \"mongoose\": \"^8.9.5\",\n  \"multer\": \"^2.0.2\",\n  \"nodemon\": \"^3.0.1\",\n  \"passport\": \"^0.6.0\",\n  \"passport-local\": \"^1.0.0\",\n  \"jsonwebtoken\": \"^9.0.0\",\n  \"axios\": \"^1.8.2\"\n}\n```\n\n## 🗄️ Database Setup\n\n### Setting Up MongoDB Atlas and Remote Database Access\n\nThis comprehensive guide will walk you through setting up MongoDB Atlas, a cloud-based database service, for your ChatApp project.\n\n#### 📚 Table of Contents\n- [Create MongoDB Atlas Account](#create-a-mongodb-atlas-account)\n- [Login to Your Account](#log-in-to-your-mongodb-atlas-account)\n- [Create New Project](#create-a-new-project)\n- [Build a Cluster](#build-a-cluster)\n- [Configure Network Access](#network-access)\n- [Set Up Database Access](#database-access)\n- [Review \u0026 Deploy](#review--deploy)\n- [Connect to Your Cluster](#connect-to-your-cluster)\n- [Configure Application](#start-using-your-remote-database)\n\n### Create a MongoDB Atlas Account\n\n1. **Visit MongoDB Atlas**: Go to [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)\n2. **Sign Up**: Click the \"Get started free\" button\n3. **Complete Registration**: Follow the registration process with your email and password\n4. **Verify Email**: Check your email for verification link and activate your account\n\n### Log in to Your MongoDB Atlas Account\n\nUse the credentials you created to access your MongoDB Atlas dashboard.\n\n### Create a New Project\n\n1. **Dashboard**: After logging in, you'll see the project dashboard\n2. **New Project**: Click \"Create a New Project\" \n3. **Project Name**: Give your project a meaningful name (e.g., \"ChatApp-Production\")\n4. **Add Members**: Optionally add team members if working collaboratively\n\n### Build a Cluster\n\n1. **Create Cluster**: In your project, click \"Build a Cluster\"\n2. **Choose Tier**: \n   - **Free Tier (M0)**: Perfect for development and testing\n   - **Paid Tiers**: For production with more storage and features\n3. **Cloud Provider**: Choose your preferred provider:\n   - **AWS** (recommended for global coverage)\n   - **Google Cloud Platform**\n   - **Microsoft Azure**\n4. **Region**: Select the region closest to your users\n5. **Cluster Name**: Give your cluster a descriptive name\n\n#### Cluster Configuration Options:\n```yaml\nCluster Tier: M0 Sandbox (Free)\nCloud Provider: AWS\nRegion: us-east-1 (or nearest to you)\nMongoDB Version: 7.0 (latest stable)\n```\n\n### Network Access\n\n**Security Configuration:**\n\n1. **IP Whitelist**: Navigate to \"Network Access\" in the left sidebar\n2. **Add IP Address**: Click \"Add IP Address\"\n3. **Options**:\n   - **Current IP**: Add your current IP address\n   - **Allow Access from Anywhere**: `0.0.0.0/0` (⚠️ **Not recommended for production**)\n   - **Custom IP**: Add specific IP addresses or CIDR ranges\n\n**Recommended Setup for Development:**\n```\nIP Address: 0.0.0.0/0 (Allow access from anywhere)\nComment: Development Access\n```\n\n**Production Setup:**\n```\nIP Address: Your-Server-IP/32\nComment: Production Server Access\n```\n\n### Database Access\n\n**Create Database User:**\n\n1. **Navigate**: Go to \"Database Access\" in the left sidebar\n2. **Add User**: Click \"Add New Database User\"\n3. **Authentication Method**: Choose \"Password\"\n4. **Username**: Create a username (e.g., `chatapp-user`)\n5. **Password**: Generate a secure password (save this securely!)\n6. **Database User Privileges**: \n   - **Built-in Role**: `readWriteAnyDatabase` (recommended)\n   - **Custom Role**: For fine-grained permissions\n\n**Example User Configuration:**\n```yaml\nUsername: chatapp-admin\nPassword: [Generated-Secure-Password]\nDatabase: admin\nRoles: readWriteAnyDatabase\n```\n\n### Review \u0026 Deploy\n\n1. **Review Settings**: Double-check your cluster configuration\n   - Cluster name and tier\n   - Region and cloud provider\n   - Security settings\n2. **Create Cluster**: Click \"Create Cluster\"\n3. **Wait for Deployment**: Cluster creation takes 3-7 minutes\n\n### Wait for Cluster Creation\n\nMonitor the progress on your dashboard. You'll see:\n- ⏳ Cluster creation in progress\n- ✅ Cluster ready and available\n\n### Connect to Your Cluster\n\nOnce your cluster is ready:\n\n1. **Connect Button**: Click \"Connect\" on your cluster\n2. **Connection Method**: Choose \"Connect your application\"\n3. **Driver**: Select \"Node.js\" and your version\n4. **Connection String**: Copy the provided connection string\n\n**Example Connection String:**\n```javascript\nmongodb+srv://\u003cusername\u003e:\u003cpassword\u003e@cluster0.xxxxx.mongodb.net/\u003cdatabase\u003e?retryWrites=true\u0026w=majority\n```\n\n### Start Using Your Remote Database\n\n**Configure Your Application:**\n\n1. **Update Backend**: Open `/api/index.js`\n2. **Replace Connection String**: Update the MongoDB connection\n3. **Add Your Credentials**: Replace `\u003cusername\u003e`, `\u003cpassword\u003e`, and `\u003cdatabase\u003e`\n\n**Example Configuration:**\n```javascript\nmongoose.connect(\n  \"mongodb+srv://chatapp-admin:yourpassword@cluster0.xxxxx.mongodb.net/chatapp?retryWrites=true\u0026w=majority\",\n  {\n    useNewUrlParser: true,\n    useUnifiedTopology: true,\n  }\n);\n```\n\n**Environment Variables (Recommended):**\nCreate a `.env` file in your `/api` directory:\n```env\nMONGODB_URI=mongodb+srv://chatapp-admin:yourpassword@cluster0.xxxxx.mongodb.net/chatapp?retryWrites=true\u0026w=majority\nJWT_SECRET=your-super-secret-jwt-key\nPORT=8000\n```\n\n### 🔒 Security Best Practices\n\n- **Never commit credentials** to version control\n- **Use environment variables** for sensitive data\n- **Enable IP whitelisting** for production\n- **Create separate clusters** for development and production\n- **Regular password rotation** for database users\n- **Monitor database access** through Atlas dashboard\n\n### 📊 MongoDB Atlas Features\n\nExplore additional Atlas features:\n- **Real-time Performance Advisor**\n- **Automated Backups**\n- **Performance Monitoring**\n- **Data Lake Integration**\n- **Charts for Data Visualization**\n\n\n## 📱 Running the Application\n\n### Step 1: Start the Backend Server\n\n**Terminal 1 - Backend Setup:**\n```bash\n# Navigate to project directory\ncd your_project_location\n\n# Enter API directory\ncd api\n\n# Start the backend server\nyarn start\n```\n\n**Expected Output:**\n```\n[nodemon] starting `node index.js`\nServer running on port 8000\nConnected to Mongo Db\n```\n\nIf you see the above output, your backend is running successfully! 🎉\n\n![Backend Success](assets/img8.jpg)\n\n### Step 2: Start the Frontend Application\n\n**Terminal 2 - Frontend Setup:**\n```bash\n# Navigate to project root (if you're in api folder)\ncd your_project_location\n\n# Start the Expo development server\nnpx expo start\n```\n\n**Expected Output:**\n```\n› Metro waiting on exp://192.168.x.x:19000\n› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)\n```\n\n### Step 3: Run on Your Device\n\n#### Option 1: Using Expo Go (Recommended for beginners)\n1. **Install Expo Go** on your mobile device:\n   - [iOS App Store](https://apps.apple.com/app/expo-go/id982107779)\n   - [Google Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent)\n\n2. **Connect to Same Network**: Ensure your computer and mobile device are on the same WiFi network\n\n3. **Scan QR Code**: Open Expo Go and scan the QR code from your terminal\n\n#### Option 2: Using Emulator/Simulator\n**Android Emulator:**\n```bash\n# Press 'a' in the terminal to open Android emulator\nnpx expo start --android\n```\n\n**iOS Simulator (macOS only):**\n```bash\n# Press 'i' in the terminal to open iOS simulator\nnpx expo start --ios\n```\n\n### 🔧 Development Commands\n\n| Command | Description |\n|---------|-------------|\n| `npx expo start` | Start development server |\n| `npx expo start --android` | Open in Android emulator |\n| `npx expo start --ios` | Open in iOS simulator |\n| `npx expo start --web` | Open in web browser |\n| `npx expo start --clear` | Clear Metro bundler cache |\n| `npx expo install` | Install Expo-compatible packages |\n\n### 🌐 Network Configuration\n\n**Important**: Update the IP addresses in the app to match your development environment:\n\n**Files to update:**\n- `/screens/HomeScreen.js`\n- `/screens/LoginScreen.js`\n- `/screens/RegisterScreen.js`\n- `/components/User.js`\n\n**Find and replace:**\n```javascript\n// Current IP (example)\nhttp://192.168.253.12:8000\n\n// Replace with your local IP\nhttp://YOUR_LOCAL_IP:8000\n```\n\n**Find your local IP:**\n```bash\n# Windows\nipconfig\n\n# macOS/Linux\nifconfig | grep \"inet \"\n```\n\n## 🔌 API Documentation\n\n### Base URL\n```\nhttp://localhost:8000\n```\n\n### Authentication\nMost endpoints require JWT authentication. Include the token in the Authorization header:\n```\nAuthorization: Bearer \u003cyour-jwt-token\u003e\n```\n\n### API Endpoints\n\n#### 🔐 Authentication Endpoints\n\n##### Register User\n```http\nPOST /register\nContent-Type: application/json\n\n{\n  \"name\": \"John Doe\",\n  \"email\": \"john@example.com\",\n  \"password\": \"securepassword\",\n  \"image\": \"https://example.com/profile.jpg\"\n}\n```\n\n**Response:**\n```json\n{\n  \"message\": \"User registered successfully\"\n}\n```\n\n##### Login User\n```http\nPOST /login\nContent-Type: application/json\n\n{\n  \"email\": \"john@example.com\",\n  \"password\": \"securepassword\"\n}\n```\n\n**Response:**\n```json\n{\n  \"token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",\n  \"userId\": \"64a123b456c789d012e345f6\"\n}\n```\n\n#### 👥 User Management Endpoints\n\n##### Get All Users (except current user)\n```http\nGET /users/:userId\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n**Response:**\n```json\n[\n  {\n    \"_id\": \"64a123b456c789d012e345f7\",\n    \"name\": \"Jane Smith\",\n    \"email\": \"jane@example.com\",\n    \"image\": \"https://example.com/jane-profile.jpg\",\n    \"friends\": [],\n    \"friendRequests\": []\n  }\n]\n```\n\n##### Get User Details\n```http\nGET /user/:userId\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n#### 🤝 Friend Request Endpoints\n\n##### Send Friend Request\n```http\nPOST /friend-request\nContent-Type: application/json\nAuthorization: Bearer \u003ctoken\u003e\n\n{\n  \"currentUserId\": \"64a123b456c789d012e345f6\",\n  \"selectedUserId\": \"64a123b456c789d012e345f7\"\n}\n```\n\n##### Get Sent Friend Requests\n```http\nGET /friend-requests/sent/:userId\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n##### Get Received Friend Requests\n```http\nGET /friend-request/:userId\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n##### Accept Friend Request\n```http\nPOST /friend-request/accept\nContent-Type: application/json\nAuthorization: Bearer \u003ctoken\u003e\n\n{\n  \"senderId\": \"64a123b456c789d012e345f7\",\n  \"recepientId\": \"64a123b456c789d012e345f6\"\n}\n```\n\n##### Get User's Friends\n```http\nGET /friends/:userId\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n#### 💬 Messaging Endpoints\n\n##### Send Message\n```http\nPOST /messages\nContent-Type: multipart/form-data\nAuthorization: Bearer \u003ctoken\u003e\n\nFormData:\n- senderId: \"64a123b456c789d012e345f6\"\n- recepientId: \"64a123b456c789d012e345f7\"\n- messageType: \"text\" | \"image\"\n- messageText: \"Hello, how are you?\"\n- imageFile: [File] (optional, for image messages)\n```\n\n##### Get Messages Between Users\n```http\nGET /messages/:senderId/:recepientId\nAuthorization: Bearer \u003ctoken\u003e\n```\n\n**Response:**\n```json\n[\n  {\n    \"_id\": \"64a123b456c789d012e345f8\",\n    \"senderId\": \"64a123b456c789d012e345f6\",\n    \"recepientId\": \"64a123b456c789d012e345f7\",\n    \"messageType\": \"text\",\n    \"message\": \"Hello, how are you?\",\n    \"timestamp\": \"2024-01-15T10:30:00.000Z\",\n    \"imageUrl\": null\n  }\n]\n```\n\n##### Delete Message\n```http\nPOST /deleteMessages\nContent-Type: application/json\nAuthorization: Bearer \u003ctoken\u003e\n\n{\n  \"messages\": [\"64a123b456c789d012e345f8\"]\n}\n```\n\n### Error Responses\n\nAll endpoints return appropriate HTTP status codes:\n\n- `200` - Success\n- `400` - Bad Request\n- `401` - Unauthorized\n- `404` - Not Found\n- `500` - Internal Server Error\n\n**Error Response Format:**\n```json\n{\n  \"error\": \"Error message description\"\n}\n```\n\n## 📱 App Structure\n\n### Frontend Architecture\n\n```\nChatApp/\n├── App.js                 # Main app component\n├── StackNavigator.js      # Navigation configuration\n├── UserContext.js         # Global state management\n├── components/            # Reusable components\n│   ├── User.js           # User list item component\n│   ├── UserChat.js       # Chat list item component\n│   └── FriendRequest.js  # Friend request component\n├── screens/              # App screens\n│   ├── LoginScreen.js    # User authentication\n│   ├── RegisterScreen.js # User registration\n│   ├── HomeScreen.js     # User discovery\n│   ├── FriendsScreen.js  # Friend requests\n│   ├── ChatsScreen.js    # Chat list\n│   └── ChatMessagesScreen.js # Individual chat\n└── assets/               # Images and static files\n```\n\n### Backend Architecture\n\n```\napi/\n├── index.js              # Main server file\n├── models/               # Database models\n│   ├── user.js          # User model schema\n│   └── message.js       # Message model schema\n├── files/               # Uploaded images storage\n└── package.json         # Backend dependencies\n```\n\n### Key Components\n\n#### 🔄 State Management\n- **UserContext**: Global state for user authentication and data\n- **AsyncStorage**: Persistent storage for JWT tokens\n- **React Navigation**: Screen navigation and routing\n\n#### 🎨 UI Components\n- **Custom Components**: Reusable UI elements for users, chats, and requests\n- **Native Elements**: React Native built-in components\n- **Expo Vector Icons**: Icon library for UI enhancement\n\n#### 🔐 Security Features\n- **JWT Authentication**: Secure token-based authentication\n- **Password Hashing**: Secure password storage (if implemented)\n- **Input Validation**: Client and server-side validation\n\n## 📸 Screenshots\n\nHere are some screenshots that showcase the functionality and user interface of the ChatApp:\n\n### 🔐 Authentication Screens\n\n\u003cdiv align=\"center\"\u003e\n\n**Login \u0026 Registration Pages**\n\n\u003cimg src=\"/assets/img1.jpg\" alt=\"Login Screen\" width=\"250\" height=\"456\"\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"/assets/img2.jpg\" alt=\"Registration Screen\" width=\"250\" height=\"456\"\u003e\n\n*Clean and intuitive authentication interface for secure user login and registration*\n\n\u003c/div\u003e\n\n### 🏠 Home \u0026 User Discovery\n\n\u003cdiv align=\"center\"\u003e\n\n**Home Page - User Discovery**\n\n\u003cimg src=\"/assets/img7.jpg\" alt=\"Home Screen\" width=\"250\" height=\"456\"\u003e\n\n*Browse and discover other users, send friend requests, and manage connections*\n\n\u003c/div\u003e\n\n### 💬 Chat Interface\n\n\u003cdiv align=\"center\"\u003e\n\n**Chat List \u0026 Individual Chat**\n\n\u003cimg src=\"/assets/img6.jpg\" alt=\"Chat List\" width=\"250\" height=\"456\"\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"/assets/img5.jpg\" alt=\"Chat Messages\" width=\"250\" height=\"456\"\u003e\n\n*Overview of all conversations and detailed chat interface with real-time messaging*\n\n\u003c/div\u003e\n\n### 🗨️ Real-Time Messaging\n\n\u003cdiv align=\"center\"\u003e\n\n**Conversation View - Both Users**\n\n\u003cimg src=\"/assets/img3.jpg\" alt=\"User 1 Chat View\" width=\"250\" height=\"456\"\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"/assets/img5.jpg\" alt=\"User 2 Chat View\" width=\"250\" height=\"456\"\u003e\n\n*Side-by-side view showing real-time message synchronization between users*\n\n\u003c/div\u003e\n\n### 🤝 Friend Management\n\n\u003cdiv align=\"center\"\u003e\n\n**Friend Request Interface**\n\n\u003cimg src=\"/assets/img4.jpg\" alt=\"Friend Requests\" width=\"250\" height=\"456\"\u003e\n\n*Manage incoming and outgoing friend requests with easy accept/decline options*\n\n\u003c/div\u003e\n\n### ✨ Key UI Features\n\n- **🎨 Modern Design**: Clean, Material Design-inspired interface\n- **📱 Mobile-First**: Optimized for mobile devices with touch-friendly interactions\n- **⚡ Real-Time Updates**: Live message updates and status changes\n- **🌈 Intuitive Navigation**: Easy-to-use navigation between different app sections\n- **😊 Emoji Support**: Express yourself with integrated emoji picker\n- **🖼️ Image Sharing**: Send and receive images seamlessly\n- **🔄 Status Indicators**: Real-time friend status and message delivery confirmation\n\n## 🛠️ Troubleshooting\n\n### Common Issues and Solutions\n\n#### 🔴 Backend Connection Issues\n\n**Problem**: Cannot connect to backend server\n```\nNetwork Error: Unable to connect to server\n```\n\n**Solutions:**\n1. **Check Backend Status**: Ensure backend is running on port 8000\n   ```bash\n   cd api\n   yarn start\n   ```\n\n2. **Verify IP Address**: Update IP addresses in frontend files\n   ```javascript\n   // Update these files with your local IP:\n   // - screens/HomeScreen.js\n   // - screens/LoginScreen.js  \n   // - screens/RegisterScreen.js\n   // - components/User.js\n   \n   const API_URL = \"http://YOUR_LOCAL_IP:8000\";\n   ```\n\n3. **Network Connectivity**: Ensure device and computer are on same WiFi network\n\n#### 🔴 Database Connection Issues\n\n**Problem**: MongoDB connection errors\n```\nError connecting to MongoDb\n```\n\n**Solutions:**\n1. **Check Connection String**: Verify MongoDB Atlas connection string\n2. **IP Whitelist**: Ensure your IP is whitelisted in MongoDB Atlas\n3. **Credentials**: Verify username and password in connection string\n4. **Network Access**: Check if your firewall allows MongoDB connections\n\n#### 🔴 Expo/React Native Issues\n\n**Problem**: Metro bundler errors or module resolution issues\n\n**Solutions:**\n1. **Clear Cache**: \n   ```bash\n   npx expo start --clear\n   ```\n\n2. **Reinstall Dependencies**:\n   ```bash\n   rm -rf node_modules\n   yarn install\n   ```\n\n3. **Reset Expo Cache**:\n   ```bash\n   expo r -c\n   ```\n\n4. **Check Node Version**: Ensure Node.js version is 18+\n\n#### 🔴 Authentication Issues\n\n**Problem**: Login/Registration not working\n\n**Solutions:**\n1. **Check API Endpoints**: Verify backend routes are accessible\n2. **JWT Token**: Ensure JWT secret is configured in backend\n3. **Password Validation**: Check password requirements\n4. **Email Format**: Verify email format is valid\n\n#### 🔴 Image Upload Issues\n\n**Problem**: Images not uploading or displaying\n\n**Solutions:**\n1. **Check Permissions**: Ensure app has camera/gallery permissions\n2. **File Size**: Verify image file size limits\n3. **File Path**: Check file storage path in backend (`files/` directory)\n4. **Multer Configuration**: Verify multer setup for file uploads\n\n### 📱 Device-Specific Issues\n\n#### iOS Issues\n- **Simulator**: Use iOS Simulator for testing on macOS\n- **Physical Device**: Ensure iOS device is on same network\n- **Permissions**: Grant camera and photo library permissions\n\n#### Android Issues  \n- **Emulator**: Set up Android Studio emulator\n- **Physical Device**: Enable USB debugging for physical device testing\n- **Network**: Check Android firewall settings\n\n### 🔧 Development Tips\n\n1. **Hot Reload**: Use Expo's hot reload for faster development\n2. **Error Boundaries**: Implement error boundaries for better error handling\n3. **Logging**: Use console.log for debugging API calls\n4. **Network Inspector**: Use Flipper or React Native Debugger for network monitoring\n\n### 📞 Getting Help\n\nIf you encounter issues not covered here:\n\n1. **Check Console**: Look for error messages in terminal and device console\n2. **GitHub Issues**: Search existing issues in the repository\n3. **Expo Documentation**: Check [Expo docs](https://docs.expo.dev/) for platform-specific issues\n4. **React Native Community**: Visit [React Native community](https://reactnative.dev/help) for help\n\n## 🗺️ Roadmap\n\n### Current Version (v1.0.0)\n- ✅ User authentication and registration\n- ✅ Friend request system\n- ✅ Real-time text messaging\n- ✅ Image sharing capabilities\n- ✅ Cross-platform mobile support\n\n### Upcoming Features (v1.1.0)\n- 🔄 **Message Editing**: Edit sent messages\n- 🔄 **Message Reactions**: React to messages with emojis\n- 🔄 **Typing Indicators**: Show when users are typing\n- 🔄 **Online Status**: Display user online/offline status\n- 🔄 **Push Notifications**: Real-time notifications for new messages\n\n### Future Enhancements (v1.2.0+)\n- 📝 **Group Chats**: Create and manage group conversations\n- 🔊 **Voice Messages**: Send and receive voice recordings\n- 🎥 **Video Calls**: Integrate video calling functionality\n- 🌙 **Dark Mode**: Dark theme support\n- 🔍 **Message Search**: Search through chat history\n- 📎 **File Sharing**: Share documents and files\n- 🔒 **End-to-End Encryption**: Enhanced security for messages\n- 🌐 **Web Version**: Progressive Web App (PWA) support\n- 🤖 **Chatbots**: AI-powered chat assistants\n- 📊 **Analytics Dashboard**: Admin dashboard for app analytics\n\n### Long-term Vision (v2.0.0+)\n- 🎮 **Mini Games**: Interactive games within chat\n- 💰 **In-App Purchases**: Premium features and customizations\n- 🌍 **Multi-language Support**: Internationalization\n- 🔔 **Advanced Notifications**: Smart notification preferences\n- 📱 **Desktop App**: Native desktop applications\n- ☁️ **Cloud Storage**: Cloud-based file storage integration\n- 🎨 **Themes \u0026 Customization**: User-customizable themes\n\n### Contributing to the Roadmap\nWe welcome community input on our roadmap! Please:\n- Open an issue to suggest new features\n- Vote on existing feature requests\n- Submit pull requests for features you'd like to implement\n\n## 🤝 Contributing\n\nWe welcome and appreciate contributions from the community! Whether you're fixing bugs, adding new features, improving documentation, or suggesting enhancements, your contributions help make ChatApp better for everyone.\n\n### 🌟 Ways to Contribute\n\n- 🐛 **Report Bugs**: Found a bug? Help us fix it by reporting it\n- ✨ **Suggest Features**: Have an idea for a new feature? We'd love to hear it\n- 📖 **Improve Documentation**: Help make our docs clearer and more comprehensive\n- 🔧 **Submit Code**: Fix bugs or implement new features\n- 🎨 **UI/UX Improvements**: Enhance the user interface and experience\n- 🧪 **Add Tests**: Help improve code coverage and reliability\n\n### 📝 Contribution Guidelines\n\n#### Before You Start\n1. **Check Existing Issues**: Look through existing issues and pull requests\n2. **Open an Issue**: For major changes, open an issue first to discuss your idea\n3. **Fork the Repository**: Create your own fork of the project\n\n#### Development Process\n1. **Create a Branch**: \n   ```bash\n   git checkout -b feature/your-feature-name\n   # or\n   git checkout -b fix/bug-description\n   ```\n\n2. **Make Your Changes**: \n   - Follow the existing code style and conventions\n   - Add comments for complex logic\n   - Ensure your code is clean and readable\n\n3. **Test Your Changes**:\n   - Test the app thoroughly on both iOS and Android\n   - Verify that existing functionality still works\n   - Add tests for new features when possible\n\n4. **Commit Your Changes**:\n   ```bash\n   git add .\n   git commit -m \"feat: add new message reaction feature\"\n   # Use conventional commit format:\n   # feat: new features\n   # fix: bug fixes  \n   # docs: documentation changes\n   # style: code style changes\n   # refactor: code refactoring\n   # test: adding tests\n   ```\n\n5. **Push and Create PR**:\n   ```bash\n   git push origin feature/your-feature-name\n   ```\n   Then create a Pull Request on GitHub\n\n#### Code Standards\n- **JavaScript/React Native**: Follow ESLint rules and React best practices\n- **File Naming**: Use PascalCase for components, camelCase for utilities\n- **Comments**: Add meaningful comments for complex logic\n- **Error Handling**: Include proper error handling and user feedback\n\n#### Pull Request Guidelines\n- **Clear Title**: Use descriptive titles for your PRs\n- **Detailed Description**: Explain what your PR does and why\n- **Screenshots**: Include screenshots for UI changes\n- **Link Issues**: Reference related issues with \"Closes #issue-number\"\n- **Small PRs**: Keep PRs focused and reasonably sized\n\n### 🐛 Reporting Bugs\n\nWhen reporting bugs, please include:\n\n**Bug Report Template:**\n```markdown\n**Bug Description**\nClear description of the bug\n\n**Steps to Reproduce**\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected Behavior**\nWhat you expected to happen\n\n**Screenshots**\nIf applicable, add screenshots\n\n**Environment:**\n- Device: [e.g. iPhone 12, Samsung Galaxy S21]\n- OS: [e.g. iOS 15.0, Android 11]\n- App Version: [e.g. 1.0.0]\n- Node Version: [e.g. 18.0.0]\n```\n\n### 💡 Suggesting Features\n\n**Feature Request Template:**\n```markdown\n**Feature Description**\nClear description of the feature\n\n**Use Case**\nWhy would this feature be useful?\n\n**Proposed Solution**\nHow do you envision this working?\n\n**Alternatives Considered**\nOther solutions you've considered\n\n**Additional Context**\nAny other context, mockups, or examples\n```\n\n### 🏗️ Development Setup\n\n1. **Fork \u0026 Clone**:\n   ```bash\n   git clone https://github.com/yourusername/ChatApp.git\n   cd ChatApp\n   ```\n\n2. **Install Dependencies**:\n   ```bash\n   # Frontend\n   yarn install\n   \n   # Backend  \n   cd api\n   yarn install\n   ```\n\n3. **Set Up Environment**:\n   - Configure MongoDB Atlas connection\n   - Update IP addresses for local development\n   - Set up any required environment variables\n\n4. **Start Development**:\n   ```bash\n   # Terminal 1: Backend\n   cd api\n   yarn start\n   \n   # Terminal 2: Frontend\n   npx expo start\n   ```\n\n### 🧪 Testing\n\nWhile we're working on comprehensive test coverage, please manually test:\n- **Core Features**: Authentication, messaging, friend requests\n- **Cross-Platform**: Test on both iOS and Android\n- **Edge Cases**: Network errors, invalid inputs, empty states\n- **Performance**: App responsiveness and memory usage\n\n### 👥 Community\n\n- **Discord/Slack**: Join our community discussions (coming soon)\n- **GitHub Discussions**: Use GitHub Discussions for questions and ideas\n- **Code Reviews**: Participate in code reviews to help maintain quality\n\n### 🎯 Good First Issues\n\nLooking for a place to start? Check out issues labeled:\n- `good first issue` - Perfect for newcomers\n- `help wanted` - We'd love community help with these\n- `documentation` - Improve our docs\n- `bug` - Fix known issues\n\n### 🙏 Recognition\n\nContributors will be:\n- Listed in our README.md\n- Recognized in release notes for significant contributions\n- Invited to join our contributor community\n\nThank you for considering contributing to ChatApp! Every contribution, no matter how small, helps make the project better. 🎉\n\n## ⭐ Support\n\n### 🌟 Give a Star\n\nIf you find this project useful, please consider giving it a star ⭐️ on GitHub! Your support means a lot and helps others discover the project.\n\n**Why star this project?**\n- 📈 **Show Support**: Help us gauge community interest\n- 🔍 **Increase Visibility**: Help others find this useful project\n- 💪 **Motivate Development**: Encourage continued development and improvements\n- 🤝 **Build Community**: Join our growing community of developers\n\n### 📢 Share the Project\n\nHelp spread the word about ChatApp:\n- 🐦 **Share on Twitter**: Tweet about the project with #ChatApp #ReactNative\n- 💼 **LinkedIn**: Share with your professional network\n- 📱 **Dev Communities**: Share on Reddit, Dev.to, or other developer communities\n- 👥 **Tell Friends**: Recommend to fellow developers\n\n### 💝 Support the Project\n\n- ⭐ **Star the Repository**: Free and helps with discoverability\n- 🐛 **Report Issues**: Help us improve by reporting bugs\n- 🤝 **Contribute Code**: Submit pull requests with improvements\n- 📖 **Improve Docs**: Help make documentation better\n- 💡 **Share Ideas**: Suggest new features and enhancements\n\n### 📬 Stay Connected\n\n- **GitHub**: Follow this repository for updates\n- **Issues**: Watch for discussions and announcements\n- **Releases**: Get notified about new versions\n\nYour support and feedback are highly valued! Together, we can make ChatApp an even better communication platform. 🚀\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n### MIT License Summary\n\n✅ **You CAN**:\n- Use this project for personal and commercial purposes\n- Modify and distribute the code\n- Include in private projects\n- Sublicense and sell\n\n❗ **You MUST**:\n- Include the original license and copyright notice\n- Not hold the authors liable for any damages\n\n### Copyright Notice\n\n```\nMIT License\n\nCopyright (c) 2024 isharax9\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### 💬 ChatApp - Connecting People, Simplifying Communication\n\n**Made with ❤️ by [isharax9](https://github.com/isharax9)**\n\n[⭐ Star this project](https://github.com/isharax9/ChatApp) • [🐛 Report Bug](https://github.com/isharax9/ChatApp/issues) • [💡 Request Feature](https://github.com/isharax9/ChatApp/issues)\n\n\u003c/div\u003e\n  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisharax9%2Fchatapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisharax9%2Fchatapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisharax9%2Fchatapp/lists"}