Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iryna-vyshniak/real-time-chat-app
... in progress ... MERN Real Time Chat App | Socket.io | Group and Private Chat | Notification | Audio | Video with Progress | Video Stream| Image | Emoji | Reply | Share Location
https://github.com/iryna-vyshniak/real-time-chat-app
bcryptjs cloudinary cookie-parser daisyui dotenv express framer-motion joi jsonwebtoken mongoose react react-leaflet react-media-recorder socket-io zustand
Last synced: about 1 month ago
JSON representation
... in progress ... MERN Real Time Chat App | Socket.io | Group and Private Chat | Notification | Audio | Video with Progress | Video Stream| Image | Emoji | Reply | Share Location
- Host: GitHub
- URL: https://github.com/iryna-vyshniak/real-time-chat-app
- Owner: Iryna-Vyshniak
- License: other
- Created: 2024-02-06T17:36:16.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-08-20T11:58:28.000Z (5 months ago)
- Last Synced: 2024-11-16T18:00:40.469Z (2 months ago)
- Topics: bcryptjs, cloudinary, cookie-parser, daisyui, dotenv, express, framer-motion, joi, jsonwebtoken, mongoose, react, react-leaflet, react-media-recorder, socket-io, zustand
- Language: JavaScript
- Homepage: https://chat-mern-ujj2.onrender.com
- Size: 32.5 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Real-Time Chat App
This project is a real-time chat application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.io. It supports group and private chat, notifications, audio and video messages, video streaming, image sharing, emojis, replies, and location sharing.
## Features
- **Group and Private Chat:** Communicate in groups or one-on-one.
- **Notifications:** Receive notifications for new messages.
- **Audio and Video Messages:** Send and receive audio and video messages with progress tracking.
- **Video Streaming:** Stream live video.
- **Image Sharing:** Share images within chats.
- **Emojis:** Express yourself with a wide range of emojis.
- **Replies:** Reply to specific messages.
- **Location Sharing:** Share your location in real-time.
## Technologies Used
- **`Frontend:`**
- React
- Zustand
- DaisyUI
- Framer Motion
- React Media Recorder
- React Leaflet
- **`Backend:`**
- Node.js
- Express
- MongoDB
- Mongoose
- Socket.io
- Joi
- Cloudinary
- JSON Web Tokens
- Cookie Parser
- Bcrypt.js
- **`Others:`**
- dotenv
- ESLint
## Setup and Installation
1. Clone the repository:
```bash
git clone https://github.com/Iryna-Vyshniak/real-time-chat-app.git
cd real-time-chat-app
```
2. Install dependencies:
```bash
npm install
cd frontend
npm install
```
3. Create `.env` file in the backend directory and add the following environment variables:
```bash
PORT=5000
DB_HOST=your_mongo_uri
NODE_ENV=development
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_SECRET_KEY=your_cloudinary_api_secret
```
4. Start the development server:
```bash
npm run server
cd frontend
npm run dev
```
5. Open your browser and navigate to http://localhost:3000
## Demo
Check out the live demo: [Real-Time Chat App Demo](https://chat-mern-ujj2.onrender.com/)
|  |  |
| -------------------------------------------------------------- | -------------------------------------------------------------- |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
## Documentation
For detailed documentation, refer to the [Wiki](https://github.com/Iryna-Vyshniak/real-time-chat-app/wiki).
## Contributing
We welcome contributions! Please read our [contributing guidelines](CONTRIBUTING.md) for more information.
## License
This project is licensed under the MIT License with attribution requirements - see the [LICENSE](LICENSE) file for details.