MERN Stack Chat Application With Socket.io

This is a simple real-time chat application built using React JS, Node.JS, Express.JS, and MongoDB. The application uses React.JS's component-oriented UI creation paradigm, with all components written in JSX and ES6 style. The back end is implemented using Node.JS, Express.JS, and MongoDB. Real-time communication is facilitated using Socket.io. This is a responsive web application, optimized for both mobile and desktop viewing.

Features

  • User Registration
  • User Login
  • Profile Picture Selection
  • Real-time Chat Interface

Directory Structure

The project is divided into two main folders:

  • public: This folder contains all the static files you'll be using for your frontend.
  • public: This folder contains all the frontend code of React.js`.
  • server: This folder contains all the backend files, including your Node.js, Express.js setup, MongoDB connection and socket.io setup.

Installation Process

Follow these steps to install and run the project:

  1. Clone the repository: https://github.com/itsaman123/ConvoCube-MERN-Chat-App.git
  2. Navigate into the directory: cd repository
  3. Run the command npm install in both the public and server folder to install the dependencies.
  4. Now run the command npm start in both the public and server folder to start the project.

Usage

After running the server, navigate to http://localhost:3000 in your browser to view the application.

Screenshots

SignIn Page

image

Chat Interface

image