https://github.com/shayan-tej/chat-app-mern
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 & Daisy UI provide a responsive UI, while Zustand manages global state. The app includes comprehensive error handling for a seamless chat experience.
https://github.com/shayan-tej/chat-app-mern
chatapp jwt mern-stack socket-io
Last synced: 2 months ago
JSON representation
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 & Daisy UI provide a responsive UI, while Zustand manages global state. The app includes comprehensive error handling for a seamless chat experience.
- Host: GitHub
- URL: https://github.com/shayan-tej/chat-app-mern
- Owner: shayan-tej
- License: mit
- Created: 2024-10-13T08:03:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-23T14:07:50.000Z (over 1 year ago)
- Last Synced: 2025-04-06T20:24:17.279Z (about 1 year ago)
- Topics: chatapp, jwt, mern-stack, socket-io
- Language: JavaScript
- Homepage: https://chat-app-mern-92r0.onrender.com
- Size: 10.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ChatApp
ChatApp 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.
## Visit Website
[Chat-App-Render](https://chat-app-mern-92r0.onrender.com) `https://chat-app-mern-92r0.onrender.com`
## Table of Contents
- [ChatApp](#chatapp)
- [Visit Website](#visit-website)
- [Table of Contents](#table-of-contents)
- [🌟 Features](#-features)
- [🚀 Tech Stack](#-tech-stack)
- [🛠 Installation and Setup](#-installation-and-setup)
- [🎨 Styling](#-styling)
- [📦 Dependencies](#-dependencies)
- [Backend](#backend)
- [Frontend](#frontend)
- [📷 Screenshots](#-screenshots)
- [📂 Project Structure](#-project-structure)
- [🤝 Contributions](#-contributions)
- [📄 License](#-license)
- [✨ Acknowledgements](#-acknowledgements)
## 🌟 Features
- **Tech Stack:** MERN + Socket.io + TailwindCSS + Daisy UI
- **Authentication & Authorization:** Secure login and signup with JWT (JSON Web Tokens).
- **Real-time Messaging:** Chat instantly with other users using Socket.io.
- **Online User Status:** Real-time updates for users coming online and going offline (using Socket.io and React Context).
- **Global State Management:** Managed efficiently with Zustand.
- **Error Handling:** Comprehensive error handling on both the client and server sides to enhance the user experience.
## 🚀 Tech Stack
- **Frontend:** React, Tailwind CSS, Daisy UI, Zustand, Socket.io-client
- **Backend:** Node.js, Express, MongoDB, JWT, Socket.io
## 🛠 Installation and Setup
Follow these steps to set up the application locally:
1. **Clone the repository:**
```bash
https://github.com/shayan-tej/chat-app-mern.git
```
2. **Install dependencies for both the backend and frontend:**
- Backend:
```bash
npm install
```
- Frontend:
```bash
cd frontend
npm install
```
3. **Set up environment variables:**
Create a `.env` file outside the `backend` directory with the following variables:
```makefile
PORT = 5000
MONGO_DB_URI = your_mongodb_connection_string
JWT_SECRET = your_jwt_secret
NODE_ENV = development
```
4. **Run the Application:**
- Backend
```bash
npm run start
```
- Frontend
```bash
cd frontend
npm run dev
```
5. **Access the application:** Open your browser and go to `http://localhost:3000`
## 🎨 Styling
The application is styled using **TailwindCSS** and **Daisy UI** for a modern and responsive user interface.
## 📦 Dependencies
### Backend
- Express
- MongoDB & Mongoose
- Socket.io
- JWT
- bcrypt
### Frontend
- React
- Tailwind CSS & Daisy UI
- Zustand
- Socket.io-client
## 📷 Screenshots
- Sign Up Page
- Login Page
- Home Page
- Chat Page
## 📂 Project Structure
```plaintext
ChatApp/
├── backend/
│ ├── controllers/
│ ├── db/
│ ├── middlewares/
│ ├── models/
│ ├── routes/
│ ├── socket/
│ ├── utils/
│ ├── server.js
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ │ ├── messages/
│ │ │ ├── sidebar/
│ │ │ └── skeletons/
│ │ ├── context/
│ │ ├── hooks/
│ │ ├── pages/
│ │ │ ├── home/
│ │ │ ├── login/
│ │ │ └── signup/
│ │ ├── utils/
│ │ ├── zustand/
│ │ ├── App.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── index.html
│ └── package.json
├── .env
├── .gitignore
├── package.json
└── README.md
```
## 🤝 Contributions
Contributions are welcome! Please feel free to submit a Pull Request or open an issue.
## 📄 License
This project is licensed under the `MIT License`. See the LICENSE file for details.
## ✨ Acknowledgements
- [Socket.io](https://socket.io/)
- [MERN Stack](https://www.mongodb.com/resources/languages/mern-stack)
- [Tailwind CSS](https://tailwindcss.com/)
- [Daisy UI](https://daisyui.com/)