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.
- 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.
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
-
Clone the repository:
git clone https://github.com/Iryna-Vyshniak/real-time-chat-app.git cd real-time-chat-app
-
Install dependencies:
npm install cd frontend npm install
-
Create
.env
file in the backend directory and add the following environment variables:
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
- Start the development server:
npm run server
cd frontend
npm run dev
- Open your browser and navigate to http://localhost:3000
Check out the live demo: Real-Time Chat App Demo
![]() |
![]() |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
For detailed documentation, refer to the Wiki.
We welcome contributions! Please read our contributing guidelines for more information.
This project is licensed under the MIT License with attribution requirements - see the LICENSE file for details.