NextJs-Messenger-Clone

KO | EN

gitlite — search

#javascript #python #machine-learning #rust #linux #docker #nodejs #macos #java #cli #kubernetes #pytorch #security #ios

NextJs-Messenger-Clone

(★ 45)

A messenger clone built with NextJs 13 (app router), MongoDB, Prisma, Tailwind CSS, Pusher and Next-Auth

NextJs-Messenger-Clone Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 
 <img src="public/images/guides/mongo2.webp" style="width: 800px;">

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` 
 <img src="public/images/guides/mongo3.webp" style="width: 800px;">

4. Press `Go to Databases` 
 <img src="public/images/guides/mongo4.jpeg" style="width: 800px;">

5. Click on `Connect` and select `MongoDB for VSCode` 
 Copy the connection string and save it in a notepad 
 Replace `<password>` with your password set on step 3 
 Add `test` at the end of the connection string (ex. `connectionstring/test`) 
 <img src="public/images/guides/mongo5.webp" style="width: 800px;">

### Setup GitHub Authentication

1. Navigate to https://github.com/ 
 Click on your profile dropdown on the top right 
 Click `Settings` 
 <img src="public/images/guides/git1.webp" style="width: 800px;">

2. Click `Developer settings` 
 Click `OAuth Apps` 
 Click `New OAuth App` 
 <img src="public/images/guides/git2.webp" style="width: 800px;">

3. Give a name to your app 
 Type `http://localhost:3020/` in the `Homepage URL` and `Authorization callback URL` fields. 
 Click "Register application" 
 <img src="public/images/guides/git3.webp" style="width: 800px;">

4. Copy the `Client Id` and note it down 
 Click on `Generate a new client secret`, copy and note it down 
 <img src="public/images/guides/git4.webp" style="width: 800px;">

### Setup Google Authentication

1. Navigate to https://console.cloud.google.com and create a new project 
 <img src="public/images/guides/google1.webp" style="width: 800px;">

2. Navigate to the newly created project and search for `API & Services` 
 <img src="public/images/guides/google2.webp" style="width: 800px;">

3. Go to `OAuth consent screen` 
 Click the `External` field 
 Click `CREATE` 
 <img src="public/images/guides/google3.webp" style="width: 800px;">

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 
 <img src="public/images/guides/google4.webp" style="width: 800px;">

5. Go to `Credentials` 
 Click `CREATE CREDENTIALS` 
 Select `OAuth client ID` 
 <img src="public/images/guides/google5.webp" style="width: 800px;">

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 
 <img src="public/images/guides/google6.webp" style="width: 800px;">

### Setup Cloudinary

1. Navigate to https://console.cloudinary.com and login 
 Go to `Dashboard` and note down the `Cloud name` 
 <img src="public/images/guides/cloud1.jpeg" style="width: 800px;">

2. Go to settings 
 Then go to `Upload` 
 <img src="public/images/guides/cloud2.webp" style="width: 800px;">

3. Click `Add upload preset` 
 Change `Signing Mode` to `Unsigned` 
 Click `Save`
 Copy the newly added preset name and note it down 
 <img src="public/images/guides/cloud3.webp" style="width: 800px;">

### 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 
 <img src="public/images/guides/pusher1.webp" style="width: 800px;">

2. Go to `App Keys` 
 Note down values 
 <img src="public/images/guides/pusher2.webp" style="width: 800px;">

### 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)

NextJs-Messenger-Clone

NextJs-Messenger-Clone Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

NextJs-Messenger-Clone

NextJs-Messenger-Clone Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README