Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/avinash7r/full-chatapp

a complete real-time chat app using mern
https://github.com/avinash7r/full-chatapp

expressjs mongodb-atlas mongoose nodejs reactjs socket-io zustandjs

Last synced: 4 days ago
JSON representation

a complete real-time chat app using mern

Awesome Lists containing this project

README

        

# Full ChatApp 💬

## Overview
Full ChatApp is a real-time chat application built with modern web technologies, providing a seamless communication experience.

## 🚀 Features
- Real-time messaging
- User authentication
- Responsive design
- Secure communication

## 🛠 Tech Stack
- **Frontend**: React.js
- **Backend**: Node.js, Express.js
- **Real-time Communication**: Socket.io
- **State Management**: React Hooks
- **HTTP Client**: Axios

## 📦 Prerequisites
- Node.js (v14 or later)
- npm (v6 or later)

## 🔧 Installation

### Clone the Repository
```bash
git clone https://github.com/avinash7r/full-chatApp.git
cd full-chatApp
```

### Setup Environment
1. Install server dependencies
```bash
cd server
npm install
```

2. Install client dependencies
```bash
cd ../client
npm install
```

3. Create a `.env` file in the `server` directory with the following variables:
```
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
```

## 🏃‍♂️ Running the Application

### Development Mode
1. Start the server
```bash
cd server
npm run dev
```

2. Start the client (in a new terminal)
```bash
cd client
npm start
```

### Production Build
```bash
npm run build
npm start
```

## 📂 Project Structure
```
full-chatApp/

├── client/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ ├── lib/
│ │ └── App.js

├── server/ # Node.js backend
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ └── index.js
```

## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📜 License
Distributed under the ISC License.

## 📞 Contact
Avinash - [GitHub Profile](https://github.com/avinash7r)

Project Link: [https://github.com/avinash7r/full-chatApp](https://github.com/avinash7r/full-chatApp)
=======
# Full ChatApp 💬

## Overview
Full ChatApp is a real-time chat application built with modern web technologies, providing a seamless communication experience.

## 🚀 Features
- Real-time messaging
- User authentication
- Responsive design
- Secure communication

## 🛠 Tech Stack
- **Frontend**: React.js
- **Backend**: Node.js, Express.js
- **Real-time Communication**: Socket.io
- **State Management**: React Hooks, Zustand
- **HTTP Client**: Axios

## 📦 Prerequisites
- Node.js (v14 or later)
- npm (v6 or later)

## 🔧 Installation

### Clone the Repository
```bash
git clone https://github.com/avinash7r/full-chatApp.git
cd full-chatApp
```

### Setup Environment
1. Install server dependencies
```bash
cd server
npm install
```

2. Install client dependencies
```bash
cd ../client
npm install
```

3. Create a `.env` file in the `server` directory with the following variables:
```
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
```

## 🏃‍♂️ Running the Application

### Development Mode
1. Start the server
```bash
cd server
npm run dev
```

2. Start the client (in a new terminal)
```bash
cd client
npm start
```

### Production Build
```bash
npm run build
npm start
```

## 📂 Project Structure
```
full-chatApp/

├── client/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ ├── lib/
│ │ └── App.js

├── server/ # Node.js backend
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ └── index.js
```

## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📞 Contact
Avinash - [GitHub Profile](https://github.com/avinash7r)

Project Link: [https://github.com/avinash7r/full-chatApp](https://github.com/avinash7r/full-chatApp)