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 (13.4.x)
• React (18.x)
• MongoDB (6.x)
• Tailwind CSS (3.x)
• Pusher (5.x)
• Next-Auth (4.x)
• Typescript (5.x)
• Production build script

Live Demo

See a live demo 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 <password> 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

See also

• Some Design ideas were taken from Facebook Messenger
• Some Implementation Ideas for this project are taken from Josh and Antonio
• Project was bootstrapped with create-next-app