Build a Real-Time Chat App with NextJS, React, ShadcnUI, and Tailwind

-- 🔗 Links 🔗 --

In this comprehensive course, we'll build a full stack real-time chat application. You'll dive deep into the world of web development using cutting-edge technologies such as:
- ReactJS
- Tailwind CSS for styling
- TypeScript for type-safe code
- Shadcn/UI for reusable components and theming
- Convex DB as a real-time database
- Clerk for authentication

Here's a glimpse of what you'll learn and build:
🌎 NextJS 14 crash course
🤝 Add and remove friends
💬 Create conversations and real-time messages
👥 Creating, deleting, and leaving groups
🔒 Auth
🌙 Dark mode
⚠️ Real-time notifications
📱 Responsive mobile UI
📞 Audio/Video calls [Course]
🖼️ Image/Video/File upload [Course]
😊 Emoji picker [Course]
🖥️ Converting to Desktop and Mobile app using PWA [Course]
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!

Chapters:
00:00:00 Introduction
00:02:05 Project Setup
00:08:13 NextJS Crash Course (optional)
00:19:10 Database & Auth setup
00:46:48 Layout and Navigation
01:15:23 Dark Mode
01:18:16 Adding Friends
02:05:20 Conversations
03:04:50 Groups
03:29:02 Read receipts
03:42:26 Deploy

[Code_Complete]

Hi folks 👋 Hope you enjoyed the tutorial! If you’re looking for additional content and also want to support the channel, check out the link in the description for a 30% discount!


Updates:

1. Clerk authMiddleware


const isProtectedRoute = createRouteMatcher([ '/(.*)', ]);

export default clerkMiddleware(async (auth, req) =>
{ if (isProtectedRoute(req)) await auth.protect();}
);

export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], };

[davidmuriithi]

20 minutes in and everything is very well explained. Keep these videos coming

[ahmedzahid]

Thanks for this video really helpful Love from Finland.

[helloWorldPlus]

Hello there, how would you handle the situation in which you have different users and each has their own conversations?

[loredfolk]

I seem to not able to get the sign up page showing?

[mhmddorgham]

Nice tutorial! Where can I visit the repo for code bro? Thanks

[SaiKumarKindigeri-prve]

issue with clerk porvider unable to import

[jackepner]

With the Group Chat component, I'm getting a lot of typescript errors, and the app won't run. It does not like that friends can be null or never.

[jayrajsingh]

I' might consider buying your (this) course on udemy after i finish watching this video (so I get the flow of your teaching) but can you provide source code?

[wienerquby]

For the 51:25, is there any potential bugs that can cause ConversationPage didnt show after I made a layout.tsx under conversations file?

[srimanikantanarayanam]

Bro can you make videos on css animations

[shreysadhukha]

the request section is inactive says that user not found every time plzz fix this

[HuzaifaBilal-fozc]

Your middleware protected route is buggy

[weraldopolento]

I'm having an error in sign in to google.

[ayeshdev]

why dont u add audio, video and sending sticker functionality

[papesaliouwade]

hello @Code_Complete can you add vocal functionality please

[HuzaifaBilal-fozc]

Clicking on sidebar item reloads app i face this bug

[shreysadhukha]

can anyone provide me the source code of this app

[kirandeep.k]

i am having issues with the clerk sigin page not loading

[ahliz]

Hello my friend
I am one of the subscribers
Can I use the databases on my website instead of convex ? Is this possible and what is the method, please?