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.jsReact.jsPrismaNextAuth.jsTailwind CSSMongoDB

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.

Preview

Project Image

Features

Real-Time Messaging: Instantly send and receive messages using Pusher for seamless live chat.
User Authentication: Secure login via NextAuth.js, supporting GitHub & Google OAuth and email authentication.
Presence Detection: Track active users in real-time with Pusher's presence channels.
Media Uploads: Share images effortlessly with Cloudinary integration for optimized storage.
Database Management: Uses Prisma ORM for efficient and scalable user and message data handling.
Responsiveness: Smooth performance and adaptability across various devices and screen sizes for a consistent user experience.
Modern UI/UX: Built with Tailwind CSS, offering a clean, intuitive, and user-friendly interface.
Secure Conversations: Ensures privacy with server-side authentication and protected API routes.
Optimized Performance: Leverages Next.js for fast loading, server-side rendering, and API efficiency.