Chatverse

Welcome to our innovative chatting website, where communication knows no bounds! Our platform offers an array of enticing perks that redefine how people connect and interact online. Embracing the essence of real-time conversations, our website provides a seamless and user-friendly interface, ensuring a delightful chatting experience for users of all ages. Engage in meaningful discussions, share ideas, and build friendships effortlessly. The convenience of chatting from any device, be it a smartphone, tablet, or computer, empowers you to stay connected on the go. With robust security measures, we prioritize the safety and privacy of our users, guaranteeing a secure environment for exchanging thoughts and feelings. Our vibrant community fosters inclusivity, bringing together individuals from diverse backgrounds to celebrate unity in diversity. Embrace the power of words and embark on a journey of discovery and growth with our exceptional chatting website!"

Objective

• Communication and Interaction: To facilitate seamless and instant communication between users, allowing them to exchange messages, thoughts, and ideas in real-time.
• Connectivity: To bridge the gap between people separated by geographical boundaries, enabling them to stay connected with friends, family, colleagues, and even make new acquaintances.
• Convenience: To offer a user-friendly interface that allows users to chat easily from various devices, such as computers, smartphones, and tablets, enhancing accessibility and convenience.

Technology

• This site was made using React js Framework and various libraires like Redux , Material ui. You can install various React js commands by using thier respective npx/npm commands. You can search it online.
• For Database , I have use firebase it stores the chats which are send in the website.

Logo

Login page

Website

Thoughts

• This is my first React js Project.So it is not perfect. I tried to add components folder where, I can keep the various file for better understanding but it was not working.So,I have named every file different so it is recognizable.

Dockerize the Project

To make the Chatverse app run in a Docker container, follow these steps:

Prerequisites

1. Install Docker on your system.
2. Ensure you have the necessary permissions to run Docker commands.

Dockerfile

Create a Dockerfile in the root of your project directory with the following content:

# Use Node.js 20 Alpine image as base
FROM node:20-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./ 

# Install dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY . . 

# Expose the port the React app runs on
EXPOSE 3000

# Start the React app
CMD ["npm", "start"]

React App in Docker - Troubleshooting and Improvements

Additional Steps to Troubleshoot and Improve

Ensure React App Listens on 0.0.0.0

By default, React binds to localhost, making it inaccessible from outside the container. Update your start script in package.json:

"scripts": {
  "start": "react-scripts start --host 0.0.0.0"
}

Build the Docker Image

• Run the following command to build the Docker image:

docker build -t chatverse-app .

Run the Docker Container

• Run the following command to start the container and map it to port 3000 on your host:

docker run -p 3000:3000 chatverse-app

Access the Application

• Once the container is running, you can access the application in your browser at:

http://localhost:3000

• If the docker is not able to run just installl docker desktop for your respective OS.