{"id":29184203,"url":"https://github.com/priyansh7999/chat-application-react-native","last_synced_at":"2026-04-14T03:32:16.211Z","repository":{"id":299954256,"uuid":"1003388450","full_name":"Priyansh7999/Chat-Application-React-Native","owner":"Priyansh7999","description":"A modern, real-time chat application built with React Native and Firebase, featuring seamless communication and social connectivity.","archived":false,"fork":false,"pushed_at":"2025-06-26T06:43:21.000Z","size":3788,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-26T07:32:29.339Z","etag":null,"topics":["chat-application","expo","firebase","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Priyansh7999.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-17T04:36:08.000Z","updated_at":"2025-06-26T06:43:25.000Z","dependencies_parsed_at":"2025-06-19T05:48:51.295Z","dependency_job_id":null,"html_url":"https://github.com/Priyansh7999/Chat-Application-React-Native","commit_stats":null,"previous_names":["priyansh7999/chat-application-react-native"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Priyansh7999/Chat-Application-React-Native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Priyansh7999%2FChat-Application-React-Native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Priyansh7999%2FChat-Application-React-Native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Priyansh7999%2FChat-Application-React-Native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Priyansh7999%2FChat-Application-React-Native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Priyansh7999","download_url":"https://codeload.github.com/Priyansh7999/Chat-Application-React-Native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Priyansh7999%2FChat-Application-React-Native/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263035779,"owners_count":23403424,"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":["chat-application","expo","firebase","react-native"],"created_at":"2025-07-01T21:02:34.023Z","updated_at":"2026-04-14T03:32:16.172Z","avatar_url":"https://github.com/Priyansh7999.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chatter 💬\n\nA modern, real-time chat application built with React Native and Firebase, featuring seamless communication and social connectivity.\n\n## 🚀 Features\n\n### Core Functionality\n- **Real-time Messaging**: Instant messaging with live updates using Firebase Firestore\n- **Email Authentication**: Secure user registration and login with email/password\n- **Email Verification**: First-time users must verify their email before accessing the app\n- **Unique Username System**: Each user gets a unique username for easy discovery\n- **User Discovery**: Search and find other users by their unique username in explore tab\n- **Friend Invitations**: Send and receive friend requests for one-on-one communication\n- **Stories Feature**: Share 24-hour temporary image stories visible to your friends\n- **Profile Management**: Comprehensive user profiles with bio, location, and profile images\n\n### Advanced Features\n- **Read Receipts**: Track message delivery and read status\n- **Real-time Chat Previews**: Live updates of latest messages and timestamps\n- **Typing Indicators**: See when friends are typing\n- **Online Status**: Track user's last seen and online presence\n- **Story Interactions**: Like friends' stories\n- **Profile Customization**: Update bio, location (city/state), and profile pictures\n- **Friend Management**: Organized friend lists and invitation system\n\n### Security \u0026 Privacy\n- Secure authentication with Firebase Auth\n- Email verification for enhanced security\n- Private messaging between connected users only\n- Controlled friend connections through invitation system\n- User blocking functionality\n- Data validation and error handling\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React Native with Expo Router\n- **Backend**: Firebase\n- **Database**: Cloud Firestore (NoSQL)\n- **Authentication**: Firebase Auth (Email/Password)\n- **Real-time Updates**: Firestore real-time listeners\n- **Development**: Expo CLI\n- **State Management**: React Context API (AuthContext)\n- **Navigation**: Expo Router with tab-based navigation\n\n## 📱 Screenshots\n\n\n## 🔧 Installation \u0026 Setup\n\n### Prerequisites\n- Node.js (v14 or higher)\n- npm or yarn\n- Expo CLI (`npm install -g @expo/cli`)\n- Firebase project setup\n\n### Installation Steps\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/Priyansh7999/Chat-Application-React-Native.git\n   cd Chat-Application-React-Native\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Firebase Configuration**\n   - Create a Firebase project at [Firebase Console](https://console.firebase.google.com/)\n   - Enable Authentication (Email/Password provider)\n   - Enable Firestore Database\n   - Create a `firebaseConfig.js` file in your project root:\n   ```javascript\n   import { initializeApp } from 'firebase/app';\n   import { getAuth } from 'firebase/auth';\n   import { getFirestore } from 'firebase/firestore';\n\n   const firebaseConfig = {\n     apiKey: \"your-api-key\",\n     authDomain: \"your-auth-domain\",\n     projectId: \"your-project-id\",\n     storageBucket: \"your-storage-bucket\",\n     messagingSenderId: \"your-messaging-sender-id\",\n     appId: \"your-app-id\"\n   };\n\n   const app = initializeApp(firebaseConfig);\n   export const auth = getAuth(app);\n   export const db = getFirestore(app);\n   ```\n\n4. **Start the development server**\n   ```bash\n   npx expo start\n   ```\n\n5. **Run on device/simulator**\n   - Install Expo Go app on your mobile device\n   - Scan the QR code from the terminal\n   - Or press 'i' for iOS simulator, 'a' for Android emulator\n\n## 📋 Firebase Setup\n\n### Firestore Database Structure\n```\nusers/\n├── {userId}/\n│   ├── uid: string\n│   ├── email: string\n│   ├── name: string\n│   ├── username: string (unique)\n│   ├── phone: string\n│   ├── bio: string\n│   ├── location: object\n│   │   ├── city: string\n│   │   └── state: string\n│   ├── profileImage: string (URL)\n│   ├── emailVerified: boolean\n│   ├── createdAt: string (ISO)\n│   ├── lastSeen: string (ISO)\n│   ├── isOnline: boolean\n│   ├── friends: array\n│   ├── invitesSend: array\n│   ├── invitesReceived: array\n│   └── blockedUsers: array\n\nchats/\n├── {chatId}/\n│   ├── participants: array [userId1, userId2]\n│   ├── createdAt: timestamp\n│   ├── lastMessage: object\n│   │   ├── text: string\n│   │   ├── senderId: string\n│   │   ├── createdAt: timestamp\n│   │   ├── imageUrl: string (optional)\n│   │   └── readBy: array\n│   ├── lastUpdated: timestamp\n│   ├── messagesCount: number\n│   └── typingStatus: object\n│       ├── {userId1}: boolean\n│       └── {userId2}: boolean\n\nchats/{chatId}/messages/\n├── {messageId}/\n│   ├── senderId: string\n│   ├── text: string\n│   ├── imageUrl: string (optional)\n│   ├── createdAt: timestamp\n│   └── readBy: array\n\nstories/\n├── {storyId}/\n│   ├── userId: string\n│   ├── username: string\n│   ├── image: string (base64 or URL)\n│   ├── profileImage: string\n│   ├── createdAt: timestamp\n│   ├── expireAt: date (24 hours from creation)\n│   └── likes: array (optional)\n```\n\n### Security Rules\n```javascript\n// Firestore Security Rules\nrules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    // Users can read/write their own data and read others' basic info\n    match /users/{userId} {\n      allow read: if request.auth != null;\n      allow write: if request.auth != null \u0026\u0026 request.auth.uid == userId;\n    }\n    \n    // Chat documents readable by participants\n    match /chats/{chatId} {\n      allow read, write: if request.auth != null \u0026\u0026 \n        request.auth.uid in resource.data.participants;\n    }\n    \n    // Messages readable by chat participants\n    match /chats/{chatId}/messages/{messageId} {\n      allow read, write: if request.auth != null;\n    }\n    \n    // Stories readable by authenticated users (friends only logic in app)\n    match /stories/{storyId} {\n      allow read: if request.auth != null;\n      allow write: if request.auth != null \u0026\u0026 \n        request.auth.uid == resource.data.userId;\n    }\n  }\n}\n```\n\n## 🏗️ Project Structure\n\n```\nchatter/\n├── app/\n│   ├── (tabs)/                       # HOME SCREENS TAB NAVIGATION\n│   │   ├── Chats.jsx                 # Chat previews screen\n│   │   ├── explore.jsx               # User search \u0026 discovery\n│   │   └── profile.jsx               # User profile management\n│   ├── (others)/                     # SCREENS for chat between users and profile of other users\n│   │   ├── friendprofile.jsx         # Friend's profile view\n│   │   ├── notfriendprofile.jsx      # Non-friend user profile\n│   │   └── ChatsBetweenFriends.jsx   # One-to-one chat screen\n│   ├── _layout.jsx                   # App layout configuration\n│   ├── layout.jsx                    # Main app layout\n│   ├── index.jsx                     # Onboarding screen\n│   ├── signup.jsx                    # User registration\n│   └── signin.jsx                    # User login\n├── components/\n│   └── [Reusable UI Components]\n├── context/ \n│   └── AuthContext.jsx               # Authentication \u0026 Firebase logic\n├── assets/\n├── firebaseConfig.js\n├── app.json\n└── package.json\n```\n\n## 🎯 Usage\n\n### Getting Started\n1. **Register**: Sign up using your email and password\n2. **Verify Email**: Check your email and click the verification link\n3. **Complete Profile**: Set your unique username, bio, and location details\n4. **Explore Users**: Use the explore tab to search for other users by username\n5. **Send Friend Requests**: Send invites to connect with other users\n6. **Start Chatting**: Begin real-time conversations with accepted friends\n7. **Share Stories**: Post images as stories visible to friends for 24 hours\n8. **View Stories**: Browse through friends' stories and like them\n\n### Key Features Usage\n- **Real-time Chat**: Messages appear instantly with read receipts\n- **User Search**: Find users by their unique username in the explore tab\n- **Friend Management**: Manage friend requests through invites system\n- **Story Sharing**: Share moments that automatically expire after 24 hours\n- **Profile Customization**: Update bio, location, and profile image\n- **Online Status**: See when friends were last active\n\n### Core Functionality Flow\n\n**Authentication Flow:**\n- Email/Password registration → Email verification → Profile setup → Username selection\n\n**Chat Flow:**\n- Chat previews list → Select friend → Real-time messaging → Read receipts\n\n**Social Flow:**\n- Explore users → Send friend request → Accept invite → Start communication\n\n**Stories Flow:**\n- Capture/Select image → Post story → View friends' stories → Like stories\n\n## 🔄 App Flow\n\n1. **Authentication Flow**\n   - Email/Password registration → Email verification → Profile completion (username, bio, location)\n\n2. **Main App Navigation**\n   - **Chats Tab**: View chat previews → Select conversation → Real-time messaging\n   - **Explore Tab**: Search users by username → View profiles → Send friend requests\n   - **Profile Tab**: Manage personal profile → Update details → View/manage stories\n\n3. **Social Interaction Flow**\n   - Search users → View profile → Send invite → Accept/Decline → Start chatting\n   - Post story → Friends view stories → Like stories → Auto-expire after 24h\n\n4. **Chat Features**\n   - Real-time messaging with read receipts\n   - Message timestamps and delivery status\n   - Sorted chat previews by latest activity\n\n## 🧪 Testing\n\n```bash\n# Run tests\nnpm test\n\n# Run with coverage\nnpm run test:coverage\n```\n\n## 📦 Building for Production\n\n### Android (APK/AAB)\n```bash\n# Build APK\nnpx eas build --platform android --profile production --local\n\n# Build AAB for Play Store\nnpx eas build --platform android --profile production\n```\n\n### iOS (IPA)\n```bash\n# Build for App Store\nnpx eas build --platform ios --profile production\n\n# Build for TestFlight\nnpx eas build --platform ios --profile preview\n```\n\n### Web\n```bash\n# Build for web deployment\nnpx expo export --platform web\n```\n\n**Note**: You'll need to set up EAS (Expo Application Services) for production builds. Run `npx eas build:configure` to set up build profiles.\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👥 Authors\n\n- **Priyansh Saxena** - *Initial work* - [Priyansh7999](https://github.com/Priyansh7999)\n\n## 🙏 Acknowledgments\n\n- Firebase for backend services\n- Expo team for the amazing development platform\n- React Native community for continuous support\n\n## 📞 Support\n\nIf you have any questions or run into issues, please open an issue on GitHub or contact [priyanshsaxena7999@gmail.com](mailto:priyanshsaxena7999@gmail.com).\n\n\n\n⭐ **Star this repo if you find it helpful!**\n\n*Built with ❤️ by Priyansh Saxena using React Native Expo and Firebase*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpriyansh7999%2Fchat-application-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpriyansh7999%2Fchat-application-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpriyansh7999%2Fchat-application-react-native/lists"}