https://github.com/msaad53407/messenger_clone

https://github.com/msaad53407/messenger_clone

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/msaad53407/messenger_clone
• Owner: msaad53407
• Created: 2024-01-23T15:07:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-23T21:00:31.000Z (over 1 year ago)
• Last Synced: 2025-01-11T01:10:40.786Z (4 months ago)
• Language: TypeScript
• Homepage: https://messenger-clone-ten-eosin.vercel.app
• Size: 1.07 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Realtime Messenger Clone Application

A Realtime Messenger Clone Application! 🚀 This application provides a seamless and real-time chatting experience, utilizing cutting-edge technologies to make your conversations smooth and enjoyable.

## Visual Tour

![messenger-clone-users-page](/public/Images/messenger_clone_users_page.png)

![messenger-clone-conversations-page](/public/Images/messenger_clone_conversations_page.png)

![messenger-clone-conversation-page](/public/Images/messenger_clone_conversation_page.png)

![messenger-clone-settings-modal](/public/Images/messenger_clone_settings_modal.png)

## Features

1. **Authentication and Authorization System** 🔐

   - Fully implemented with Next Auth, supporting both Github and Google Social Logins. [Learn more about Next Auth](https://next-auth.js.org/)

2. **Customizable Account with Profile Picture** 🖼️

   - Personalize your account with a profile picture and public display name.

3. **Group Chat and One to One Chat** 💬

   - Engage in both group conversations and private one-on-one chats.

4. **Realtime Messaging** ⚡

   - Experience the thrill of real-time messaging and receive notifications when your message is seen.

5. **Send and Receive Images** 📷

   - Share images seamlessly within your conversations.

6. **Online Status Indicator** 🟢

   - Quickly identify which users are currently online.

7. **Conversation Management** 🗑️

   - Easily delete conversations.

## Tech Stack

- Typescript

- Next.js 14

- Next Auth

- Next Cloudinary

- React

- Pusher

- Prisma

- MongoDB

- Zustand

- React Hook Form

- Tailwind CSS

## Environment Variables

Configure your environment variables by Copying these Secrets, Or you can also edit the ```.env.example``` file

```bash

DATABASE_URL=

NEXTAUTH_SECRET=

GITHUB_CLIENT_ID=

GITHUB_CLIENT_SECRET=

GOOGLE_CLIENT_ID=

GOOGLE_CLIENT_SECRET=

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=

NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=

PUSHER_APP_ID=

NEXT_PUBLIC_PUSHER_APP_KEY=

PUSHER_SECRET=

```

## Commands to run Application

```bash

# Installing Dependencies with npm

npm install

```

```bash

# Installing Dependencies with pnpm

pnpm install

```

```bash

# Installing Dependencies with yarn

yarn install

```

```bash

# Installing Dependencies with bun

bun install

```

```bash

# Running Local Development Server

npm run dev

# Bundling a Production Build

npm run build

# Starting a Production Server

npm run start

```

#### Same commands can be run using bun, yarn, or pnpm.

## Deployment

The application is deployed on [Vercel](https://messenger-clone-ten-eosin.vercel.app/).

Feel free to explore, chat, and enjoy the Realtime Chat Application! If you have any questions or feedback, don't hesitate to [reach out](mailto:[email protected]). Happy chatting! 🎉