Skip to content

Latest commit

 

History

History
119 lines (78 loc) · 5.03 KB

README.md

File metadata and controls

119 lines (78 loc) · 5.03 KB
Raw

Next13-Messenger Clone 🚀

Next13-Messenger Clone is a powerful real-time messaging application built with Next.js 13, offering an immersive and feature-rich communication experience. It combines cutting-edge technologies with a sleek user interface to redefine how users interact online.

Next13-Messenger Screenshot

Live Preview 🌐

Check out the live preview of Next13-Messenger Clone here.

Key Features 🔑

  • 📬 Real-time messaging using Pusher
  • 🔔 Message notifications and alerts
  • 🎨 Sleek UI design powered by Tailwind CSS
  • 🎞️ Tailwind animations and transition effects
  • 📱 Full responsiveness for all devices
  • 🔐 Secure credential authentication with NextAuth
  • 🌐 Seamless integration with Google and Github authentication
  • 📁 Effortless file and image uploads using Cloudinary CDN
  • ✅ Client-side form validation and handling with react-hook-form
  • 🍞 Server error handling using react-toast
  • ✔️ Message read receipts for tracking
  • 🟢 Online/offline user status indication
  • 👥 Group chats and personalized one-on-one messaging
  • 📎 Convenient 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

Dive into the world of modern real-time messaging and explore the possibilities with Next13-Messenger Clone!

Technologies Used 🛠️

  • Next.js 13: Empowering high-performance rendering and optimized client-side routing.
  • Pusher: Enabling real-time messaging functionality.
  • Tailwind CSS: Styling the application with a utility-first CSS framework.
  • NextAuth: Simplifying authentication with credential, Google, and Github integration.
  • MongoDB: A robust and scalable NoSQL database for data storage.
  • Prisma: A data access toolkit for working with databases, including MongoDB.
  • Cloudinary: Managing file and image uploads effortlessly in the cloud.
  • React-hook-form: Ensuring client-side form validation and handling.
  • react-toast: Handling server errors gracefully.

Installation 🚀

  1. Clone this repository: git clone https://github.com/your-username/next13-messenger-clone.git

  2. Navigate to the project directory: cd next13-messenger-clone

  3. Install dependencies: npm install

  4. Start the development server: npm run dev

Screenshots 📷

Sign Up Interface Sign Up interface.

Sign in Interface SignIn interface.

Other people Interface Other people interface.

User Profile User profile customization.

Chat Interface Real-time messaging in action.

Group Interface Real-time Group messaging.

Create Group Interface Create Group Interface.

delete Chat alert Delete Chat Alert.

Message Attachments Effortless file and image sharing.

Conversation manage Conversation Manage Interface.

Usage 🎈

  1. Sign up or sign in using your preferred authentication method.

  2. Start real-time conversations, whether one-on-one or in group chats.

  3. Customize your user profile and settings.

  4. Explore the wealth of features Next13-Messenger Clone has to offer!

Contributing 🤝

Contributions to Next13-Messenger Clone are highly encouraged! If you want to contribute:

  1. Fork the repository.

  2. Create a new branch for your feature: git checkout -b feature-name

  3. Make your changes and commit them: git commit -m "Add your message here"

  4. Push to your forked repository: git push origin feature-name

  5. Create a pull request to the main repository.

Please follow the established coding guidelines and maintain consistency with the existing codebase.

Acknowledgments 🙌

We express our gratitude to the open-source community, third-party libraries, frameworks, tutorials for their support in building Next13-Messenger Clone.