{"id":22956825,"url":"https://github.com/s-satyajit/multi-user-chatapp","last_synced_at":"2026-04-13T16:32:24.352Z","repository":{"id":267152040,"uuid":"898256416","full_name":"s-satyajit/multi-user-chatApp","owner":"s-satyajit","description":"A chat application that lets you chat with multiple people at the same time, designed to make communication easy and smooth.","archived":false,"fork":false,"pushed_at":"2024-12-31T14:21:55.000Z","size":460,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T18:57:34.823Z","etag":null,"topics":["chat-application","firebase","messaging","multi-user-chat","open-source","reactjs","vercel","web-app"],"latest_commit_sha":null,"homepage":"https://multi-user-chat.vercel.app/","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/s-satyajit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2024-12-04T04:21:51.000Z","updated_at":"2024-12-31T14:21:58.000Z","dependencies_parsed_at":"2024-12-08T18:24:38.962Z","dependency_job_id":"0358e5fc-d3b2-44ac-96d9-167aa0f680df","html_url":"https://github.com/s-satyajit/multi-user-chatApp","commit_stats":null,"previous_names":["s-satyajit/multi-user-chatapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-satyajit%2Fmulti-user-chatApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-satyajit%2Fmulti-user-chatApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-satyajit%2Fmulti-user-chatApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-satyajit%2Fmulti-user-chatApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s-satyajit","download_url":"https://codeload.github.com/s-satyajit/multi-user-chatApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246738200,"owners_count":20825752,"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","firebase","messaging","multi-user-chat","open-source","reactjs","vercel","web-app"],"created_at":"2024-12-14T17:11:53.166Z","updated_at":"2026-04-13T16:32:24.288Z","avatar_url":"https://github.com/s-satyajit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi-User Chat Application\nThe Multi-User Chat Application lets multiple people chat with each other in real-time. Using the latest web technologies, this app provides a smooth and responsive chat experience, making it easy to stay connected\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Tech Stack](#tech-stack)\n- [Installation](#installation)\n  - [Prerequisites](#prerequisites)\n  - [Environment Setup](#environment-setup)\n  - [Installing Dependencies](#installing-dependencies)\n- [Usage](#usage)\n- [Project Structure](#project-structure)\n- [API Endpoints](#api-endpoints)\n  - [Authentication Endpoints](#authentication-endpoints)\n  - [Chat Endpoints](#chat-endpoints)\n- [Components](#components)\n- [Hooks](#hooks)\n- [Testing](#testing)\n- [Logging and Monitoring](#logging-and-monitoring)\n- [Security](#security)\n- [Performance Optimization](#performance-optimization)\n- [Deployment](#deployment)\n  - [Manual Deployment](#manual-deployment)\n  - [Automatic Deployment](#automatic-deployment)\n  - [Continuous Integration/Continuous Deployment (CI/CD)](#continuous-integrationcontinuous-deployment-cicd)\n- [Code Quality](#code-quality)\n- [Contribution Guidelines](#contribution-guidelines)\n- [FAQ](#faq)\n- [License](#license)\n- [Acknowledgements](#acknowledgements)\n\n## Introduction\nThe Multi-User Chat Application is a real-time messaging platform that enables seamless communication between multiple users. This application ensures a smooth, interactive, and responsive chat experience.\n\n## Features\n- **Real-Time Messaging:** Instant communication between users.\n\n- **User Authentication:** Secure sign-up and sign-in.\n\n- **User Presence:** Show online/offline status of users.\n\n- **Message History:** Store and retrieve chat history.\n\n- **Emoji Support:** Add emojis to enhance user interactions.\n\n## Tech Stack\n\n- **Frontend:** [ReactJS](https://reactjs.org/)\n\n- **Backend:** [Firebase Functions](https://firebase.google.com/docs/functions)\n\n- **Database:** [Firebase Firestore](https://firebase.google.com/docs/firestore)\n\n- **Authentication:** [Firebase Authentication](https://firebase.google.com/docs/auth)\n\n- **Storage:** [Firebase Storage](https://firebase.google.com/docs/storage)\n\n\n## Installation\n\n### Prerequisites\n\n- [Node.js ](https://nodejs.org/) (v14.x or higher)\n- [npm](https://www.npmjs.com/)  (v6.x or higher) or [yarn](https://yarnpkg.com/) (v1.22.x or higher)\n- [MongoDB](https://www.mongodb.com/)  (v4.x or higher)\n\n\n### Environment Setup\n#### 1. Clone the repository:\n\n```bash\ngit clone https://github.com/s-satyajit/multi-user-chatApp.git\ncd multi-user-chatApp\n```\n\n### Installing Dependencies\n\n#### 2. Install dependencies:\n\n```bash\nnpm install\n```\n#### 3. Configure Firebase:\n\n- Create a Firebase project in the Firebase Console.\n\n- Obtain your Firebase configuration details from the project settings.\n\n- Create a ```.env``` file in the root directory and add your Firebase configuration.\n\n```env\nREACT_APP_FIREBASE_API_KEY=\u003cyour-firebase-api-key\u003e\nREACT_APP_FIREBASE_AUTH_DOMAIN=\u003cyour-firebase-auth-domain\u003e\nREACT_APP_FIREBASE_PROJECT_ID=\u003cyour-firebase-project-id\u003e\nREACT_APP_FIREBASE_STORAGE_BUCKET=\u003cyour-firebase-storage-bucket\u003e\nREACT_APP_FIREBASE_MESSAGING_SENDER_ID=\u003cyour-firebase-messaging-sender-id\u003e\nREACT_APP_FIREBASE_APP_ID=\u003cyour-firebase-app-id\u003e\n```\n---\n## Usage\nOnce the setup is complete, you can use the following features:\n\n#### **1. Sign Up/In:**\n\n- Users can sign up and sign in using Firebase Authentication.\n\n#### 2. **Messaging:**\n\n- Start new conversations and send messages in real-time using Firebase Firestore.\n\n#### 3. **User Presence:**\n\nView the online/offline status of other users.\n\n## Project Structure\nHere's an overview of the project's structure:\n\n```\n📦 Project Root\n├── .gitignore                 # Git ignore rules\n├── README.md                  # Project documentation\n├── eslint.config.js           # ESLint configuration\n├── index.html                 # Main HTML file\n├── package-lock.json          # Lockfile for npm dependencies\n├── package.json               # Project metadata and dependencies\n├── public/                    # Public assets\n│   ├── arrowDown.png          # Arrow down icon\n│   ├── arrowUp.png            # Arrow up icon\n│   ├── avatar.png             # User avatar\n│   ├── bg.jpg                 # Background image\n│   ├── camera.png             # Camera icon\n│   ├── download.png           # Download icon\n│   ├── edit.png               # Edit icon\n│   ├── emoji.png              # Emoji icon\n│   ├── favicon.png            # Favicon\n│   ├── img.png                # Generic image\n│   ├── info.png               # Info icon\n│   ├── mic.png                # Microphone icon\n│   ├── minus.png              # Minus icon\n│   ├── more.png               # More options icon\n│   ├── phone.png              # Phone icon\n│   ├── plus.png               # Plus icon\n│   ├── search.png             # Search icon\n│   ├── theme.png              # Theme icon\n│   ├── video.png              # Video icon\n│   └── vite.svg               # Vite logo\n├── src/                       # Source code\n│   ├── App.jsx                # Main React component\n│   ├── assets/                # Asset files\n│   │   └── react.svg          # React logo\n│   ├── components/            # React components\n│   │   ├── chat/              # Chat feature components\n│   │   │   ├── Chat.jsx       # Chat component logic\n│   │   │   └── chat.css       # Chat component styles\n│   │   ├── detail/            # Detail view components\n│   │   │   ├── Detail.jsx     # Detail component logic\n│   │   │   └── detail.css     # Detail component styles\n│   │   ├── list/              # List view components\n│   │   │   └── List.jsx       # List component logic\n│   │   ├── chatList/          # Chat list components\n│   │   │   ├── ChatList.jsx   # Chat list component logic\n│   │   │   └── chatList.css   # Chat list component styles\n│   │   ├── addUser/           # Add user components\n│   │   │   ├── addUser.jsx    # Add user component logic\n│   │   │   └── addUser.css    # Add user component styles\n│   │   ├── userInfo/          # User information components\n│   │   │   ├── Userinfo.jsx   # User information component logic\n│   │   │   └── userInfo.css   # User information component styles\n│   │   ├── login/             # Login components\n│   │   │   ├── Login.jsx      # Login component logic\n│   │   │   └── login.css      # Login component styles\n│   │   └── notification/      # Notification components\n│   │       └── Notification.jsx # Notification component logic\n│   ├── index.css              # Global styles\n│   ├── lib/                   # Utility libraries\n│   │   ├── UserStore.js       # User state management\n│   │   ├── chatStore.js       # Chat state management\n│   │   ├── firebase.js        # Firebase configuration\n│   │   └── upload.js          # File upload utility\n│   ├── main.jsx               # Application entry \n└───────vite.config.js         # Vite configuration\n```\n\n---\n\n## API Endpoints\n### Authentication Endpoints\n#### Sign Up\nRegisters a new user.\n\n## API Endpoints\n\n### Authentication Endpoints\n\n#### **Sign Up**\nRegisters a new user using Firebase Authentication.\n\n```javascript\nimport { getAuth, createUserWithEmailAndPassword } from \"firebase/auth\";\n\nconst signUp = (email, password) =\u003e {\n  const auth = getAuth();\n  createUserWithEmailAndPassword(auth, email, password)\n    .then((userCredential) =\u003e {\n      // Signed up successfully\n    })\n    .catch((error) =\u003e {\n      // Handle errors here\n    });\n};\n```\n\n#### **Sign In**\nAuthenticates a user using Firebase Authentication.\n\n```javascript\nimport { getAuth, signInWithEmailAndPassword } from \"firebase/auth\";\n\nconst signIn = (email, password) =\u003e {\n  const auth = getAuth();\n  signInWithEmailAndPassword(auth, email, password)\n    .then((userCredential) =\u003e {\n      // Signed in successfully\n    })\n    .catch((error) =\u003e {\n      // Handle errors here\n    });\n};\n```\n\n### Chat Endpoints\n\n#### **Get Messages**\nFetches message history for a chat from Firebase Firestore.\n\n```javascript\nimport { getFirestore, collection, query, where, getDocs } from \"firebase/firestore\"; \n\nconst getMessages = async (chatId) =\u003e {\n  const db = getFirestore();\n  const q = query(collection(db, \"messages\"), where(\"chatId\", \"==\", chatId));\n  const querySnapshot = await getDocs(q);\n  const messages = [];\n  querySnapshot.forEach((doc) =\u003e {\n    messages.push(doc.data());\n  });\n  return messages;\n};\n```\n\n#### **Send Message**\nAdds a new message to the chat in Firebase Firestore.\n\n```javascript\nimport { getFirestore, collection, addDoc } from \"firebase/firestore\"; \n\nconst sendMessage = async (chatId, text, userId) =\u003e {\n  const db = getFirestore();\n  await addDoc(collection(db, \"messages\"), {\n    chatId,\n    text,\n    sender: userId,\n    timestamp: new Date()\n  });\n};\n```\n\n---\n\n## Components\n\n### **ChatBox**\nDisplays chat messages and a form to send new messages.\n\n```javascript\nimport React, { useState, useEffect } from 'react';\nimport useSocket from '../hooks/useSocket';\n\nconst ChatBox = ({ chatId }) =\u003e {\n    const [messages, setMessages] = useState([]);\n    const { socket, sendMessage } = useSocket(chatId);\n\n    useEffect(() =\u003e {\n        socket.on('message', (message) =\u003e {\n            setMessages((prevMessages) =\u003e [...prevMessages, message]);\n        });\n\n        return () =\u003e {\n            socket.off('message');\n        };\n    }, [socket]);\n\n    const handleSend = (e) =\u003e {\n        e.preventDefault();\n        const text = e.target.elements.message.value;\n        sendMessage({ chatId, text });\n        e.target.reset();\n    };\n\n    return (\n        \u003cdiv className=\"chat-box\"\u003e\n            {messages.map((msg, index) =\u003e (\n                \u003cdiv key={index} className=\"message\"\u003e{msg.text}\u003c/div\u003e\n            ))}\n            \u003cform onSubmit={handleSend}\u003e\n                \u003cinput type=\"text\" name=\"message\" placeholder=\"Type a message\" required /\u003e\n                \u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\n            \u003c/form\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default ChatBox;\n```\n\n---\n\n## Hooks\n\n### **useSocket**\nCustom hook for managing socket connections.\n\n```javascript\nimport { useState, useEffect } from 'react';\nimport io from 'socket.io-client';\n\nconst useSocket = (chatId) =\u003e {\n    const [socket, setSocket] = useState(null);\n\n    useEffect(() =\u003e {\n        const newSocket = io('http://localhost:5000', { query: { chatId } });\n        setSocket(newSocket);\n\n        return () =\u003e newSocket.close();\n    }, [chatId]);\n\n    const sendMessage = (message) =\u003e {\n        if (socket) {\n            socket.emit('send_message', message);\n        }\n    };\n\n    return { socket, sendMessage };\n};\n\nexport default useSocket;\n```\n\n### **useNotifications**\nCustom hook for managing notifications.\n\n```javascript\nimport { useState, useEffect } from 'react';\n\nconst useNotifications = () =\u003e {\n    const [notifications, setNotifications] = useState([]);\n\n    useEffect(() =\u003e {\n        // Logic to fetch and subscribe to notifications\n    }, []);\n\n    const addNotification = (notification) =\u003e {\n        setNotifications((prevNotifications) =\u003e [...prevNotifications, notification]);\n    };\n\n    return { notifications, addNotification };\n};\n\nexport default useNotifications;\n```\n\n---\n\n## Testing\n\nTo ensure the application functions correctly, run the following command to execute tests:\n\n```bash\nnpm test\n```\n\n---\n\n## Logging and Monitoring\n\n- Use Firebase Analytics for monitoring.\n- Use Firebase Crashlytics for error tracking.\n\n---\n\n## Security\n\n1. Use HTTPS to encrypt data in transit.\n2. Store passwords securely using Firebase Authentication.\n3. Validate inputs to prevent XSS and other attacks.\n4. Regularly update dependencies.\n\n---\n\n## Performance Optimization\n\n- Use Firestore's offline capabilities.\n- Implement lazy loading for components.\n- Optimize Firestore queries.\n- Use Firebase Performance Monitoring.\n\n---\n\n## Deployment\n\n### **Manual Deployment**\n1. Build the project:\n   ```bash\n   npm run build\n   ```\n\n2. Initialize Firebase in your project:\n   ```bash\n   firebase init\n   ```\n\n3. Deploy the build directory:\n   ```bash\n   firebase deploy\n   ```\n\n### **Automatic Deployment**\nSet up CI/CD pipelines using GitHub Actions.\n\nExample `.github/workflows/deploy.yml`:\n```yaml\nname: Deploy to Firebase\n\non:\n  push:\n    branches:\n      - main\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout code\n        uses: actions/checkout@v2\n\n      - name: Install dependencies\n        run: npm install\n\n      - name: Build project\n        run: npm run build\n\n      - name: Deploy to Firebase\n        run: firebase deploy --token ${{ secrets.FIREBASE_TOKEN }}\n```\n\n---\n\n## Code Quality\n\n- Use linters like ESLint.\n- Write unit and integration tests.\n- Use tools like Prettier for code formatting.\n- Conduct code reviews.\n\n---\n\n## Contribution Guidelines\n\n1. **Fork the repository.**\n2. **Clone your fork:**\n   ```bash\n   git clone https://github.com/your-username/multi-user-chatApp.git\n   cd multi-user-chatApp\n   ```\n3. **Create a new branch:**\n   ```bash\n   git checkout -b feature-name\n   ```\n4. **Make your changes and commit:**\n   ```bash\n   git commit -m \"Add feature-name\"\n   ```\n5. **Push your branch:**\n   ```bash\n   git push origin feature-name\n   ```\n6. **Create a pull request.**\n\n---\n\n## FAQ\n\n**Q: How do I report a bug?**  \nA: Open an issue in the GitHub repository with a detailed description.\n\n**Q: Can I use this project for my own purposes?**  \nA: Yes, this project is open-source and licensed under the MIT License.\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-satyajit%2Fmulti-user-chatapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-satyajit%2Fmulti-user-chatapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-satyajit%2Fmulti-user-chatapp/lists"}