https://github.com/awebcode/pusher_messenger
https://github.com/awebcode/pusher_messenger
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/awebcode/pusher_messenger
- Owner: awebcode
- License: mit
- Created: 2024-01-17T16:13:50.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-17T16:46:07.000Z (about 2 years ago)
- Last Synced: 2025-01-23T03:33:20.583Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://asikur-pusher-messenger.vercel.app
- Size: 220 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2024)
This is a repository for a Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher.
Master the art of building a real-time Messenger clone using the latest web development technologies. In this comprehensive tutorial, we'll walk you through the process of creating a fully-functional and visually stunning chat application that rivals the best in the industry.
Key Features:
- Real-time messaging using Pusher
- Message notifications and alerts
- Tailwind design for sleek UI
- Tailwind animations and transition effects
- Full responsiveness for all devices
- Credential authentication with NextAuth
- Google authentication integration
- Github authentication integration
- File and image upload using Cloudinary CDN
- Client form validation and handling using react-hook-form
- Server error handling with react-toast
- Message read receipts
- Online/offline user status
- Group chats and one-on-one messaging
- Message attachments and file sharing
- User profile customization and settings
- How to write POST, GET, and DELETE routes in route handlers (app/api)
- How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!)
- Handling relations between Server and Child components in a real-time environment
- Creating and managing chat rooms and channels
Whether you're an experienced developer looking to expand your skillset or a beginner eager to learn the latest web development technologies, this tutorial has something for everyone. Join us on this exciting journey and take your web development skills to new heights!
### Prerequisites
**Node version 14.x**
### Cloning the repository
```shell
git clone https://github.com/Md-Asikur-Rahman2/pusher_messenger
```
### Live Link
```shell
https://asikur-pusher-messenger.vercel.app/
```
### Install packages
```shell
npm i
```
### Setup .env file
```js
DATABASE_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=
```
### Setup Prisma
```shell
npx prisma db push
```
### Start the app
```shell
npm run dev
```
## Available commands
Running commands with npm `npm run [command]`
| command | description |
| :-------------- | :--------------------------------------- |
| `dev` | Starts a development instance of the app |