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.

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