https://github.com/miladsadeghi/chatter
Chatter - MERN stack application with React Typescript, Tailwind, RTK, RTK Query
https://github.com/miladsadeghi/chatter
chat-application express jwt jwt-authentication mern mern-chatapp mern-stack mongodb react react-typescript redux redux-toolkit rtk rtk-query tailwind tailwindcss
Last synced: 2 months ago
JSON representation
Chatter - MERN stack application with React Typescript, Tailwind, RTK, RTK Query
- Host: GitHub
- URL: https://github.com/miladsadeghi/chatter
- Owner: MiladSadeghi
- License: mit
- Created: 2023-01-23T15:54:35.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-03T18:35:15.000Z (over 2 years ago)
- Last Synced: 2025-05-16T01:12:23.549Z (about 1 year ago)
- Topics: chat-application, express, jwt, jwt-authentication, mern, mern-chatapp, mern-stack, mongodb, react, react-typescript, redux, redux-toolkit, rtk, rtk-query, tailwind, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 4.88 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Chatter
[]()
[](/LICENSE)
[]()
---
🤖 Chatter is a Full Stack Chatting App. Uses Socket.io for real time communication.
## 📝 Table of Contents
- [About](#about)
- [How it works](#working)
- [Usage](#usage)
- [Getting Started](#getting_started)
- [Authors](#authors)
A Chat Application using MERN stack (MongoDB, Express JS, React JS (Typescript, Tailwind), Node JS) and Socket.io for real time chatting. just enjoy dark mode :).
### MVP
As a user, I can
- sign up / sign in / sign out
- start a private chat with users in room
- leave a chat
- maintain privacy (can't read others chats/msgs)
- create room
As a room owner, I can
- invite / kick / ban / unban users
- delete room
- change room name
all of my repos it's for resume so you can't use for your organization. if you want to use for it, you should develop real time communicate section. I think the main weakness is in this part
You can have this application up and running with just a few steps because it has both the frontend and the backend in a single repository. Follow the steps below to do so.
1. Clone this repo
2. Once you have the repo, you need to install its dependencies. So using a terminal, move into the server directory and execute npm install to install the dependencies of the Node.js server and then go to the client directory and install the dependencies of the frontend.
3. On the client file you should create env file. i show a example for you
1. Client
```(env)
REACT_APP_NODE_ENV=development
REACT_APP_NODE_PATH=.
REACT_APP_BASE_URL=http://localhost:3001
```
2. Server
```(env)
MONGO_URL=mongodb://0.0.0.0:27017/
DATABASE_NAME=YOUR_DB_NAME
PORT=YOUR_DB_PORT
ACCESS_TOKEN=6929b6a2da23a121b13f0f04ed6d5u1d0e2f9d3006c15613c881c1f6cc03ca546814c85925fdf98c1a9947173c8eec1rqa81345a6c3d65a417d85292b4eaa667
REFRESH_TOKEN=fa7c40db31eb1243e67916d40f3825908831664aaddQQ547e07fbfa9a0ae0a8196abbc383f1003e24e0232da23ad670eff7f305be0ade59a02d063c484d795f2
FRONT_END_URL=http://localhost:3000
NODE_ENV=development
```
4. This application uses MongoDB as its Database. So make sure you have it installed. You can find detailed guides on how to do so here. Once installed, make sure that your local MongoDB server is not protected by any kind of authentication.
5. Finally, all you have to do is simply run npm run dev for backend and npm start for frontend.
6. The frontend of the application will be automatically opened in your web browser and you can test it away.
- [@MiladSadeghi](https://github.com/MiladSadeghi) - Idea & Initial work
## Install mongo via docker
```
docker pull mongodb/mongodb-community-server
docker run -p 127.0.0.1:27017:27017 --name mongo -d mongodb/mongodb-community-server:latest
docker container ls
docker exec -it mongo ls
docker exec -it mongo mongosh
use chatter
db.createUser({ user: "chatterAdmin", pwd: passwordPrompt(), roles: [ "readWrite", "dbAdmin" ] });
```