Messenger Clone - A Real-Time Messaging App using Next.js 14.

📔 Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

messenger-clone/
  |- app/
    |-- (site)/
        |--- components/
        |--- page.tsx
    |-- actions/
        |--- get-conversation-by-id.ts
        |--- get-conversation.ts
        |--- get-current-user.ts
        |--- get-messages.ts
        |--- get-session.ts
        |--- get-users.ts
    |-- api/
        |--- auth/[...nextauth]
        |--- conversations/[conversationId]
        |--- messages/
        |--- pusher/
        |--- register/
        |--- settings/
    |-- components/
        |--- inputs/
        |--- modals/
        |--- sidebar/
        |--- active-status.tsx
        |--- avatar-group.tsx
        |--- avatar.tsx
        |--- button.tsx
        |--- empty-state.tsx
        |--- loading-modal.tsx
    |-- config/
        |--- authOptions.tsx
        |--- site.ts
    |-- context/
        |--- auth-context.ts
        |--- toaster-context.ts
    |-- conversations/
        |--- [conversationId]/
            |---- components/
        |--- components/
        |--- layout.tsx
        |--- loading.tsx
        |--- page.tsx
    |-- hooks/
        |--- use-active-channel.tsx
        |--- use-active-list.tsx
        |--- use-conversation.tsx
        |--- use-other-user.tsx
        |--- use-routes.tsx
    |-- libs/
        |--- prismadb.ts
        |--- pusher.ts
    |-- types/
        |--- index.ts
    |-- users/
        |--- components/
        |--- layout.tsx
        |--- loading.tsx
        |--- page.tsx
    |-- favicon.ico
    |-- globals.css
    |-- layout.tsx
  |- prisma/
    |-- schema.prisma
  |- public/
    |-- images/
        |--- logo.png
        |--- placeholder.jpg
  |- .env
  |- .env.example
  |- .eslintrc.json
  |- .gitignore
  |- middleware.ts
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file in root directory.
Contents of .env:

# .env

# mongodb url
DATABASE_URL="mongodb://127.0.0.1/messenger-clone"

# client url for next auth
NEXTAUTH_URL=http://localhost:3000

# next auth secret (random strings)
NEXTAUTH_SECRET=<your-nextauth-secret>

# github auth credentials
GITHUB_CLIENT_ID=<your-github-client-id>
GITHUB_CLIENT_SECRET=<your-github-client-secret>

# google auth credentials
GOOGLE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=<your-google-client-secret>

# next cloudinary credentials
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=xxxxxxxxx
NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET=xxxxxxxxxx

# pusher credentials
PUSHER_APP_ID=00000000
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_PUSHER_APP_CLUSTER=xxx

MongoDB URL
- Install and run MongoDB locally or use a cloud-based MongoDB service.
- Replace the placeholder in DATABASE_URL with your actual MongoDB connection string.
NextAuth Configuration
- Set up NextAuth by following the official documentation: NextAuth.js Documentation
- Set NEXTAUTH_URL to the base URL of your application.
- Generate a random string for NEXTAUTH_SECRET.
GitHub Auth
- Create a GitHub OAuth App by following the guide: Creating an OAuth App
- Set GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET with the obtained credentials.
Google Auth
- Create a project on the Google Cloud Console: Google Cloud Console
- Follow the steps to set up OAuth consent screen and credentials: Create credentials
- Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET with the obtained credentials.
Cloudinary
- Sign up for a Cloudinary account: Cloudinary Sign-up
- Retrieve your cloud name from the dashboard.
- Set NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME and NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET with the obtained credentials.
Pusher
- Sign up for a Pusher account: Pusher Sign-up
- Create a new app and obtain the app ID, app secret, app key, and cluster.
- Set PUSHER_APP_ID, PUSHER_APP_SECRET, NEXT_PUBLIC_PUSHER_APP_KEY, and NEXT_PUBLIC_PUSHER_APP_CLUSTER with the obtained credentials.
Open terminal in root directory. Run npm install or yarn install.
Now app is fully configured 👍 and you can start using this app using npm run dev or yarn dev.

📚 Additional Resources

Next.js Documentation: Explore the power of Next.js for building your web applications.
- Next.js Documentation
NextAuth.js Documentation: Learn more about authentication in Next.js using NextAuth.js.
- NextAuth.js Documentation
Tailwind CSS Documentation: Dive into the documentation for Tailwind CSS, a utility-first CSS framework used in the project.
- Tailwind CSS Documentation
Pusher Documentation: Explore Pusher for adding real-time functionality to your applications.
- Pusher Documentation
React Icons Documentation: Find and customize high-quality SVG icons for your React applications.
- React Icons Documentation
React Select Documentation: Get to know more about React Select, a flexible and customizable select component.
- React Select Documentation
React Hook Form Documentation: Learn about React Hook Form for efficient form management in React.
- React Hook Form Documentation
Next Cloudinary Documentation: Understand how to integrate Cloudinary for image and video management.
- Next Cloudinary Documentation
Prisma Documentation: Explore Prisma for database access in TypeScript and JavaScript.
- Prisma Documentation
Axios Documentation: Find information on how to use Axios for making HTTP requests.
- Axios Documentation
Zustand Documentation: Learn about Zustand, a small and fast state management library.
- Zustand Documentation
React Hot Toast Documentation: Understand how to use React Hot Toast for toast notifications in React applications.
- React Hot Toast Documentation
Headless UI Documentation: Explore Headless UI, a set of completely unstyled UI components.
- Headless UI Documentation

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.