https://github.com/tasin5541/nextjs-messenger-clone
A messenger clone built with NextJs 13 (app router), MongoDB, Prisma, Tailwind CSS, Pusher and Next-Auth
https://github.com/tasin5541/nextjs-messenger-clone
chat cloudinary messenger messenger-clone mongodb mongodb-atlas next-auth nextjs13 prisma pusher real-time responsive-design tailwindcss
Last synced: about 2 months ago
JSON representation
A messenger clone built with NextJs 13 (app router), MongoDB, Prisma, Tailwind CSS, Pusher and Next-Auth
- Host: GitHub
- URL: https://github.com/tasin5541/nextjs-messenger-clone
- Owner: Tasin5541
- License: mit
- Created: 2023-05-18T05:58:44.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-10-21T03:13:55.000Z (7 months ago)
- Last Synced: 2025-10-21T05:29:27.987Z (7 months ago)
- Topics: chat, cloudinary, messenger, messenger-clone, mongodb, mongodb-atlas, next-auth, nextjs13, prisma, pusher, real-time, responsive-design, tailwindcss
- Language: TypeScript
- Homepage: https://nextjs-messenger-clone-tasin5541.vercel.app/
- Size: 3.01 MB
- Stars: 45
- Watchers: 3
- Forks: 27
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NextJs-Messenger-Clone
A fully responsive real-time chat app made with NextJs 13 (app router), MongoDB, Tailwind CSS, Pusher, Next-Auth and Cloudinary.
- **[NextJs](https://nextjs.org/)** (13.4.x)
- **[React](https://facebook.github.io/react/)** (18.x)
- **[MongoDB](https://www.mongodb.com/atlas/database)** (6.x)
- **[Tailwind CSS](https://tailwindcss.com/)** (3.x)
- **[Pusher](https://pusher.com/)** (5.x)
- **[Next-Auth](https://next-auth.js.org/)** (4.x)
- **[Typescript](https://www.typescriptlang.org/)** (5.x)
- Production build script
## Live Demo
See a [live demo](https://nextjs-messenger-clone-tasin5541.vercel.app/) on Vercel
## Features
- Real-time chat update with Pusher
- Group chat
- Delete chat history
- Image hosting with Cloudinary
- Dynamic Theme support (Light and Dark mode)
- Support for both Desktop and Mobile screens
## Installation
### Setup MongoDB
1. Navigate to https://www.mongodb.com/atlas/database and register
2. Find and Select `Build a Database`
Select the Free tier and press on `Create` at the bottom
3. Create a user (note down the password)
Scroll down to `Add entries to your IP Access List`
Enter `0.0.0.0/0` and press `Add Entry`
4. Press `Go to Databases`
5. Click on `Connect` and select `MongoDB for VSCode`
Copy the connection string and save it in a notepad
Replace `` with your password set on step 3
Add `test` at the end of the connection string (ex. `connectionstring/test`)
### Setup GitHub Authentication
1. Navigate to https://github.com/
Click on your profile dropdown on the top right
Click `Settings`
2. Click `Developer settings`
Click `OAuth Apps`
Click `New OAuth App`
3. Give a name to your app
Type `http://localhost:3020/` in the `Homepage URL` and `Authorization callback URL` fields.
Click "Register application"
4. Copy the `Client Id` and note it down
Click on `Generate a new client secret`, copy and note it down
### Setup Google Authentication
1. Navigate to https://console.cloud.google.com and create a new project
2. Navigate to the newly created project and search for `API & Services`
3. Go to `OAuth consent screen`
Click the `External` field
Click `CREATE`
4. Click the `App name` field and give it a name
On User Mail field, select your email
Scroll down to `Developer contact information` and type your email
Click `SAVE AND CONTINUE` until you're on the `Summary` step
5. Go to `Credentials`
Click `CREATE CREDENTIALS`
Select `OAuth client ID`
6. Select `Web application` as Application Type
Scroll down to `Authorized redirect URIs` and add `http://localhost:3020/api/auth/callback/google`
Click `CREATE`
Copy the `CLient ID` and `Client Secret` and note it down
### Setup Cloudinary
1. Navigate to https://console.cloudinary.com and login
Go to `Dashboard` and note down the `Cloud name`
2. Go to settings
Then go to `Upload`
3. Click `Add upload preset`
Change `Signing Mode` to `Unsigned`
Click `Save`
Copy the newly added preset name and note it down
### Setup Pusher
1. Navigate to https://dashboard.pusher.com/channels
Click `Create app` (or `Get Started`)
Give the app a name
Select `React` for Frontend and `Node.js` for Backend
Create the app
2. Go to `App Keys`
Note down values
### Setup Project
1. Clone/download repo
2. Create a file called .env.local in the root directory of your project, type the following in cmd/powershell
```
cp env.example .env.local
```
3. Inside the `.env.local` file, add the MongoDB, Pusher, Cloudinary, GitHub and Google keys from the previous steps
4. `yarn install` to install the dependencies (run `npm install yarn` if you don't have yarn installed)
5. `yarn prisma db push` to create the DB collections
6. `prisma generate` to create the prisma client
## Usage
**Development**
`yarn dev`
- Build app continuously (HMR enabled)
**Production**
`yarn build`
`yarn start`
- Build app once (HMR disabled) to `/.next/`
---
**All commands**
| Command | Description |
| ------------ | ------------------------------------------ |
| `yarn dev` | Build app continuously (HMR enabled) |
| `yarn build` | Build app once (HMR disabled) to `/.next/` |
| `yarn start` | Run production build |
## See also
- Some Design ideas were taken from [Facebook Messenger](https://www.facebook.com/messenger/)
- Some Implementation Ideas for this project are taken from [Josh](https://www.youtube.com/@joshtriedcoding) and [Antonio](https://www.youtube.com/@codewithantonio)
- Project was bootstrapped with [create-next-app](https://nextjs.org/docs/api-reference/create-next-app)