Advanced Fullstack Real-Time Chat App Tutorial Using Bun, Express.JS, Nuxt 3, Vue.JS & Socket.io

Welcome to this 🚀 comprehensive YouTube tutorial where we'll build a feature-rich, complex fullstack real-time chat app like you've never seen before! In this step-by-step guide, you'll learn how to construct a chat application that stands out with an extensive set of features and a modern, robust techstack.

Tech Stack Overview

BACKEND

Bun: Our blazing fast package manager and JavaScript runtime ⚡️

Prisma: The modern ORM for interacting with our MySQL relational database

MySQL: A reliable relational database for managing our data

FRONTEND

Bun: Also our package manager for the frontend 🎉

Nuxt 3: A cutting-edge framework built on top of Vue.JS to create dynamic and powerful applications

NuxtUI: A beautiful UI library to design sleek and responsive interfaces

Tanstack-Query: The tool that handles our frontend/backend state management with ease

Real-Time Communication

Key Features of the Chat App
Friend Management: Easily add friends from the lobby to your personalized friends list 👥

Chat Creation & Management: Create single and group chats with friends effortlessly, and have the option to delete chats as needed 💬

Rich Messaging Experience: Send GIFs, images, emojis, and text messages, making your conversations vibrant and interactive 🎨

Notification System: A fully functional notification system that keeps you in the loop 🔔

Auto-Mark as Read: Notifications that have been seen are automatically marked as read, ensuring you’re always up-to-date ✔️

This tutorial is designed to be thorough and detailed, walking you through every step from setting up your development environment with Bun to managing state with Tanstack-Query. Whether you're a seasoned developer or just starting out, you'll gain invaluable insights into building a next-generation chat app.

So grab your favorite beverage ☕, get comfortable, and let's dive into building this game-changing chat application together!

Happy coding and see you in the video! 😎

❗❗❗Please make sure to copy & paste the code from the following links when you need it (because it's boring and time consuming to write it line by line):
BACKEND

FRONTEND

If you like, you can help me out & motivate me by supporting me here(it's completely optional ☺️):

Timestamps will follow soon...

[Mundlurron]

Great work.. Really loved this project. Can you make one with Hono and react 19 fullstack monerepo(with trpc or orpc) if possible. Would really like to see something like that

[Furyki]

Can you share the source code on github, tnx in advance.