{"id":27161503,"url":"https://github.com/atilmohamine/chat-app","last_synced_at":"2025-04-09T00:40:28.027Z","repository":{"id":216854732,"uuid":"742470043","full_name":"AtilMohAmine/Chat-App","owner":"AtilMohAmine","description":"A real-time chat application built with Express.js, Socket.io, React, MongoDB, and JWT authentication.","archived":false,"fork":false,"pushed_at":"2024-02-19T17:26:45.000Z","size":1002,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-02-19T19:17:27.418Z","etag":null,"topics":["chat","jwt","jwt-authentication","mern","react","real-time","socket-io"],"latest_commit_sha":null,"homepage":"https://chat-app-fj7r.onrender.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AtilMohAmine.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":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-12T14:52:48.000Z","updated_at":"2024-02-16T04:56:48.000Z","dependencies_parsed_at":"2024-01-14T11:22:55.573Z","dependency_job_id":"2f84afe6-e438-4ef4-835b-70158214a972","html_url":"https://github.com/AtilMohAmine/Chat-App","commit_stats":null,"previous_names":["atilmohamine/chat-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AtilMohAmine%2FChat-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AtilMohAmine%2FChat-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AtilMohAmine%2FChat-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AtilMohAmine%2FChat-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AtilMohAmine","download_url":"https://codeload.github.com/AtilMohAmine/Chat-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247953105,"owners_count":21023945,"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","jwt","jwt-authentication","mern","react","real-time","socket-io"],"created_at":"2025-04-09T00:40:27.566Z","updated_at":"2025-04-09T00:40:28.018Z","avatar_url":"https://github.com/AtilMohAmine.png","language":"JavaScript","readme":"# Chat App\n\n\u003cdiv align=\"center\"\u003e \n\n![GitHub License](https://img.shields.io/github/license/atilmohamine/Chat-app)\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/atilmohamine/Chat-App/server.yml)\n\n\u003c/div\u003e\n\nA real-time chat application built with Express.js, Socket.io, React, MongoDB, and JWT authentication.\n\n\u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/a6d9e2f8-6244-4d67-a62c-9da051fbae35\" style=\"border-radius: 1%\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- **Real-time Chat Functionality:** Real-time chat functionality using Socket.io for bidirectional communication.\n- **User Authentication using JWT:** Secure user authentication using JWT (JSON Web Tokens).\n- **Responsive and Intuitive User Interface:** The application features a responsive design, ensuring a seamless user experience on various devices, including desktops, tablets, and mobile phones.\n- **Creating and Joining Rooms:** Users can create new chat rooms or join existing ones, allowing for organized and topic-specific conversations.\n- **Guest User Access with Limited Privileges:** Guest users can access the chat with limited privileges, such as being unable to create rooms.\n- **Allowed File Types for Messages:** Support for sharing images and files in the chat.\n\n## Architecture Diagram\n\nBelow is the architecture diagram illustrating the components and flow of the Chat App:\n\n\u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/7bd738fc-d830-42e3-a756-623101910f78\"\u003e\n\u003c/p\u003e\n\n## Getting Started\n\n### Installation\n\nClone the repository:\n\n```bash\n$ git clone https://github.com/AtilMohAmine/Chat-App.git\n```\n\nNavigate to the project directory:\n\n```bach\n$ cd chat-app\n```\n\nInstall dependencies for both the server and client:\n\n```bach\n$ cd chat-app/server\n$ npm install\n\n$ cd ../client\n$ npm install\n```\n\n## Configuration\n\n### Configuring Environment Variables \n\nCreate a `.env` file in the server directory and set the following environment variables:\n\n```env\nPORT=your_port\nDATABASE_URI=your_database_uri\nACCESS_TOKEN_SECRET=your_access_token_secret\nREFRESH_TOKEN_SECRET=your_refresh_token_secret\n```\n\nAdjust the values according to your preferences.\n\nCreate a .env file in the client directory and set the following environment variable:\n\n```env\nREACT_APP_SERVER_URL=your_server_url\n```\n\n### Editing allowedOrigins.js\n\nIn the server/config directory, edit the `allowedOrigins.js` file:\n\n```javascript\n// server/config/allowedOrigins.js\n\nconst allowedOrigins = [\n    'https://www.yoursite.com',\n    'http://localhost:3000'\n];\n\nexport default allowedOrigins;\n```\n\nThis configuration indicates that your server will allow requests from \u003chttps://www.yoursite.com\u003e and \u003chttp://localhost:3000\u003e.\n\n### Editing allowedFileTypes.js\n\nThe `allowedFileTypes.js` configuration is specifying which types of files accepted for sending in messages and uploading profile pictures within your chat application.\n\nIn the server/config directory, Modify the content of `allowedFileTypes.js` to specify the types of files that are allowed. For example, you might have:\n\n```javascript\n// server/config/allowedFileTypes.js\n\nconst allowedFileTypes = {\n    messages: [\n        'image/jpeg',\n        'image/jpg',\n        'image/png',\n        'application/pdf',\n    ],\n    profilePictures: [\n        'image/jpeg',\n        'image/jpg',\n        'image/png',\n    ],\n};\n\nexport default allowedFileTypes\n```\n\nThis configuration provides a structured approach, allowing you to define specific file types for messages and profile pictures. Adjust the file types based on your application's requirements.\n\n### Why These Configurations Matter\n\nThese configurations are essential for security and access control. The allowedFileTypes configuration determines which types of files are accepted by your server, and the allowedOrigins configuration restricts requests to your server from specific domains. Adjust these configurations based on your project's requirements and security policies.\n\n## Usage\n\nStart the server and client:\n\n```bach\n# In the server directory\n$ npm start\n\n# In the client directory\n$ npm start\n```\n\nThis will run the server on the specified port and the client on its respective port.\n\n## Using Docker\n\n### Configuring Environment Variables\n\nBefore building the Docker images, make sure to configure the environment variables in the Dockerfiles according to your requirements.\n\nServer Dockerfile (server/Dockerfile)\n\n```Dockerfile\n...\n\n# Set environment variables\nENV PORT=your_port \\\n    DATABASE_URI=your_database_uri \\\n    ACCESS_TOKEN_SECRET=your_access_token_secret \\\n    REFRESH_TOKEN_SECRET=your_refresh_token_secret\n\n...\n```\n\nClient Dockerfile (client/Dockerfile)\n\n```Dockerfile\n...\n\n# Set environment variables\nENV REACT_APP_SERVER_URL=your_server_url\n\n...\n```\n\n### Building Docker Images\n\nTo build Docker images for both the server and client applications, navigate to the respective directories (server and client) and run:\n\n```bash\n$ docker build -t chat-server ./server\n$ docker build -t chat-client ./client\n```\n\nReplace chat-server and chat-client with your desired image names.\n\n### Running Docker Containers\n\nAfter building the Docker images, you can run Docker containers for the server and client applications using the following commands:\n\nServer Container\n\n```bash\n$ docker run -d -p 3001:3001 --name chat-server chat-server\n```\n\nClient Container\n\n```bash\n$ docker run -d -p 3000:3000 --name chat-client chat-client\n```\n\nReplace chat-server and chat-client with your image names, and adjust the port mappings (`-p`) as needed.\n\nThe syntax for the `-p` option is `-p HOST_PORT:CONTAINER_PORT`.\n\n- `HOST_PORT`: This is the port on your host machine (the machine running Docker) that you want to map to.\n - `CONTAINER_PORT`: This is the port inside the Docker container that you want to expose.\n\n### Accessing Your App\n\nOnce the containers are running, you can access your application at the following URLs:\n\n - Server: http://localhost:3001\n - Client: http://localhost:3000\n\n## Docker Compose\n\nCreate a `.env` file in the server directory with the following environment variables:\n\n```env\nDB_USER=your_mongodb_username\nDB_PASSWORD=your_mongodb_password\nDB_NAME=your_mongodb_database_name\n```\n\nRun the following command to start the services defined in the docker-compose.yml file:\n\n```bash\n$ docker-compose up -d\n```\n\nOnce the services are up and running, you can access the chat application at http://localhost:3000 in your web browser.\n\n## Screenshots\n\nHere are some screenshots showcasing the Chat App:\n\n\u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/76fe8eb7-9d77-451c-b9d3-5a0d74f3492f\"\u003e\n   \u003cimg src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/38bf0037-8419-40d5-86f4-62f73b1558a9\"\u003e\n   \u003cimg src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/19f19bab-7a89-4a41-a14a-1c43cfc0dc79\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003cimg width=\"200px\" src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/2a6c462a-ed98-4105-9103-607a96ca6c42\"\u003e\n   \u003cimg width=\"200px\" src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/f90eabc9-d862-48f6-a98a-9a6774ea129e\"\u003e\n   \u003cimg width=\"200px\" src=\"https://github.com/AtilMohAmine/Chat-App/assets/86023602/573c5388-190d-4f28-83ac-6cdfabc3ad60\"\u003e\n\u003c/p\u003e\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/AtilMohAmine/Chat-App/blob/main/LICENSE) file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatilmohamine%2Fchat-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatilmohamine%2Fchat-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatilmohamine%2Fchat-app/lists"}