https://github.com/luminarakash/real-time-chat-application
This is a real-time chat application built using the MERN stack, enhanced with Tailwind CSS for styling and Socket.IO for seamless, real-time communication. The project demonstrates how modern web technologies can be integrated to create a responsive, scalable, and interactive chat platform.
https://github.com/luminarakash/real-time-chat-application
cloudinary-api css3 daisyui express-js html5 javascript jwt-authentication mongodb mongodb-atlas nodejs reactjs redux-toolkit restful-api socket-io tailwind-css zustand
Last synced: about 1 month ago
JSON representation
This is a real-time chat application built using the MERN stack, enhanced with Tailwind CSS for styling and Socket.IO for seamless, real-time communication. The project demonstrates how modern web technologies can be integrated to create a responsive, scalable, and interactive chat platform.
- Host: GitHub
- URL: https://github.com/luminarakash/real-time-chat-application
- Owner: luminarakash
- Created: 2024-12-21T15:17:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-22T07:25:16.000Z (over 1 year ago)
- Last Synced: 2026-01-03T12:23:31.508Z (4 months ago)
- Topics: cloudinary-api, css3, daisyui, express-js, html5, javascript, jwt-authentication, mongodb, mongodb-atlas, nodejs, reactjs, redux-toolkit, restful-api, socket-io, tailwind-css, zustand
- Language: JavaScript
- Homepage: https://luminarakash-chat-app.onrender.com
- Size: 1.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀Real-time-chat-application🚀
This is a real-time chat application built using the MERN stack, enhanced with Tailwind CSS for styling and Socket.IO for seamless, real-time communication. The project demonstrates how modern web technologies can be integrated to create a responsive, scalable, and interactive chat platform.
[Video Tutorial on Youtube](https://youtu.be/_zO6LbRhJx4?si=xWmJU3hkUO_OGe4n)
Highlights:
- ⭐ Tech stack: MERN + Socket.io + TailwindCSS + Daisy UI
- ⭐ Authentication && Authorization with JWT
- ⭐ Real-time messaging with Socket.io
- ⭐ Online user status
- ⭐ Global state management with Zustand
- ⭐ Error handling both on the server and on the client
- ⭐ At the end Deployment like a pro for FREE!
- ⭐ And much more!
### Setup .env file
```js
MONGODB_URI=...
PORT=5001
JWT_SECRET=...
CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...
NODE_ENV=development
```
### Build the app
```shell
npm run build
```
### Start the app
```shell
npm start
```
## Features
- **Real-Time Messaging**: Instant communication between users using Socket.IO.
- **User Authentication**: Secure user registration and login with JWT-based authentication.
- **Responsive Design**: Fully responsive UI designed with Tailwind CSS for an optimal experience across devices.
- **User Status**: Display online/offline status of users.
- **Chat Rooms**: Support for one-on-one and group chats.
- **Message Notifications**: Get notified when a new message is received.
- **Message History**: Persistent chat history stored in MongoDB.
- **Scalable Architecture**: Built using a modular and scalable structure for ease of future enhancements.
## Tech Stack
### Frontend
- **React.js**: Frontend framework for building user interfaces.
- **Tailwind CSS**: Utility-first CSS framework for styling.
### Backend
- **Node.js**: Backend runtime environment.
- **Express.js**: Web framework for Node.js.
- **Socket.IO**: Real-time communication between client and server.
### Database
- **MongoDB**: NoSQL database for storing user and chat data.
### Authentication
- **JSON Web Tokens (JWT)**: Secure user authentication.
## Future Enhancements
- **Media Sharing**: Add support for sharing images, videos, and files.
- **Message Reactions**: Enable emoji-based reactions to messages.
- **Push Notifications**: Integrate browser notifications for new messages.
- **Video and Voice Calls**: Enhance the platform with video and voice calling features.
## 🧑💻 About Me
Hello, I’m **Akash**, a passionate **Full-Stack Developer** dedicated to crafting impactful web applications.
This portfolio is a reflection of my journey, skills, and creativity in the world of development.
- **LinkedIn**: [Connect with me](https://www.linkedin.com/in/luminarakash/)
---
## Authors
- [@luminarakash](https://github.com/luminarakash) ♥ : Akash Patel