Real-Time Chat App with NextJS, React, Tailwind, and Shadcn

Focused View

Code Complete

4:51:09

178 View

1. Introduction

1. Introduction.mp4

01:59

2.1 realtime-chat-app.zip

2. Before we begin.html

2. Project Setup

1. NextJS Project Setup.mp4

01:34

2. shadcnui Setup.mp4

04:34

3. NextJS Basics (optional)

1. Introduction to NextJS.mp4

05:00

2. Routing in NextJS.mp4

03:27

3. Client vs Server components.mp4

02:31

4. Database & Auth setup

1. Convex DB Setup.mp4

01:53

2. Clerk Auth Setup.mp4

02:43

3. Integrating Convex with Clerk.mp4

08:11

4. Storing user data in Convex DB.mp4

14:50

5. Layout and Navigation

1. Setting up frontend routes.mp4

05:37

2. Sidebar & adding navigation.mp4

13:19

3. Items list and conversation container.mp4

09:39

6. Dark Mode

1. Adding theme switching.mp4

02:20

7. Adding Friends

1. Backend for creating friend request.mp4

07:40

2. Add dialog for sending requests.mp4

14:14

3. Render list of requests.mp4

09:16

4. Showing pending request count.mp4

02:22

5. Deny friend request.mp4

03:03

6. Accept friend request.mp4

09:28

8. Conversations

1. Render list of conversations.mp4

09:36

2. Render active conversation.mp4

10:13

3. Chat input and sending messages.mp4

12:10

4. Rendering conversation messages.mp4

11:10

5. Render last message in conversations list.mp4

04:58

6. Removing friends.mp4

11:24

9. Groups

1. Backend for creating groups.mp4

04:58

2. Add dialog for creating groups.mp4

11:58

3. Rendering groups in conversations list.mp4

01:50

4. Delete group.mp4

02:37

5. Leave group.mp4

02:48

10. Read receipts

1. Backend for read receipts.mp4

01:42

2. Adding read receipts to conversations.mp4

06:12

3. Showing unseen messages count.mp4

05:30

11. Build & Deploy

1. Build & deploy to Vercel.mp4

06:11

2. Adding a custom domain.mp4

01:51

12. Emoji picker

1. Creating attachments popover.mp4

02:23

2. Adding the emoji picker.mp4

04:41

3. Connecting emoji picker to chat input.mp4

03:14

13. File upload

1. Setting up uploadthing.mp4

08:59

2. Adding imagevideofile uploads.mp4

08:41

3. Rendering image and video messages.mp4

07:55

4. Rendering file messages.mp4

01:41

14. AudioVideo call

1. LiveKit setup.mp4

03:04

2. Rendering audiovideo calls.mp4

10:24

3. Rendering call status.mp4

01:13

15. Publishing Progressive Web App

1. PWA and manifest setup.mp4

02:24

2. Metadata and Next config setup.mp4

03:44

3. Build and deploy to desktop and mobile.mp4

03:58

Description

Build and Deploy a NextJS Chat App with audio/video call using React, Tailwind, Typescript, and ShadcnUI

What You'll Learn?

Learn NextJS from scratch with a real world full-stack project
Make a responsive UI with dark mode using Tailwind CSS and shadcn/ui
Add real-time communication via chat and audio/video calls using Convex and LiveKit
Understand how to manage image/video/file uploads and rendering with uploadthing
Understand how to deploy NextJS apps to the web with custom domains
Convert your app into a Progressive Web App (PWA) so it can be downloaded natively on desktop, iOS, and android

Who is this for?

ReactJS developers who wish to learn NextJS through a real-life projet

NextJS developers looking to build and deploy a feature-rich real full-stack app

Developers looking to learn cutting edge technologies like Tailwind, TypeScript, and shadcn/ui

What You Need to Know?

Basic knowledge of ReactJS and TypeScript are required

No NextJS experience is needed, the course includes a crash course before we get started!

More details

Description
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:
Next.js (crash course included)
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
Throughout this course, you'll embark on a journey to create a feature-rich, real-time chat application from scratch. We'll leverage powerful tools like ShadcnUI components, Convex for database management, Clerk for authentication, LiveKit for audio/video calls, and Uploadthing for seamless file uploads. Plus, we'll deploy our app effortlessly using Vercel.
Here's a glimpse of what you'll learn and build:
Add and remove friends seamlessly for enhanced user interaction.
Create conversations and messages in real-time, providing a dynamic user experience.
Establish group chats effortlessly, fostering collaboration among users.
Implement robust authentication with Clerk to ensure secure access to your application.
Enhance user experience with dark mode support.
Keep users informed with real-time notifications, making sure they never miss a beat.
Develop a responsive mobile UI for seamless access across various devices.
Enable audio/video calls using LiveKit, adding a personal touch to communication.
Allow users to upload images, videos, and files seamlessly with Uploadthing integration.
Enhance user engagement with an emoji picker, making conversations more expressive.
Convert your application into a Progressive Web App (PWA), ensuring cross-platform compatibility and native-like experiences on desktop, iOS, and Android.
Utilize Convex for real-time database operations, ensuring data consistency and reliability.
Additionally, this course includes a Next.js crash course tailored for complete beginners. So whether you're new to Next.js or an experienced developer looking to expand your skill set, this course has something for everyone.
By the end of this course, you'll not only have built an impressive real-time chat application but also gained invaluable skills and insights into modern web development practices. Enroll now and take your web development journey to new heights!
Who this course is for:
ReactJS developers who wish to learn NextJS through a real-life projet
NextJS developers looking to build and deploy a feature-rich real full-stack app
Developers looking to learn cutting edge technologies like Tailwind, TypeScript, and shadcn/ui

User Reviews

Rating

average 0

Total votes0

Focused display

Code Complete aims to provide high-quality coding tutorials for web development using frameworks like React and Next.js. Whether you're a beginner looking to dive into the world of web development or an experienced developer seeking to enhance your skills, you've come to the right place.Our tutorials cover a wide range of topics, including building responsive web applications, creating interactive user interfaces, optimizing performance, and much more. With step-by-step instructions and practical examples, we aim to make complex concepts easy to understand and implement. Join our community of passionate learners and take your web development skills to the next level!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.