https://github.com/reaperdragon/chatify-mern

Chat Application built with MERN stack.😛
https://github.com/reaperdragon/chatify-mern

chakra-ui chat-application createcontext-hooks express groupchat mern mongodb mongoose nodejs react reacticons reactjs scrolltobottom socket-io socket-io-client styled-components

Last synced: about 2 months ago
JSON representation

Chat Application built with MERN stack.😛

• Host: GitHub
• URL: https://github.com/reaperdragon/chatify-mern
• Owner: reaperdragon
• Created: 2022-06-27T13:58:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-05T09:59:21.000Z (over 2 years ago)
• Last Synced: 2024-07-29T20:52:54.151Z (6 months ago)
• Topics: chakra-ui, chat-application, createcontext-hooks, express, groupchat, mern, mongodb, mongoose, nodejs, react, reacticons, reactjs, scrolltobottom, socket-io, socket-io-client, styled-components
• Language: JavaScript
• Homepage:
• Size: 1.12 MB
• Stars: 32
• Watchers: 1
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chatify

### Built with Node js, Express js, Mongoose(Object Modeling for MondgoDB), React Js.

### Functionalities

- Search Users.

- One - One Chat.

- Group Chat.

- Add Or Remove Users From Group.

- JWT Authentication.

### Tech

- Frontend : [React Js](https://reactjs.org/)

- Backend :  [Express js](https://expressjs.com/)

- Style : [Chakra UI](https://chakra-ui.com/)

- Database : [MongoDB Atlas](https://www.mongodb.com/)

- Routing : [React Router Dom V6](https://reactrouter.com/)

### Installation

#### Clone

- Clone this repo with url `https://github.com/Aakrut/chatify-mern`

##### Setup

> Install npm dependencies using npm install

```

$ npm install && cd client && npm install

```

> Set up a MongoDB database either locally or provision a free database with MongoDB Atlas

> Create a .env file in the root directory

> Set up required environment variables.

```

MONGO_URI=Your_MONGO_URL

JWT_SECRET=YOUR_SECRET_KEY

JWT_LIFETIME=TIME

```

> In the root directory run both the backend and the front end with the following command

```

npm start

```

### Screenshots

Login

![Screenshot (64)](https://user-images.githubusercontent.com/67114280/177302147-5051196e-b5c3-473f-8cba-3945cc6c61b3.png)

Signup

![Screenshot (65)](https://user-images.githubusercontent.com/67114280/177302273-00e8e422-179a-41bb-8125-fea41a10e620.png)

Search Users

![Screenshot (62)](https://user-images.githubusercontent.com/67114280/177302425-151e68ad-7ce3-4772-b71c-258a343ced85.png)

Profile

![Screenshot (63)](https://user-images.githubusercontent.com/67114280/177302514-fe3eecd5-42a8-4ad9-97e3-e785a8f3766f.png)

One - One Chat

![Screenshot (61)](https://user-images.githubusercontent.com/67114280/177302631-cc0e84a2-ce9e-422f-97b9-d6290baca86f.png)

![Screenshot (60)](https://user-images.githubusercontent.com/67114280/177302728-4725573a-accd-4c84-8695-466aa38b9737.png)