Skip to main content
Live Messenger banner

Live Messenger

A real-time messaging application featuring user authentication, presence detection, and media uploads. It allows users to send text and image-based messages, with live status updates powered by Pusher's presence channels. Secure authentication is handled through NextAuth.js, integrating providers like GitHub & Google for seamless login. The app also supports Cloudinary image uploads, enabling users to share media instantly. Designed with Next.js, Tailwind CSS, and Prisma, this project ensures a modern, scalable, and interactive chat experience.

  • Next.js
  • React.js
  • Prisma
  • NextAuth.js
  • Tailwind CSS
  • MongoDB
Overview

Built with Next.js, Tailwind CSS, and Prisma ORM, this app ensures fast performance and scalability. It features NextAuth.js for secure authentication, Pusher for real-time messaging, and Cloudinary for media uploads. Designed for accessibility, it offers a seamless experience across all devices.

Key Features

  • Real-Time MessagingInstantly send and receive messages using Pusher for seamless live chat.
  • User AuthenticationSecure login via NextAuth.js, supporting GitHub & Google OAuth and email authentication.
  • Presence DetectionTrack active users in real-time with Pusher's presence channels.
  • Media UploadsShare images effortlessly with Cloudinary integration for optimized storage.
  • Database ManagementUses Prisma ORM for efficient and scalable user and message data handling.
  • ResponsivenessSmooth performance and adaptability across various devices and screen sizes for a consistent user experience.
  • Modern UI/UXBuilt with Tailwind CSS, offering a clean, intuitive, and user-friendly interface.
  • Secure ConversationsEnsures privacy with server-side authentication and protected API routes.
  • Optimized PerformanceLeverages Next.js for fast loading, server-side rendering, and API efficiency.
Preview

Live Messenger screenshot