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
See a live demo on Vercel
- 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
-
Navigate to https://www.mongodb.com/atlas/database and register
-
Find and Select
Build a Database
Select the Free tier and press onCreate
at the bottom
-
Create a user (note down the password)
Scroll down toAdd entries to your IP Access List
Enter0.0.0.0/0
and pressAdd Entry
-
Click on
Connect
and selectMongoDB for VSCode
Copy the connection string and save it in a notepad
Replace<password>
with your password set on step 3
Addtest
at the end of the connection string (ex.connectionstring/test
)
-
Navigate to https://console.cloud.google.com and create a new project
-
Navigate to the newly created project and search for
API & Services
-
Go to
OAuth consent screen
Click theExternal
field
ClickCREATE
-
Click the
App name
field and give it a name
On User Mail field, select your email
Scroll down toDeveloper contact information
and type your email
ClickSAVE AND CONTINUE
until you're on theSummary
step
-
Go to
Credentials
ClickCREATE CREDENTIALS
SelectOAuth client ID
-
Select
Web application
as Application Type
Scroll down toAuthorized redirect URIs
and addhttps://localhost:3020/api/auth/callback/google
ClickCREATE
Copy theCLient ID
andClient Secret
and note it down
-
Navigate to https://console.cloudinary.com and login
Go toDashboard
and note down theCloud name
-
Click
Add upload preset
ChangeSigning Mode
toUnsigned
ClickSave
Copy the newly added preset name and note it down
-
Navigate to https://dashboard.pusher.com/channels
ClickCreate app
(orGet Started
)
Give the app a name
SelectReact
for Frontend andNode.js
for Backend
Create the app
- Clone/download repo
- Create a file called .env.local in the root directory of your project, type the following in cmd/powershell
cp env.example .env.local
- Inside the
.env.local
file, add the MongoDB, Pusher, Cloudinary, GitHub and Google keys from the previous steps yarn install
to install the dependencies (runnpm install yarn
if you don't have yarn installed)yarn prisma db push
to create the DB collectionsprisma generate
to create the prisma client
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 |
- 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