Real-Time Chat App with NextJS, React, Tailwind, and Shadcn (Build and Deploy a NextJS Chat App with Audio/Video Call)

In this full course, building a state-of-the-art real-time chat app using Next.js and React will be explained with the help of Tailwind CSS and Shadcn. js, React, UI framework & library – Tailwind CSS, UI kit – ShadcnUI. This is a great course for novices and experienced developers; the course starts with a basic tutorial on Next. js, having confidence that everyone is set for the flow of the lectures and discussions in the class.

In this course, ‘Real-Time Chat App with NextJS, React, Tailwind, and Shadcn, ’ you will harness the power of reliable recent tools such as ShadcnUI for components and styling, Convex DB for real-time database, and Clerk for security features. Furthermore, you will use LiveKit for audio/video calls and uploading to allow smooth file uploads and enhance its quality for users.

When the course is finished, you will develop a multi-functional application that supports dynamic interactions, group chats, real-time notifications, and much more. This means that the creation will stand out with a well-developed mobile UI, a dark theme, support for turning into a PWA, and Convex for reliable data work.

Real-Time Chat App with NextJS, React, Tailwind, and Shadcn Table of Contents:

1. Introduction Preview (01:59)
2. Before we begin (00:33)
3. NextJS Project Setup Preview (01:34)
4. shadcn/ui Setup Preview (04:34)
5. Introduction to NextJS Preview (05:00)
6. Routing in NextJS Preview (03:27)
7. Client vs Server components Preview (02:31)
8. Convex DB Setup Preview (01:53)
9. Clerk Auth Setup Preview (02:43)
10. Update: Clerk authMiddleware Preview (00:19)
11. Integrating Convex with Clerk Preview (08:11)
12. Storing user data in Convex DB Preview (14:50)
13. Setting up frontend routes Preview (05:37)
14. Sidebar & adding navigation Preview (13:19)
15. Items list and conversation container Preview (09:39)
16. Adding theme switching Preview (02:20)
17. Backend for creating friend request Preview (07:40)
18. Add dialog for sending requests Preview (14:14)
19. Render list of requests Preview (09:16)
20. Showing pending request count Preview (02:22)
21. Deny friend request Preview (03:03)
22. Accept friend request Preview (09:28)
23. Render list of conversations Preview (09:36)
24. Render active conversation Preview (10:13)
25. Chat input and sending messages Preview (12:10)
26. Rendering conversation messages Preview (11:10)
27. Render last message in conversations list Preview (04:58)
28. Removing friends Preview (11:24)
29. Backend for creating groups Preview (04:58)
30. Add dialog for creating groups Preview (11:58)
31. Rendering groups in conversations list Preview (01:50)
32. Delete group Preview (02:37)
33. Leave group Preview (02:48)
34. Backend for read receipts Preview (01:42)
35. Adding read receipts to conversations Preview (06:12)
36. Showing unseen messages count Preview (05:30)
37. Build & deploy to Vercel Preview (06:11)
38. Adding a custom domain Preview (01:51)
39. Creating attachments popover (02:23)
40. Adding the emoji picker (04:41)
41. Connecting emoji picker to chat input (03:14)
42. Setting up uploadthing (08:59)
43. Adding image/video/file uploads (08:41)
44. Rendering image and video messages (07:55)
45. Rendering file messages (01:41)
46. LiveKit setup (03:04)
47. Rendering audio/video calls (10:24)
48. Rendering call status (01:13)
49. PWA and manifest setup (02:24)
50. Metadata and Next config setup (03:44)
51. Build and deploy to desktop and mobile (03:58)

Who is this course for?

1. Novice and experienced ReactJS developers who want to build their projects using NextJS from scratch to the production environment.
2. For constructing and launching a complete and sound full-stack application, NextJS developers are hopeful.
3. Heads of development teams who want to try out more of the new technologies, including Tailwind, TypeScript, and shading/UI, in their repertoire.

Click on the links below to Download Real-Time Chat App with NextJS, React, Tailwind, and Shadcn!