This is a real-time chat application built with the MERN stack, using Socket.io for real-time communication and TailwindCSS + Daisy UI for a responsive, modern user interface. The app is ideal for dynamic teams where members can be added or removed frequently, such as in temporary project environments.
Check out the live app here: ChatNest
- Automatic Contact Management: New users are added automatically, and old users are removed from the contacts list without manual updates.
- Privacy by Design: No personal information is shared directly between users. The app updates the contact list automatically to reflect only active users, ensuring minimal data sharing.
- Flexible Team Setup: Users can join or leave projects seamlessly. This makes the app perfect for teams that need flexibility, allowing members to collaborate on projects quickly without complicated setup.
This setup ensures that teams can work together without needing to exchange personal contact information repeatedly, providing a secure and efficient communication environment for both short-term and long-term projects.
- Add New Users: Anyone can sign up for a temporary account by providing a username and password on the sign-up page.
- Automatic Contact Fetching: Upon login, the app will automatically fetch and display all online users for easy contact initiation.
- Remove Old Users: Old users can be removed from the database if they are no longer needed. This will automatically update the contacts list for all current users.
To test the app without creating a new account, you can log in with the following credentials:
- Username:
testuser - Password:
password
This chat app is designed for flexibility, with the ability to easily manage temporary users. This means:
- User data is not retained after removal, ensuring no lingering personal data.
- Team members can join and leave as needed without affecting the core functionality.
- Frontend: React, TailwindCSS, Daisy UI
- Backend: Node.js, Express
- Database: MongoDB
- Real-Time Communication: Socket.io
- State Management: Zustand
- Authentication: JWT (JSON Web Token)
- Tech Stack: MERN (MongoDB, Express, React, Node.js) + Socket.io + TailwindCSS + Daisy UI
- Authentication & Authorization: Secure login and sign-up system using JWT tokens.
- Real-Time Messaging: Utilizes Socket.io for fast, bidirectional communication.
- Online User Status: Real-time online/offline status updates with Socket.io and React Context.
- Global State Management: Managed with Zustand for a smoother experience.
- Error Handling: Comprehensive error handling on both the server and client sides.
- Temporary Team Setup: Add and remove users with ease, without retaining old user data, allowing flexibility for new team members to join and interact instantly.
- Automatic Contact Fetching: Upon login, users can see all other active users and initiate chats immediately.
To get a local copy of this project up and running, follow these steps.
- Node.js and npm installed on your machine.
- MongoDB (You can use a local MongoDB instance or MongoDB Atlas for the database).
-
Install server dependencies:
cd server npm install -
Install client dependencies:
cd ../client npm install -
Set up environment variables:
Create a
.envfile in theserverfolder and add the following variables:MONGODB_URI=<Your MongoDB URI> JWT_SECRET=<Your JWT Secret> -
Start the application:
In the
serverdirectory, start the backend server:npm start
In the
clientdirectory, start the frontend client:npm run dev
-
Access the application:
Open your browser and go to
http://localhost:3000to use the app.
If you’d like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-name. - Make your changes and commit them:
git commit -m 'Add new feature'. - Push to the branch:
git push origin feature-name. - Submit a pull request.