Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nnadii/messenger
Nextjs and typescript messenger clone app
https://github.com/nnadii/messenger
axios bcryptjs clsx next-auth next-cloudinary nextjs prisma pusher reactjs typescript zustand
Last synced: about 2 months ago
JSON representation
Nextjs and typescript messenger clone app
- Host: GitHub
- URL: https://github.com/nnadii/messenger
- Owner: nnadii
- Created: 2024-01-05T05:20:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-16T08:57:58.000Z (12 months ago)
- Last Synced: 2024-01-17T00:28:50.164Z (12 months ago)
- Topics: axios, bcryptjs, clsx, next-auth, next-cloudinary, nextjs, prisma, pusher, reactjs, typescript, zustand
- Language: TypeScript
- Homepage: https://messenger-liard.vercel.app
- Size: 232 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)
This is a repository for a Real-Time Messenger Clone: Next.js 14, 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 skill-set 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/Chimennadi/messenger.git
```
### 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 |