/NextJs-Messenger-Clone

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

Primary LanguageTypeScriptMIT LicenseMIT

NextJs-Messenger-Clone

A fully responsive real-time chat app made with NextJs 13 (app router), MongoDB, Tailwind CSS, Pusher, Next-Auth and Cloudinary.

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

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