Overview

Message And Mingle is a contemporary chat application developed with cutting-edge technologies such as Next.js, TypeScript, Tailwind CSS, MongoDB, and Prisma. It offers real-time chat, group creation, profile customization, image uploads, and multiple login authentication methods, including email and social media SSO login via GitHub and Google.

Message And Mingle is a personal project and the source code for the same can be found on GitHub. Live demo vidoes included in the README.

Features included as part of the MVP release are as follows -

1. Instant Messaging - Engage in real-time conversations with other users.
2. Group Chat Creation - Form chat groups to include multiple participants.
3. Personalized Profiles - Customize your name and profile picture.
4. User Activity Status - View live online/offline status of users.
5. Photo Sharing - Upload and share images in chats via Cloudinary.
6. Diverse Authentication - Options: Register or log in using email, GitHub, Google, and Twitter.

Implementation

Message And Mingle is a server-side rendered full stack web application that utilises the following technology stack to support a plethora of exciting features -

1. Next.js: A popular React framework for building web applications.
2. TypeScript: A statically typed superset of JavaScript.
3. Tailwind CSS: A utility-first CSS framework for designing modern and responsive UIs.
4. Headless UI: A set of completely unstyled, fully accessible UI components for React.
5. React: A JavaScript library for building user interfaces.
6. Prisma: A modern database toolkit for TypeScript and Node.js.
7. MongoDB: A NoSQL database for storing chat data.
8. NextAuth: An authentication library for Next.js applications.
9. Zustand: A small, fast, and scalable state management library for React.
10. Pusher: A hosted service that makes it super-easy to add real-time data and functionality to web and mobile applications.
11. Cloudinary: A cloud service that offers a solution to a web application's entire image management pipeline.

Technologies

HTML5

CSS3

JavaScript

TypeScript

NextJS

TailwindCSS

Prisma

Firebase

MongoDB

Git Cli

Github