Chat App: Chat Harbour

This project is a full-featured real-time chat application built using the MERN stack (MongoDB, Express.js, React, Node.js). It leverages Socket.IO for seamless, low-latency communication between users. The user interface is designed with Material-UI, ensuring a responsive and visually appealing experience. The app allows users to discover friends and engage in one-on-one or group conversations effortlessly. Key features include user authentication, chat creation, and real-time messaging.

Table of Contents

• Introduction
• Features
• Technologies
• Installation
• Sreenshots

Introduction

Chat Harbour is a real-time chat application designed to:

• Connect with Friends: Discover and connect with new people easily.
• Engage in Conversations: Enjoy seamless one-on-one or group chats.
• Stay Connected: Communicate instantly with friends and groups in real-time.
• Enjoy a Smooth Experience: Benefit from a user-friendly interface and low-latency messaging.

Features

• User Authentication: Secure signup and login functionalities.
• Real-Time Messaging: Seamless communication with live message updates.
• One-on-One Chat: Private messaging between users.
• Group Chat: Create and join group conversations.
• Online Badge: Indicates users' online status with a small dot or badge.
• Typing Events: Displays a message when a user is typing in real-time.
• Display Last Message: Shows the latest message in chat previews.
• Search Usernames: Easily find and add friends by their usernames.
• Responsive Design: Built with Material-UI for an appealing and adaptive interface.

Technologies

Technologies and Libraries Used

Frontend:

• React.js - JavaScript library for building user interfaces. Reference
• HTML/CSS - Standard web technologies for structuring and styling web pages.
• Material-UI (MUI) - React components library for building UI components. Reference

Backend:

• Node.js - JavaScript runtime for server-side applications. Reference
• Express.js - Web framework for Node.js, used for building APIs and handling HTTP requests. Reference
• MongoDB - NoSQL database used for storing application data. Reference

Other Tools and Libraries:

• Socket.IO - Library for real-time web applications, enabling real-time, bi-directional communication between web clients and servers. Reference
• axios - HTTP client for making requests to the TMDB API and server. GitHub
• jsonwebtoken - Library for generating and verifying JSON Web Tokens (JWTs) for authentication. GitHub
• mongoose - ODM library for MongoDB and Node.js. Reference
• react-router-dom - DOM bindings for React Router, for handling navigation and routing. GitHub
• react-redux - Official Redux binding for React to manage state. GitHub
• formik - Form library for React. GitHub

Installation

Prerequisites

Before starting, ensure you have the following installed:

• Node.js: Download and install Node.js from nodejs.org, which includes npm.

Step 1: Clone the Repository

Clone the project repository from GitHub:

git clone https://github.com/nikhil-dhumal/Chat-Harbour.git
cd Chat-Harbour

Step 2: Install Dependencies

Client (Frontend)

cd client
npm install

Server (Backend)

cd ../server
npm install

Step 3: Set Up Environment Variables

• Create .env files for both client and server according to .env.example files.
• Update the variables in .env as necessary for your local setup. Ensure you add .env to your .gitignore file to keep sensitive information secure.

Step 4: Run the Development Servers

Client (Frontend)

cd client
npm run dev

Access the frontend at http://localhost:3000.

Server (Backend)

cd ../server
npm start

The backend runs at http://localhost:5000.

Step 5: Accessing the Application

Open your web browser and go to http://localhost:3000 to view the frontend application.

Screenshots

Desktop

Sign up Page

Search list

Chat

New Group

Mobile

Sign in Page

Group Chat

Update Password