Text-A-Lot

A Realtime Chat Application

A simple realtime chat apoplication made using React JS, a JavaScript library to make awesome UI by Facebook, Node JS, Express JS and MongoDB.

This application uses React JS component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack 5.

ES6 module creation along with import /export is used. Babel is used to transpile all JSX code to vanilla JavaScript code. To install all the dependecies npm is used.

Back end is implemented using Node JS, Express JS and MongoDB. Atlas, the Cloud version of MongoDB is used. Real time communication is done using Socket.io.

This is a responsive web application for viewing in both Mobile and Desktop.

This is still a work in progress
If you find any bugs you can report it to me.
Pull requests are always welcome. For major changes, 
please open an issue first to discuss what you would like to change.

Few Screenshots

Features

• Latest features of JavaScript i.e. ES6, ES7, ES8 is used
• React JS Hooks are used with Functional components
• ES8 async/await is used

• This is Simple Chat Application
• It is a Full Stack Application

• All the user details, group chats and conversations are stored in the MongoDB Atlas.

• Login/Signup as well as Logout feature is added
• Guest User Login added
• Error will be shown if the credentials are not correct

• Real time communication & notification is supported using Socket.io

• Realtime One on One chats and group chats
• Functionality and features like Search for chats, create a group, add or remove partricipants.
• typing... animation.
• Online / Offline status are shown .
• Read / Unread status of conversation is supported
• All the conversation are stored in the database i.e. persistant

Tech Stack

MongoDB, Express, React, Node, Socket.IO, Chakra-UI

Hosted/Deployed

https://textalot.herokuapp.com/

Usage

Test users

Email	Password
kohli@test.com	kohlitest

Or Use the guest user login feature.

Clone the repository:

git clone https://github.com/SiddharthSsb11/MERN-chat-app.git

Env Variables

Create a .env file in the root and add the following

NODE_ENV = development
PORT = 5000
MONGO_URI = <yourMongoDbUri>
JWT_SECRET = <yourSecret>

Install Dependencies (frontend & backend)

npm install
cd frontend
npm install

Run

Run frontend (:3000) & backend (:5000)

# Run frontend only
cd frontend
npm start 

# Run backend only
npm start

Build & Deploy

# Create frontend production build
cd frontend
npm run build

There is a Heroku postbuild script, so if you push to Heroku, no need to build manually for deployment to Heroku