Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rohit-2012/mern-chat
A real-time chat web application built with the MERN stack and Socket.io. Users can register, chat with other registered users, and view their online status. The app offers a seamless and interactive chatting experience with instant updates and user-friendly features.
https://github.com/rohit-2012/mern-chat
bcryptjs cookie-parser daisy-ui expressjs jsonwebtoken jwt-authentication mern-stack mongodb mongoose nodejs reactjs socket-io tailwindcss
Last synced: 11 days ago
JSON representation
A real-time chat web application built with the MERN stack and Socket.io. Users can register, chat with other registered users, and view their online status. The app offers a seamless and interactive chatting experience with instant updates and user-friendly features.
- Host: GitHub
- URL: https://github.com/rohit-2012/mern-chat
- Owner: Rohit-2012
- Created: 2024-07-19T10:28:45.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-22T06:46:59.000Z (6 months ago)
- Last Synced: 2024-11-09T19:44:42.145Z (2 months ago)
- Topics: bcryptjs, cookie-parser, daisy-ui, expressjs, jsonwebtoken, jwt-authentication, mern-stack, mongodb, mongoose, nodejs, reactjs, socket-io, tailwindcss
- Language: JavaScript
- Homepage: https://mern-chat-qa1m.onrender.com
- Size: 615 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN-Chat
## Description
A real-time chat application built using the MERN stack and Socket.io. This application allows users to login, signup, see the list of registered users, check online status, and chat with other users in real-time.
## Features
- **Protected Routing**: Ensures that only authenticated users can access certain routes.
- **Login**: Users can log in to their accounts.
- **SignUp**: New users can create an account.
- **Real-Time Chat Updates**: Chat messages are updated in real-time.
- **New Chat Notification Sound**: Users receive a sound notification for new messages.
- **Logout**: Users can log out of their accounts.
- **See Online Users**: Users can see who is currently online.
- **Search Functionality**: Allows users to search for other registered users.
## Tech Stack Used
- **Frontend:**
- React
- React DOM
- React Router DOM
- Zustand
- React Hot Toast
- Vite (for development and build)
- Tailwind CSS
- DaisyUI
- Autoprefixer
- ESLint
- **Backend:**
- Node.js
- Express
- MongoDB
- Mongoose
- Socket.io
- BcryptJS
- JSON Web Token (JWT)
- Cookie-parser
- Dotenv
- **Dev Tools:**
- Nodemon (for development server)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/Rohit-2012/mern-chat.git
2. Frontend setup
```bash
cd frontend
npm install
npm run dev
3. Backend setup in another terminal
```bash
npm install
npm run server
4. To run the production build
```bash
npm run build
npm start
## Environment variables setup
1. For development
```bash
NODE_ENV=development
PORT=
MONGO_DB_URI=
JWT_SECRET=
2. For development
```bash
NODE_ENV=production
PORT=
MONGO_DB_URI=
JWT_SECRET=
**Thank you for checking out the MERN-Chat application! If you encounter any issues or have suggestions for improvements, please open an issue on the GitHub repository. Feel free to contribute or contact me at [email protected]. Happy coding!**