Real-Time Chat Application

Welcome to the Full Stack Three Tier project, where we're building a scalable and secure real-time chat experience using the latest technologies. Inviting everyone to contribute and be a part of this exciting journey!

Table of Contents

• Introduction
• Workflow
• Features
• Tech Stack
• Getting Started
• Contributing
• Future Plans
• License

---

📝 Introduction:

This project aims to provide a real-time chat experience that's both scalable and secure. With a focus on modern technologies, we're building an application that's easy to use and maintain.

Detailed Workflow Description:

• User Interaction:

  • Users interact with the frontend application running in their browser. This includes actions like logging in, sending messages, and navigating through the chat interface.Frontend (React App):The frontend is responsible for rendering the user interface and handling user inputs.It communicates with the backend via HTTP requests (for RESTful APIs) and WebSocket connections (for real-time interactions).

  • Backend (Node.js/Express + Socket.io):

    • The backend handles all the server-side logic.It processes API requests from the frontend to perform actions such as user authentication, message retrieval, and message storage.Socket.io is used to manage real-time bi-directional communication between the frontend and the backend. This allows for instant messaging features, such as showing when users are typing or when new messages are sent.

  • MongoDB (Database):

    • MongoDB stores all persistent data for the application, including user profiles, chat messages, and any other relevant data.The backend interacts with MongoDB to retrieve, add, update, or delete data based on the requests it receives from the frontend.

✨ Features:

• Real-time Messaging: Send and receive messages instantly using Socket.io
• User Authentication & Authorization: Securely manage user access with JWT
• Scalable & Secure Architecture: Built to handle large volumes of traffic and data
• Modern UI Design: A user-friendly interface crafted with React and TailwindCSS
• Profile Management: Users can upload and update their profile pictures
• Online Status: View real-time online/offline status of users

🛠️ Tech Stack:

• Backend: Node.js, Express, MongoDB, Socket.io
• Frontend: React, TailwindCSS
• Containerization: Docker
• Orchestration: Kubernetes (planned)
• Web Server: Nginx
• State Management: Zustand
• Authentication: JWT
• Styling Components: DaisyUI

🔧 Prerequisites:

• Node.js (v14 or higher)
• Docker (for containerizing the app)
• Git (to clone the repository)

📝 Setup .env File:

1. Navigate to the backend directory:

cd backend

2. Create a .env file and add the following content (modify the values as needed):

MONGODB_URI=mongodb://mongoadmin:secret@mongodb:27017/dbname?authSource=admin
JWT_SECRET=your_jwt_secret_key
PORT=5001

> **Note:** Replace `your_jwt_secret_key` with a strong secret key of your choice.

Clone the Repository

git clone https://github.com/iemafzalhassan/full-stack_chatApp.git

🏗️ Build and Run the Application"

Follow these steps to build and run the application:

1. Build & Run the Containers:

cd full-stack_chatApp

docker-compose up -d --build

2. Access the application in your browser:

http://localhost

---

🛠️ Getting Started

Follow these simple steps to get the project up and running on your local Host using docker.

git clone https://github.com/iemafzalhassan/full-stack_chatApp.git

cd full-stack_chatApp

Create a Docker network:

docker network create full-stack

🛠️ Building the Frontend

cd frontend

docker build -t full-stack_frontend .

Run the Frontend container:

docker run -d --network=full-stack  -p 5173:5173 --name frontend full-stack_frontend:latest

The frontend will now be accessible on port 5173.

Run the MongoDB Container:

docker run -d -p 27017:27017 --name mongo mongo:latest

---

🛠️ Building the Backend

cd backend

Build the Backend image:

docker build -t full-stack_backend .

Run the Backend container:

docker run -d --network=full-stack --add-host=host.docker.internal:host-gateway -p 5001:5001 --env-file .env full-stack_backend

This will build and run the backend container, exposing the backendAPI on port 5001.

Backend API: http://localhost:5001

To Verify the conncetion between backend and databse:

docker-compose logs -f

Once the backend and frontend containers are running, you can access the application in your browser:

Frontend: http://localhost

You can now interact with the real-time chat app and start messaging!

---

🤝 Contributing

We welcome contributions from DevOps & Developer of all skill levels! Here's how you can contribute:

Report bugs: If you encounter any bugs or issues, please open an issue with detailed information. Suggest features: Have an idea for a new feature? Open an issue to discuss it with the community. Submit pull requests: If you have a fix or a feature you'd like to contribute, submit a pull request. Ensure your changes pass any linting or tests, if applicable.

🌐 Join the Community

We invite you to join our community of developers and contributors. Let's work together to build an amazing real-time chat application!

• Star this repository to show your support
• Fork this repository to contribute to the project
• Open an issue to report bugs or suggest features
• Submit a pull request to contribute code changes

🔮 Future Plans

This project is evolving, and here are a few exciting things on the horizon:

• CI/CD Pipelines: Implement Continuous Integration and Continuous Deployment pipelines to automate testing and deployment.
• Kubernetes (K8s): Add Kubernetes manifests for container orchestration to deploy the app on cloud platforms like AWS, GCP, or Azure.
• Feature Expansion: Add more features like group chats, media sharing, and user status updates.
• Stay tuned for updates as we continue to improve and expand this project!

---

📚 Project Snapshots:

📜 License

This project is licensed under the MIT License. See the LICENSE file for more details.