Real Time Chatapp
Real Time Chat App - MERN live💬
If you like project give a star ⭐ and check out more project repositories.
- Introducing our cutting-edge Real-time Chat Application, a powerful platform designed to revolutionize your communication experience. This application is built using the MERN stack (MongoDB, Express.js, React.js, Node.js) and leverages LiveSocket.io for seamless real-time interactions also added user chat search functionality. This chat app comes packed with a host of robust features to ensure secure, efficient, and engaging conversations.
Connect me on 🌐:
Videos & Images
Videos
https://github.com/user-attachments/assets/795a7b61-1a12-4721-8519-c95846fb4cc9
Images
| SignUp | SignIn |
|---|---|
| All Registered Chat | Live Chats |
|---|---|
Key Features 😎
Authentication🔐: Enjoy a secure and streamlined authentication process with JWT for login, signup, and logout functionalities.
Private Live Chat💬: Engage in real-time private conversations with other users, providing a fast and responsive chat experience.
User Chat Search🔎 You can search user chat by the typing user's name in search bar.
Online User Indicator⌛: Instantly see who is online with our real-time user indicator, helping you connect with them at the right moment.
Notification Sound🔊: Message with notification sounds that alert you whenever a new message arrives.
Responsive Design📲: Optimized for a seamless experience across all devices.
Tech-Stack & Tools ⚙️
Front-End: React.js, JavaScript
Styling: Tailwind CSS, Daisy UI
Back-End: Node.js, Express.js
Database: MongoDB, Mongoose
Libraries / Packages: JWT (JSON Web Tokens)
Tools: VS Code, Postman, MongoDB Compass, Chrome
Environment Variables ☁️
To run this project, you will need to add the following environment variables to your .env.local file
- **`JWT_SECRET = `**
- **`MONGO_DB_URI = `**
- **`PORT = `**
Run Locally
- Clone the project
git clone https://github.com/Sandip-Chavda/Real-Time-ChatApp.git
- Install dependencies
npm install
- Start the server
npm run dev
- Access the Application: Open your web browser and visit
http://localhost:5173to access the Real-Time Chat App.
Deploy on Render
The easiest way to deploy your React.js Backend is to use the Render.com.
Check out our Render deployment documentation for more details.
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh
Tailwind CSS visit for the better understanding of the styling and customize your website with this.
Daisy UI The most popular component library for Tailwind CSS. daisyUI adds component class names to Tailwind CSS ,so you can make beautiful websites faster than ever.
Socket.io is a library that enables low-latency, bidirectional and event-based communication between a client and a server. Get started by following link.
MongoDB DataBase you can visit this website and learn more about mongodb database.
Mongoose visit for the better understanding of Schema generation..
License
