Welcome to the Messenger Clone project! This is a real-time messaging application built using Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, and Pusher. The project aims to provide a sleek and responsive user interface for messaging, supporting various features like real-time messaging, notifications, user authentication, file sharing, and more.
https://messenverse.vercel.app/
| Screenshot 1 | Screenshot 2 | Screenshot 3 |
|---|---|---|
 |
 |
 |
| Screenshot 4 | Screenshot 5 | |
 |
 |
The application leverages Pusher to enable real-time messaging between users, ensuring messages are delivered instantly.
Users receive notifications and alerts for new messages and other important events, keeping them informed at all times.
The project utilizes Tailwind CSS to create a modern and visually appealing user interface.
Enhance the user experience with smooth animations and transition effects created using Tailwind CSS.
The application is designed and optimized to be fully responsive, allowing users to access and use it seamlessly on various devices.
User authentication is implemented using NextAuth, allowing users to sign up, log in, and manage their accounts securely.
Users have the option to sign in using their Google accounts, providing a convenient and quick login process.
For Github users, the project offers the option to authenticate using their Github accounts.
Users can upload files and images to the application using the Cloudinary CDN service, making it easy to share media.
Form validation and handling on the client-side are managed using the powerful react-hook-form library.
Error handling on the server-side is implemented with react-toast, providing clear and informative error messages to users.
Users can see if their messages have been read by other recipients, providing insight into the message's status.
The application displays the online/offline status of users, making it easier to know who is currently active.
Users can participate in group chats or engage in one-on-one messaging, supporting various communication scenarios.
Files and attachments can be shared within the messaging platform, allowing users to exchange various media types.
Users can customize their profiles and manage settings to personalize their experience.
The project includes examples and guides on writing various API routes to handle data interactions.
The project demonstrates how to fetch data directly from the database in server-side React components, without relying on APIs.
Learn how to manage and handle relations between server and child components in a real-time messaging environment.
The application supports the creation and management of chat rooms and channels for different user groups.
Node version 14.x
git clone https://github.com/khantseithu/messenger-clone.gitnpm iDATABASE_URL=
NEXTAUTH_SECRET=
NEXT_PUBLIC_PUSHER_APP_KEY=
PUSHER_APP_ID=
PUSHER_SECRET=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
GITHUB_ID=
GITHUB_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=npx prisma db push
npm run devRunning commands with npm npm run [command]
| command | description |
|---|---|
dev |
Starts a development instance of the app |
.
├── LICENSE
├── README.md
├── app
│ ├── (site)
│ │ ├── components
│ │ │ ├── AuthForm.tsx
│ │ │ └── AuthSocialButton.tsx
│ │ └── page.tsx
│ ├── actions
│ │ ├── getConversationById.ts
│ │ ├── getConversations.ts
│ │ ├── getCurrentUser.ts
│ │ ├── getMessages.ts
│ │ ├── getSession.ts
│ │ └── getUsers.ts
│ ├── api
│ │ ├── auth
│ │ │ └── [...nextauth]
│ │ │ └── route.ts
│ │ ├── conversations
│ │ │ ├── [conversationId]
│ │ │ │ ├── route.ts
│ │ │ │ └── seen
│ │ │ │ └── route.ts
│ │ │ └── route.ts
│ │ ├── messages
│ │ │ └── route.ts
│ │ ├── register
│ │ │ └── route.ts
│ │ └── settings
│ │ └── route.ts
│ ├── components
│ │ ├── ActiveStatus.tsx
│ │ ├── Avatar.tsx
│ │ ├── AvatarGroup.tsx
│ │ ├── Button.tsx
│ │ ├── EmptyState.tsx
│ │ ├── inputs
│ │ │ ├── Input.tsx
│ │ │ └── Select.tsx
│ │ ├── modals
│ │ │ ├── GroupChatModal.tsx
│ │ │ ├── LoadingModal.tsx
│ │ │ └── Modal.tsx
│ │ └── sidebar
│ │ ├── DesktopItem.tsx
│ │ ├── DesktopSidebar.tsx
│ │ ├── MobileFooter.tsx
│ │ ├── MobileItem.tsx
│ │ ├── SettingsModal.tsx
│ │ └── Sidebar.tsx
│ ├── context
│ │ ├── AuthContext.tsx
│ │ └── ToasterContext.tsx
│ ├── conversations
│ │ ├── [conversationId]
│ │ │ ├── components
│ │ │ │ ├── Body.tsx
│ │ │ │ ├── ConfirmModal.tsx
│ │ │ │ ├── Form.tsx
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── ImageModal.tsx
│ │ │ │ ├── MessageBox.tsx
│ │ │ │ ├── MessageInput.tsx
│ │ │ │ └── ProfileDrawer.tsx
│ │ │ └── page.tsx
│ │ ├── components
│ │ │ ├── ConversationBox.tsx
│ │ │ └── ConversationList.tsx
│ │ ├── layout.tsx
│ │ ├── loading.tsx
│ │ └── page.tsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── hooks
│ │ ├── useActiveChannel.ts
│ │ ├── useActiveList.ts
│ │ ├── useConversation.ts
│ │ ├── useOtherUser.ts
│ │ ├── useRoutes.ts
│ │ └── useSidebar.ts
│ ├── layout.tsx
│ ├── libs
│ │ ├── prismadb.ts
│ │ └── pusher.ts
│ ├── types
│ │ └── index.ts
│ └── users
│ ├── components
│ │ ├── UserBox.tsx
│ │ └── UserList.tsx
│ ├── layout.tsx
│ ├── loading.tsx
│ └── page.tsx
├── middleware.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ └── api
│ └── pusher
│ └── auth.ts
├── postcss.config.js
├── prisma
│ └── schema.prisma
├── public
│ ├── images
│ │ ├── logo.png
│ │ └── placeholder.jpg
│ ├── next.svg
│ └── vercel.svg
├── tailwind.config.js
└── tsconfig.json
33 directories, 80 filesIf you would like to contribute to this project, we welcome your pull requests and contributions. Please read the contribution guidelines in the repository.
This project is licensed under the MIT License, which means you are free to use, modify, and distribute the code.
We would like to express our gratitude to the developers and contributors of the libraries and tools used in this project. Their efforts have made this application possible.
Thank you for choosing the Messenger Clone project. Happy messaging!