WhatsUpApp - Messenger Clone

Welcome to the WhatsUpApp repository! This project is a messaging application inspired by the popular Messenger app.

Features

• Authentication: Users can sign in using their GitHub or Google accounts.
• User Presence: The app displays whether a user is online or offline.
• Profile Customization: Users can change their nickname and avatar.
• Messaging: Send and receive messages with individual users or in group chats.
• Read Receipts: Check if your messages have been read by other participants.
• Active Chats: View a list of ongoing conversations.
• Group Chats: Create and participate in group conversations.
• Chat Deletion: Ability to delete individual and group chats.

Technologies Used

• React
• Tailwind CSS
• Next.js
• Prisma
• MongoDB
• NextAuth
• Pusher
• Vercel

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
• Handling relations between Server and Child components in a real-time environment
• Creating and managing chat rooms and channels

Installation and Setup

Cloning the repository

git clone https://github.com/TaurusVB/whats-up-wp.git

Install packages

npm i

Setup .env file

DATABASE_URL=

NEXTAUTH_SECRET=

GITHUB_ID=
GITHUB_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=

NEXT_PUBLIC_PUSHER_APP_KEY=
PUSHER_APP_ID=
PUSHER_SECRET=

Start the app

npm run dev