Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ishre-yash/chat-fusion
Elevate your messaging experience with our real-time chat app. Enjoy sleek design, secure authentication, file sharing, and more. Explore data handling, real-time updates, and chat room management. The future of communication is here.
https://github.com/ishre-yash/chat-fusion
nextjs react
Last synced: 4 days ago
JSON representation
Elevate your messaging experience with our real-time chat app. Enjoy sleek design, secure authentication, file sharing, and more. Explore data handling, real-time updates, and chat room management. The future of communication is here.
- Host: GitHub
- URL: https://github.com/ishre-yash/chat-fusion
- Owner: ishre-yash
- Created: 2023-05-21T03:25:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-12T01:37:34.000Z (about 1 year ago)
- Last Synced: 2023-09-12T09:28:31.256Z (about 1 year ago)
- Topics: nextjs, react
- Language: TypeScript
- Homepage:
- Size: 156 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ChatFusion: Real-Time Messaging Redefined
Introducing a cutting-edge message web application that brings real-time communication to life. Our feature-packed platform offers seamless message notifications, stunning Tailwind-designed UI with animations, and full responsiveness across all devices. Enjoy secure credential authentication with NextAuth, along with easy integration with Google and GitHub authentication. Effortlessly upload files and images via Cloudinary CDN, and streamline form validation with react-hook-form. Handle server errors gracefully with react-toast, enable message read receipts, and track user status online/offline. Engage in group chats and one-on-one messaging, share attachments, customize user profiles, and fine-tune settings. Learn how to create, fetch, and delete data with POST, GET, and DELETE routes in our route handlers, and explore direct database access in server React components. Seamlessly manage relationships between server and child components in a real-time environment, and effortlessly create and oversee chat rooms and channels. Elevate your messaging experience with our feature-rich, user-friendly message web app.
## Messenger
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
### Prerequisites
**Node version 14.x**
### Cloning the repository
```shell
git clone
```
### 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 |