{"id":22990111,"url":"https://github.com/akashdeep023/chat_app","last_synced_at":"2025-08-13T21:32:39.232Z","repository":{"id":242670116,"uuid":"810219723","full_name":"akashdeep023/Chat_App","owner":"akashdeep023","description":"Chat Application 😊 using MERN Stack with Tailwind CSS","archived":false,"fork":false,"pushed_at":"2024-11-06T20:03:25.000Z","size":889,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-06T21:18:50.780Z","etag":null,"topics":["chat","chat-application","chatapp","chatapplication","expressjs","group-chat-application","html-css-javascript","mern-stack","message","mongodb","nodejs","reactjs","socket-io","socket-io-client","tailwindcss"],"latest_commit_sha":null,"homepage":"https://chat-application-jack.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/akashdeep023.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":"2024-06-04T09:23:13.000Z","updated_at":"2024-11-06T20:03:29.000Z","dependencies_parsed_at":"2024-08-24T12:47:11.647Z","dependency_job_id":null,"html_url":"https://github.com/akashdeep023/Chat_App","commit_stats":null,"previous_names":["akashdeep023/chat_app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashdeep023%2FChat_App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashdeep023%2FChat_App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashdeep023%2FChat_App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akashdeep023%2FChat_App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akashdeep023","download_url":"https://codeload.github.com/akashdeep023/Chat_App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229783295,"owners_count":18123453,"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","chat-application","chatapp","chatapplication","expressjs","group-chat-application","html-css-javascript","mern-stack","message","mongodb","nodejs","reactjs","socket-io","socket-io-client","tailwindcss"],"created_at":"2024-12-15T04:32:10.012Z","updated_at":"2025-08-13T21:32:39.219Z","avatar_url":"https://github.com/akashdeep023.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chat Application MERN-Stack Web Application.\n\n\u003cp align=\"center\"\u003e\n  \u003cb style=\"color: blue;  \"\u003eVisitor count\u003c/b\u003e\n  \u003cbr\u003e\n  \u003ca style=\"\" href=\"https://github.com/akashdeep023\"\u003e\n  \u003cimg src=\"https://profile-counter.glitch.me/chat-app/count.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003ca style=\"\" href=\"https://chat-application-jack.vercel.app/\"\u003e\n  \n![Macbook-Air-Iphone-13](https://github.com/user-attachments/assets/24edbef0-083f-44d4-9717-3e659ecb404b)\n\n\u003c/a\u003e\n\n---\n\n## Project Overview\n\n_A real-time **Chat application** built using the MERN stack (MongoDB, Express, React, Node.js) and styled with Tailwind CSS. It supports user authentication, group chats, and instant messaging with real-time updates via Socket.IO. The application is fully responsive and provides smooth communication with features like notifications and state management using Redux._\n\n## Technologies \u0026 Packages Used\n\n-   **MongoDB**: NoSQL database for flexible and scalable data storage.\n-   **Express.js**: Web application framework for Node.js, providing robust features for web and mobile applications.\n-   **Node.js**: JavaScript runtime for server-side development.\n-   **React.js**: A JavaScript library for building reusable UI components and efficient single-page application views.\n-   **Tailwind CSS**: A utility-first CSS framework for rapid UI development.\n-   **Socket.IO**: Enables real-time, bidirectional and event-based communication.\n-   **JWT (JSON Web Tokens)**: Securely transmits information between parties as a JSON object.\n-   **Redux**: A Predictable State Container for JavaScript Apps.\n-   **React-Toastify**: A JavaScript library for providing toast notifications in React.\n\n## Key Features\n\n-   **User Authentication:** SignIn, SignUp, and Logout functionality.\n-   **Real-time Chat:** Users can send and receive messages in real-time.\n-   **Group Chat:** Create and participate in group chats.\n-   **Message Notifications:** Get notified of new messages with sound and visual alerts.\n-   **State Management:** Manage application state efficiently using Redux.\n-   **Responsive Design:** Tailwind CSS for a responsive and modern user interface.\n\u003c!-- -   **User Status:** Display online/offline status of users. --\u003e\n\n## How to Install\n\nFollow these steps to set up and run the project locally:\n\n1.  **Clone the Repository:**\n\n    ```bash\n    git clone https://github.com/akashdeep023/Chat_App.git\n    cd Chat_App\n    ```\n\n2.  **Install Dependencies:**\n    Frontend Folder :\n\n    ```bash\n    cd frontend\n    npm install\n    ```\n\n    Backend Folder :\n\n    ```bash\n    cd backend\n    npm install\n    ```\n\n3.  **Set Up Environment Variables:**\n\n    Configure the following environment variables by creating a .env file in the root of Forntend and Backend Folder:\n\n    Frontend Folder :\n\n    ```bash\n    VITE_BACKEND_URL=http://localhost:9000\n    ```\n\n    Backend Folder :\n\n    ```bash\n    FRONTEND_URL=http://localhost:5173\n    MONGODB_URI=mongodb://127.0.0.1:27017/chat-app\n    PORT=9000\n    JWT_SECRET=secret-kvndkvdlkajkhkJkBiu6JJNjkbhkvnskcmhLJ5dKbkjsamnv\n    ```\n\n    Replace the values with your specific configurations.\n\n4.  **Run the Application:**\n\n    Frontend Folder :\n\n    ```bash\n    npm run dev\n    ```\n\n    Backend Folder :\n\n    ```bash\n    npm run dev\n    ```\n\n5.  **Open in Your Browser:**\n\nOpen `http://localhost:5173` in your web browser.\n\n## Project Structure\n\n    ├── frontend\n    │   ├── public\n    │   ├── src\n    │   │   ├── assets\n    │   │   ├── components\n    │   │   ├── pages\n    │   │   ├── redux\n    │   │   ├── socket\n    │   │   ├── utils\n    │   │   ├── App.jsx\n    │   │   ├── main.jsx\n    │   │   └── index.css\n    │   ├── index.html\n    │   ├── tailwind.config.js\n    │   ├── .env\n    │   └── package.json\n    ├── backend\n    │   ├── config\n    │   ├── controllers\n    │   ├── middlewares\n    │   ├── models\n    │   ├── routes\n    │   ├── server.js\n    │   ├── .env\n    │   └── package.json\n    └── README.md\n\n## Author\n\nAkash Deep \\\nEmail: contact.akashdeep023@gmail.com \\\nLinkedIn : https://www.linkedin.com/in/akashdeep023/\n\n## Images\n**Profile**\n![Macbook-Air-localhost](https://github.com/user-attachments/assets/7ea906d8-10a9-4e79-a3aa-46f45dd328bb)\n\n**Group Create**\n![Macbook-Air-localhost (5)](https://github.com/user-attachments/assets/49cff226-f372-4668-8095-8f741265edc3)\n\n**Chat \u0026 Group Overview**\n![Macbook-Air-localhost (2)](https://github.com/user-attachments/assets/1c367efe-4059-432c-8e6c-86ccb41bf712)\n\n**Chat \u0026 Group Members**\n![Macbook-Air-localhost (3)](https://github.com/user-attachments/assets/58764949-ac05-4c6b-ae6d-34c1d3232f64)\n\n**Chat \u0026 Group Setting**\n![Macbook-Air-localhost (4)](https://github.com/user-attachments/assets/33001244-8e21-46ff-b047-14bcac81829d)\n\n**Add User in Group (Admin Access)**\n![Macbook-Air-localhost (1)](https://github.com/user-attachments/assets/3dbf0fdb-4754-4d77-af5e-81fbf7a681d5)\n\n**Remove User in Group (Admin Access)**\n![Macbook-Air-localhost (6)](https://github.com/user-attachments/assets/526d6786-8813-4997-922c-bc3bfba2ee8b)\n\n**User Search \u0026 Chat**\n![Macbook-Air-localhost (7)](https://github.com/user-attachments/assets/b187e389-0fac-4c50-ba9c-aee1f9f55d66)\n\n**Notification Box**\n![Macbook-Air-localhost (8)](https://github.com/user-attachments/assets/376bdfd8-7ffa-435b-b506-0a7405d5137c)\n\n**Notification Alert**\n![Screenshot 2024-07-22 231334](https://github.com/user-attachments/assets/fbaa92af-ee49-48b7-8442-cd8f8cc4d3bc)\n\n**Shimmer**\n![image](https://github.com/user-attachments/assets/45b6665a-9e2d-4a61-b092-7cb7a0b775be)\n\n**Footer**\n![Screenshot 2024-07-22 154954](https://github.com/user-attachments/assets/82daa377-4285-45a3-af99-f0920344fa0b)\n\n## Thank You\n\nThank you for exploring Chat App! Your feedback is valuable. If you have any suggestions or thoughts, feel free to share them with us. 😊\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashdeep023%2Fchat_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakashdeep023%2Fchat_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashdeep023%2Fchat_app/lists"}