# Webuzz 🚀
A real-time chat application built with MERN stack and Websockets.
Connect with friends and colleagues through group chats or individual conversations.
<p align="left">
<a href="https://www.javascript.com/" alt="javascript">
<img src="https://img.shields.io/badge/JavaScript-%23F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black" />
</a>
<a href="https://reactjs.org/" alt="react">
<img src="https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" />
</a>
<a href="https://nodejs.org/en/" alt="node.js">
<img src="https://img.shields.io/badge/Node.js-%2343853D.svg?style=for-the-badge&logo=node.js&logoColor=white" />
</a>
<a href="https://expressjs.com/" alt="express.js">
<img src="https://img.shields.io/badge/Express.js-%23000000.svg?style=for-the-badge&logo=express&logoColor=%23fff" />
</a>
<a href="https://www.mongodb.com/" alt="mongodb">
<img src="https://img.shields.io/badge/MongoDB-%234EA94B.svg?style=for-the-badge&logo=mongodb&logoColor=white" />
</a>
<a href="https://socket.io/" alt="socket.io">
<img src="https://img.shields.io/badge/Socket.io-%23010101.svg?style=for-the-badge&logo=socket.io&logoColor=white" />
</a>
</p>
## 📋 Table of Contents
- [About](#about)
- [Features](#features)
- [Demo](#demo)
- [Quick Start](#quick-start)
- [Installation](#installation)
- [Usage](#usage)
- [Configuration](#configuration)
- [Project Structure](#project-structure)
- [Contributing](#contributing)
- [Testing](#testing)
- [Deployment](#deployment)
- [License](#license)
- [Support](#support)
- [Acknowledgments](#acknowledgments)
## About
Webuzz is a modern chat application built using the MERN stack (MongoDB, Express.js, React.js, Node.js) and Websockets for real-time communication. It allows users to engage in both individual and group chats, providing a seamless and interactive messaging experience.
This project addresses the need for a simple yet powerful chat application that can be used for personal or professional communication. It targets individuals, teams, and communities looking for a platform to connect and collaborate in real-time.
Webuzz leverages the MERN stack to create a scalable and maintainable application. React.js handles the front-end user interface, Node.js and Express.js power the back-end server, MongoDB stores the application data, and Websockets facilitate real-time messaging. The application offers a responsive design, ensuring a consistent experience across different devices.
## ✨ Features
- 🎯 **Individual and Group Chats**: Engage in one-on-one conversations or create group chats for collaborative discussions.
- ⚡ **Real-time Messaging**: Instant message delivery powered by Websockets.
- 🔒 **User Authentication**: Secure user registration and login with password hashing.
- 🎨 **Responsive UI**: User-friendly interface that adapts to different screen sizes.
- 🛠️ **Easy Setup**: Simple installation and configuration process.
## 🎬 Demo
🔗 **Live Demo**: [https://webuzz-demo.example.com](https://webuzz-demo.example.com)
### Screenshots
*Main chat interface showcasing individual and group conversations.*
*Group creation form for creating new chat groups.*
## 🚀 Quick Start
Clone and run in 3 steps:
```bash
git clone https://github.com/abhissh11/webuzz.git
cd webuzz
npm install && npm startOpen http://localhost:3000 to view it in your browser.
- Node.js 18+ and npm
- MongoDB installed and running
- Git
- Clone the repository:
git clone https://github.com/abhissh11/webuzz.git
cd webuzz- Install dependencies:
npm install-
Configure environment variables (see Configuration):
-
Start the application:
npm start- Open your web browser and navigate to
http://localhost:3000. - Register a new account or log in with an existing account.
- Start chatting with other users or create a new group chat.
- Click on the "Create Group" button.
- Enter the group name and select the users you want to add to the group.
- Click "Create" to create the group chat.
Create a .env file in the root directory based on the .env.example file.
PORT=5000
MONGO_URI=mongodb://localhost:27017/webuzz
JWT_SECRET=your_jwt_secretPORT: The port the server will listen on (default: 5000).MONGO_URI: The connection string for your MongoDB database.JWT_SECRET: A secret key used for signing JSON Web Tokens (JWT) for authentication.
webuzz/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Application pages
│ │ ├── App.js # Main application component
│ │ └── index.js # Entry point
│ ├── public/ # Static assets
│ ├── package.json # Frontend dependencies
│ └── ...
├── server/ # Node.js/Express backend
│ ├── models/ # Mongoose models
│ ├── routes/ # API routes
│ ├── config/ # Configuration files
│ ├── controllers/ # Route handlers
│ ├── server.js # Main server file
│ ├── package.json # Backend dependencies
│ └── ...
├── .env # Environment variables
├── .gitignore # Git ignore file
├── README.md # Project documentation
└── LICENSE # License file
We welcome contributions! Please see our Contributing Guide (create this file) for details.
- 🍴 Fork the repository
- 🌟 Create your feature branch (
git checkout -b feature/AmazingFeature) - ✅ Commit your changes (
git commit -m 'Add some AmazingFeature') - 📤 Push to the branch (
git push origin feature/AmazingFeature) - 🔃 Open a Pull Request
To run tests, use the following command:
npm test(Note: Configure tests in client and server directories)
- Create a Heroku app.
- Connect your GitHub repository to your Heroku app.
- Configure environment variables in Heroku settings.
- Deploy the application.
- Create a Dockerfile for both the client and server.
- Build the Docker images.
- Run the Docker containers.
This project is licensed under the MIT License - see the LICENSE file for details.
- 📚 Libraries used:
- React - For building the user interface
- Node.js - For the server-side runtime environment
- Express.js - For building the API
- MongoDB - For the database
- Socket.IO - For real-time communication
- 👥 Contributors: Thanks to all contributors