Chat App MERN

The Real Time Chat Application is a messaging platform that enables users to communicate with each other in real-time. It is built using Typescript, React, Express, Mongoose, and Socket.io, which are all modern technologies for developing web applications.

Index

• Demo
• Features
• Installation
• How It Works
• Structure

Demo

Live: Website Chat App

Desktop:

Smart Phone:

Features

• Use Express to build the backend.
• Use React to build the frontend.
• Authenticates via email and password.
• Real-time communication between a client and a server using Socket.io.
• Uses MongoDB, Mongoose for storing and querying data.

Installation

Running Locally

Make sure you have Node.js and npm installed.

1. Clone repository:

   $ git clone https://github.com/Vo-Huy-Khoa/chat-app-mern.git
   $ cd chat-app-mern
   

   Run Backend:

   cd backend
   npm i
   npm run dev

   Run Frontend:

   cd frontend
   npm i
   npm run start

How It Works

MongoDB

You need to create a database on MongoDB, then create a database user, get the MongoDB URI, and assign it to dbURI.

Database

Mongoose is used to interact with a MongoDB.

Schemas

There are two schemas; users and rooms.

Each user has a username, password,and picture. If the user is logged via username and password, and the if logged in via a social account, then the password will be null.

Models

Each model wraps Mongoose Model object, overrides and provides some methods.

Sockets

Having an active connection opened between the client and the server so client can send and receive data. This allows real-time communication using sockets. This is made possible by Socket.io.

The client starts by connecting to the server through a socket (maybe also assigned to a specific namespace) . Once connections is successful, client and server can emit and listen to events.

Structure of the project:

BackEnd

src
|
├── configs
|   └── db.ts
├── controllers
|   └── UserController.ts
│   └── MessageController.ts
├── middleware
|   └── auth.ts
│   └── token.ts
├── models
|   └── User.ts
|   └──Message.ts
├── routes
|   └── index.ts
└── server.ts

FrontEnd

src
├── components
│   └── Account.tsx
│   └── Image.tsx
│   └── index.ts
├── hooks
│   └── useDebounce
│   └── index
├── layouts
│   └── auth.tsx
│   └── dashboard.tsx
│   └── index.ts
├── pages
│   └── auth
│       └── sign-in.tsx
│       └── sign-up.tsx
│       └── index.ts
│   └── dashboard
│       └── home.tsx
│       └── notification.tsx
│       └── sidebar.tsx
│       └── index.ts
├── redux
│   └── actions
│       └── sign-in.tsx
│       └── index.ts
│   └── reducers
│       └── visibility.ts
│       └── rootReducer.ts
│   └── initState.ts
│   └── store.ts
├── services
│   └── auth.ts
│   └── dashboard.ts
│   └── index.ts
├── socket.tsx
├── route.tsx
├── App.tsx
└── index.tsx