Full Stack Realtime Chat App Development by Vraj SoniFull Stack Realtime Chat App Development by Vraj Soni

Full Stack Realtime Chat App Development

Vraj Soni

Completed work

Fullstack Engineer

MongoDB

Node.js

React

Computer Software

Like this project

Completed work

Posted Jul 8, 2025

Developed a scalable and secure real-time chat application using modern technologies.

Likes

Views

Timeline

Jun 20, 2025 - Jul 8, 2025

Real-Time Chat Application

Welcome to the Full Stack Realtime Chat App project, where we're building a scalable and secure real-time chat experience using the latest technologies. Whether you're a seasoned developer or a beginner, we invite you to contribute and be a part of this exciting journey!

Running the Application

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.

✨ 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

Navigate to the backend directory:

cd backend

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

MONGODB_URI=mongodb://mongo:27017/chatapp
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

https://github.com/Sonivraj/full-stack_chatApp

🏗️ Build and Run the Application

Follow these steps to build and run the application:

Build & Run the Containers:

cd full-stack_chatApp

docker-compose up -d --build

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.

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 backend-API on port 5001.

Backend API: http://localhost:5001

To Verify the connection between backend and database:

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!

🔮 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!

Full Stack Realtime Chat App Development

Full Stack Realtime Chat App Development

Real-Time Chat Application

Table of Contents

📝 Introduction

✨ Features

🛠️ Tech Stack

🔧 Prerequisites

📝 Setup .env File

Clone the Repository

🛠️ Getting Started

Create a Docker network:

🛠️ Building the Frontend

Run the Frontend container:

Run the MongoDB Container:

🛠️ Building the Backend

Build the Backend image:

Run the Backend container:

To Verify the connection between backend and database:

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

🔮 Future Plans

📚 Project Snapshots:

Real-Time Chat Application

Table of Contents

📝 Introduction

✨ Features

🛠️ Tech Stack

🔧 Prerequisites

📝 Setup .env File

Clone the Repository

🛠️ Getting Started

Create a Docker network:

🛠️ Building the Frontend

Run the Frontend container:

Run the MongoDB Container:

🛠️ Building the Backend

Build the Backend image:

Run the Backend container:

To Verify the connection between backend and database:

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

🔮 Future Plans

📚 Project Snapshots: