Skip to content

BitChat is a real-time chat application made using MERN stack with user authentication. It allows multiple users to have a private and group chat.

License

Notifications You must be signed in to change notification settings

rtewari056/bitchat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

25 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Logo with shadow

Real-time chat application powered by socket.io

πŸš€ Demo

This application is deployed on DigitalOcean. Please check it out πŸ˜„ here.

bitchat

πŸ–₯️ Tech Stack

Frontend:

HTML5Β  CSS3Β  JavaScriptΒ  ReactΒ  React RouterΒ  Chakra UIΒ 

Backend:

Node JSΒ  HTML5Β  JWTΒ  Socket.ioΒ 

Database:

MongoDBΒ 

Deployed On:

DigitalOcean

⚑️ Features

  • Real time communication is supported using Socket.io
  • Fully Responsive UI
  • User authentication using email with Login as well as Logout feature.
  • Passwords are encrypted.
  • Toast notifications for user actions.
  • Users can create group chat.
  • Typing Indicators while other user typing something.

πŸ“ Project structure

β”œβ”€β”€ client/
β”‚   β”œβ”€β”€ public/
β”‚   β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”‚   β”œβ”€β”€ index.html
β”‚   β”‚   β”œβ”€β”€ logo192.png
β”‚   β”‚   β”œβ”€β”€ logo512.png
β”‚   β”‚   β”œβ”€β”€ manifest.json
β”‚   β”‚   └── robots.txt
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ animations/
β”‚   β”‚   β”‚   └── typing.json
β”‚   β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”‚   β”œβ”€β”€ Authentication/
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ Login.jsx
β”‚   β”‚   β”‚   β”‚   └── Signup.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ UserAvatar/
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ UserBadgeItem.jsx
β”‚   β”‚   β”‚   β”‚   └── UserListItem.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ miscellaneous/
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ GroupChatModal.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ ProfileModal.jsx
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ SideDrawer.jsx
β”‚   β”‚   β”‚   β”‚   └── UpdateGroupChatModal.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ ChatBox.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ ChatLoading.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ MyChats.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ ScrollableChat.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ SingleChat.jsx
β”‚   β”‚   β”‚   └── index.js
β”‚   β”‚   β”œβ”€β”€ config/
β”‚   β”‚   β”‚   └── ChatLogics.js
β”‚   β”‚   β”œβ”€β”€ context/
β”‚   β”‚   β”‚   └── ChatProvider.js
β”‚   β”‚   β”œβ”€β”€ pages/
β”‚   β”‚   β”‚   β”œβ”€β”€ Chat.jsx
β”‚   β”‚   β”‚   β”œβ”€β”€ Home.jsx
β”‚   β”‚   β”‚   └── index.js
β”‚   β”‚   β”œβ”€β”€ App.css
β”‚   β”‚   β”œβ”€β”€ App.js
β”‚   β”‚   └── index.js
β”‚   └── package.json
β”œβ”€β”€ config/
β”‚   β”œβ”€β”€ connectToMongoDb.js
β”‚   β”œβ”€β”€ generateHashedPassword.js
β”‚   β”œβ”€β”€ generateToken.js
β”‚   β”œβ”€β”€ index.js
β”‚   └── verifyPassword.js
β”œβ”€β”€ controllers/
β”‚   β”œβ”€β”€ chatControllers.js
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ messageControllers.js
β”‚   └── userControllers.js
β”œβ”€β”€ middleware/
β”‚   β”œβ”€β”€ authMiddleware.js
β”‚   β”œβ”€β”€ errorMiddleware.js
β”‚   └── index.js
β”œβ”€β”€ models/
β”‚   β”œβ”€β”€ Chat.js
β”‚   β”œβ”€β”€ Message.js
β”‚   β”œβ”€β”€ User.js
β”‚   └── index.js
β”œβ”€β”€ routes/
β”‚   β”œβ”€β”€ chatRoutes.js
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ messageRoutes.js
β”‚   └── userRoutes.js
β”œβ”€β”€ .env.example
β”œβ”€β”€ .gitignore
β”œβ”€β”€ LICENSE
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ README.md
└── server.js

πŸ“– Prerequisites

In order to run the project you need node>=16 and npm>=8 installed on your machine.

🚩 Getting Started

1. Clone the bitchat repository:

git clone https://github.com/rtewari056/bitchat.git

2. Navigate into repo:

cd bitchat

3. Rename .env.example into .env and put all creadentials:

PORT=5000
MONGO_URI="YOUR_MONGO_CONNECTION_URL"
JWT_SECRET="YOUR_JWT_SECRET"
JWT_EXPIRE=2d
NODE_ENV=development # Change to "production" when deploying

4. Install package dependencies:

npm install # Server dependencies
cd client
npm install # Client dependencies

4. Run project:

In the root directory, open two terminal sessions and run both commands separately:

npm run client
npm run server

5. Open your browser and go to http://localhost:3000

πŸ‘€ Developer

Rohit Tewari

πŸ“¬ Contact

If you want to contact me, you can reach me through below handles.

LinkedIn Gmail Twitter

πŸ“ƒ License

bitchat is licensed under the MIT License.

Show your support by 🌟 the project

About

BitChat is a real-time chat application made using MERN stack with user authentication. It allows multiple users to have a private and group chat.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages