{"id":15132943,"url":"https://github.com/sarvesh-work/chitchat-chatwebapp","last_synced_at":"2026-02-18T00:32:07.000Z","repository":{"id":257270531,"uuid":"857751487","full_name":"Sarvesh-Work/ChitChat-chatWebApp","owner":"Sarvesh-Work","description":"\"ChitChat is a real-time chat application built using the MERN stack with Socket.io for messaging, Redux Toolkit for state management, and RTK Query for data fetching. It supports private chats, group conversations, and user status indicators, offering a smooth communication experience.\"","archived":false,"fork":false,"pushed_at":"2025-01-25T12:37:44.000Z","size":1676,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T08:51:35.094Z","etag":null,"topics":["material-ui","mern-stack","reacthookform","redux-toolkit","rtk-query","socket-io"],"latest_commit_sha":null,"homepage":"https://chit-chat-chat-web-app.vercel.app","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/Sarvesh-Work.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}},"created_at":"2024-09-15T14:17:07.000Z","updated_at":"2025-01-25T12:37:48.000Z","dependencies_parsed_at":"2024-09-15T17:04:55.062Z","dependency_job_id":"3476ca80-f980-4eea-ab73-206acfa9003a","html_url":"https://github.com/Sarvesh-Work/ChitChat-chatWebApp","commit_stats":null,"previous_names":["sarvesh-work/chitchat-chatwebapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarvesh-Work%2FChitChat-chatWebApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarvesh-Work%2FChitChat-chatWebApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarvesh-Work%2FChitChat-chatWebApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarvesh-Work%2FChitChat-chatWebApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sarvesh-Work","download_url":"https://codeload.github.com/Sarvesh-Work/ChitChat-chatWebApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578874,"owners_count":21127714,"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":["material-ui","mern-stack","reacthookform","redux-toolkit","rtk-query","socket-io"],"created_at":"2024-09-26T04:41:51.690Z","updated_at":"2026-02-18T00:32:06.957Z","avatar_url":"https://github.com/Sarvesh-Work.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ChitChat - Real-Time Chat Web Application\n\n**ChitChat** is a full-stack, real-time chat application built using the MERN stack, Socket.IO, Redux Toolkit, RTK Query, and React Hook Form. The application supports features like group messaging, real-time updates, and online/offline user status.\n\n[📱 Visit ChitChat Project](https://chit-chat-chat-web-app.vercel.app/)\n\n## ✨ Features\n\n- Real-time messaging with **Socket.IO**\n- Group chat functionality\n- Online/offline status indicators\n- Typing indicators\n- Scalable architecture using **MERN stack**\n- **JWT-based** authentication\n- Responsive UI with **Material-UI**\n- Efficient state management with **Redux Toolkit**\n- API data fetching with **RTK Query**\n- Form handling with **React Hook Form**\n\n## 💻 Technologies\n\n### Frontend (Client)\n- **React** with functional components and hooks\n- **Redux Toolkit** for state management\n- **RTK Query** for API interactions\n- **Material UI (MUI)** for the UI components\n- **Socket.IO** for real-time communication\n- **React Hook Form** for form handling\n\n### Backend (Server)\n- **Node.js** and **Express** for the server-side application\n- **MongoDB** and **Mongoose** for database management\n- **Socket.IO** for real-time WebSocket communication\n- **JWT** for authentication\n\n## 🔎 Glimpse of ChitChat\n\n| ![Image 1](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495918/bxxw23ay0czvesexrizg.png) | ![Image 2](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495918/we4hogcsfdleewiya4so.png) |\n|:----------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|\n| ![Image 3](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495918/sysituvxmez8lgay9woo.png) | ![Image 4](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495917/ghjufffcyvbpzczuwqgh.png) |\n| ![Image 5](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495917/ahqpw8qlbpvo9do2nxqk.png) | ![Image 6](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495917/lskry2dehwqzu6kp31tw.png) |\n| ![Image 7](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495917/hhmzlcwxi2qt07iqgmvq.png) | ![Image 8](https://res.cloudinary.com/sarvesh-img/image/upload/v1726495917/qoqf5jarf7ncmrnkbxqj.png) |\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nMake sure you have the following installed:\n\n- **Node.js** (v14+)\n- **MongoDB**\n- **Git**\n\n### Cloning\n\n1. Clone the repository:\n\n    ```bash\n    git clone https://github.com/Sarvesh-Work/ChitChat-chatWebApp.git\n    ```\n\n2. Navigate to the project directory:\n\n    ```bash\n    cd ChitChat-chatWebApp\n    ```\n\n### Setting up the Client\n\n1. Go to the **client** directory:\n\n    ```bash\n    cd client\n    ```\n\n2. Install the dependencies:\n\n    ```bash\n    npm install\n    ```\n\n3. Create an `.env` file in the `client` directory and add your environment variables.\n\n4. Start the client application:\n\n    ```bash\n    npm start\n    ```\n\n### Setting up the Server\n\n1. Go to the **server** directory:\n\n    ```bash\n    cd ../server\n    ```\n\n2. Install the dependencies:\n\n    ```bash\n    npm install\n    ```\n\n3. Create an `.env` file in the `server` directory and add the required environment variables:\n\n    ```bash\n    PORT=\u003cYour server port (e.g., 5000)\u003e\n    MONGODB_URL=\u003cYour MongoDB connection string\u003e\n    JWT_KEY=\u003cYour JWT secret key\u003e\n    LIMIT_PER_PAGE=\u003cPagination limit per page (e.g., 20)\u003e\n    FRONTEND_PORT=\u003cYour client app port (e.g., 3000)\u003e\n    CLOUD_NAME=\u003cYour Cloudinary cloud name for image uploads\u003e\n    API_KEY=\u003cYour Cloudinary API key\u003e\n    API_SECRET=\u003cYour Cloudinary API secret\u003e\n    ```\n\n4. Start the server:\n\n    ```bash\n    npm run dev\n    ```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarvesh-work%2Fchitchat-chatwebapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarvesh-work%2Fchitchat-chatwebapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarvesh-work%2Fchitchat-chatwebapp/lists"}