{"id":18144872,"url":"https://github.com/shayan-tej/chat-app-mern","last_synced_at":"2026-04-30T15:31:58.158Z","repository":{"id":259043273,"uuid":"871884892","full_name":"shayan-tej/chat-app-mern","owner":"shayan-tej","description":"ChatApp is a real-time chat web application built with the MERN stack and Socket.io. It supports secure user authentication with JWT, real-time messaging, and online user status updates. Tailwind CSS \u0026 Daisy UI provide a responsive UI, while Zustand manages global state. The app includes comprehensive error handling for a seamless chat experience.","archived":false,"fork":false,"pushed_at":"2025-02-23T14:07:50.000Z","size":11114,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T20:24:17.279Z","etag":null,"topics":["chatapp","jwt","mern-stack","socket-io"],"latest_commit_sha":null,"homepage":"https://chat-app-mern-92r0.onrender.com","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/shayan-tej.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,"publiccode":null,"codemeta":null}},"created_at":"2024-10-13T08:03:19.000Z","updated_at":"2025-02-23T14:07:53.000Z","dependencies_parsed_at":"2025-04-06T20:23:20.612Z","dependency_job_id":"147bd757-c999-4663-ade3-aacc8b6f1ead","html_url":"https://github.com/shayan-tej/chat-app-mern","commit_stats":null,"previous_names":["shayan-tej/chat-app-mern"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shayan-tej/chat-app-mern","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayan-tej%2Fchat-app-mern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayan-tej%2Fchat-app-mern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayan-tej%2Fchat-app-mern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayan-tej%2Fchat-app-mern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shayan-tej","download_url":"https://codeload.github.com/shayan-tej/chat-app-mern/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shayan-tej%2Fchat-app-mern/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32469344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["chatapp","jwt","mern-stack","socket-io"],"created_at":"2024-11-01T20:06:45.634Z","updated_at":"2026-04-30T15:31:58.142Z","avatar_url":"https://github.com/shayan-tej.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ChatApp\n\n\u003cimg src=\"https://img.shields.io/badge/npm-CB3837?style=for-the-badge\u0026logo=npm\u0026logoColor=white\"/\u003e\u003cimg src=\"https://img.shields.io/badge/Node%20js-339933?style=for-the-badge\u0026logo=nodedotjs\u0026logoColor=white\" /\u003e\u003cimg src=\"https://img.shields.io/badge/Express%20js-000000?style=for-the-badge\u0026logo=express\u0026logoColor=white\"/\u003e\u003cimg src=\"https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge\u0026logo=mongodb\u0026logoColor=white\" /\u003e\u003cimg src=\"https://img.shields.io/badge/Socket.io-010101?\u0026style=for-the-badge\u0026logo=Socket.io\u0026logoColor=white\"/\u003e\u003cimg src=\"https://img.shields.io/badge/JWT-000000?style=for-the-badge\u0026logo=JSON%20web%20tokens\u0026logoColor=white\" /\u003e\u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" /\u003e\u003cimg src=\"https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge\u0026logo=vite\u0026logoColor=FFD62E\" /\u003e\u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" /\u003e\u003cimg src=\"https://img.shields.io/badge/daisyUI-1ad1a5?style=for-the-badge\u0026logo=daisyui\u0026logoColor=white\" /\u003e\u003cimg src=\"https://img.shields.io/badge/Render-46E3B7?style=for-the-badge\u0026logo=render\u0026logoColor=white\" /\u003e\n\nChatApp is a real-time chat web application built using the MERN stack (MongoDB, Express, React, Node.js) and Socket.io. It supports user authentication, real-time messaging, online user status, and more, making it an ideal platform for communication and collaboration.\n\n## Visit Website\n\n[Chat-App-Render](https://chat-app-mern-92r0.onrender.com) `https://chat-app-mern-92r0.onrender.com`\n\n## Table of Contents\n\n- [ChatApp](#chatapp)\n  - [Visit Website](#visit-website)\n  - [Table of Contents](#table-of-contents)\n  - [🌟 Features](#-features)\n  - [🚀 Tech Stack](#-tech-stack)\n  - [🛠 Installation and Setup](#-installation-and-setup)\n  - [🎨 Styling](#-styling)\n  - [📦 Dependencies](#-dependencies)\n    - [Backend](#backend)\n    - [Frontend](#frontend)\n  - [📷 Screenshots](#-screenshots)\n  - [📂 Project Structure](#-project-structure)\n  - [🤝 Contributions](#-contributions)\n  - [📄 License](#-license)\n  - [✨ Acknowledgements](#-acknowledgements)\n\n## 🌟 Features\n\n- **Tech Stack:** MERN + Socket.io + TailwindCSS + Daisy UI\n- **Authentication \u0026 Authorization:** Secure login and signup with JWT (JSON Web Tokens).\n- **Real-time Messaging:** Chat instantly with other users using Socket.io.\n- **Online User Status:** Real-time updates for users coming online and going offline (using Socket.io and React Context).\n- **Global State Management:** Managed efficiently with Zustand.\n- **Error Handling:** Comprehensive error handling on both the client and server sides to enhance the user experience.\n\n## 🚀 Tech Stack\n\n- **Frontend:** React, Tailwind CSS, Daisy UI, Zustand, Socket.io-client\n- **Backend:** Node.js, Express, MongoDB, JWT, Socket.io\n\n## 🛠 Installation and Setup\n\nFollow these steps to set up the application locally:\n\n1. **Clone the repository:**\n\n   ```bash\n   https://github.com/shayan-tej/chat-app-mern.git\n   ```\n\n2. **Install dependencies for both the backend and frontend:**\n\n   - Backend:\n\n     ```bash\n     npm install\n     ```\n\n   - Frontend:\n\n     ```bash\n     cd frontend\n     npm install\n     ```\n\n3. **Set up environment variables:**\n\n   Create a `.env` file outside the `backend` directory with the following variables:\n\n   ```makefile\n   PORT = 5000\n   MONGO_DB_URI = your_mongodb_connection_string\n   JWT_SECRET = your_jwt_secret\n   NODE_ENV = development\n   ```\n\n4. **Run the Application:**\n\n   - Backend\n\n     ```bash\n     npm run start\n     ```\n\n   - Frontend\n\n     ```bash\n     cd frontend\n     npm run dev\n     ```\n\n5. **Access the application:** Open your browser and go to `http://localhost:3000`\n\n## 🎨 Styling\n\nThe application is styled using **TailwindCSS** and **Daisy UI** for a modern and responsive user interface.\n\n## 📦 Dependencies\n\n### Backend\n\n- Express\n- MongoDB \u0026 Mongoose\n- Socket.io\n- JWT\n- bcrypt\n\n### Frontend\n\n- React\n- Tailwind CSS \u0026 Daisy UI\n- Zustand\n- Socket.io-client\n\n## 📷 Screenshots\n\n- Sign Up Page\n  ![Signup Screenshot](screenshots/signup.png)\n- Login Page\n  ![Login Screenshot](screenshots/login.png)\n- Home Page\n  ![Home Screenshot](screenshots/home.png)\n- Chat Page\n  ![Chat Screenshot](screenshots/conversation.png)\n\n## 📂 Project Structure\n\n```plaintext\nChatApp/\n├── backend/\n│   ├── controllers/\n│   ├── db/\n│   ├── middlewares/\n│   ├── models/\n│   ├── routes/\n│   ├── socket/\n│   ├── utils/\n│   ├── server.js\n├── frontend/\n│   ├── public/\n│   ├── src/\n│   │   ├── assets/\n│   │   ├── components/\n│   │   │   ├── messages/\n│   │   │   ├── sidebar/\n│   │   │   └── skeletons/\n│   │   ├── context/\n│   │   ├── hooks/\n│   │   ├── pages/\n│   │   │   ├── home/\n│   │   │   ├── login/\n│   │   │   └── signup/\n│   │   ├── utils/\n│   │   ├── zustand/\n│   │   ├── App.jsx\n│   │   ├── index.css\n│   │   └── main.jsx\n│   ├── index.html\n│   └── package.json\n├── .env\n├── .gitignore\n├── package.json\n└── README.md\n```\n\n## 🤝 Contributions\n\nContributions are welcome! Please feel free to submit a Pull Request or open an issue.\n\n## 📄 License\n\nThis project is licensed under the `MIT License`. See the LICENSE file for details.\n\n## ✨ Acknowledgements\n\n- [Socket.io](https://socket.io/)\n- [MERN Stack](https://www.mongodb.com/resources/languages/mern-stack)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Daisy UI](https://daisyui.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshayan-tej%2Fchat-app-mern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshayan-tej%2Fchat-app-mern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshayan-tej%2Fchat-app-mern/lists"}