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

Real-Time Chat App with NextJS, React, Tailwind, and Shadcn, available at $44.99, has an average rating of 4.25, with 51 lectures, based on 11 reviews, and has 85 subscribers.

You will learn about 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 This course is ideal for individuals who are ReactJS developers who wish to learn NextJS through a real-life projet or NextJS developers looking to build and deploy a feature-rich real full-stack app or Developers looking to learn cutting edge technologies like Tailwind, TypeScript, and shadcn/ui It is particularly useful for ReactJS developers who wish to learn NextJS through a real-life projet or NextJS developers looking to build and deploy a feature-rich real full-stack app or Developers looking to learn cutting edge technologies like Tailwind, TypeScript, and shadcn/ui.

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

Summary

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

Price: $44.99

Average Rating: 4.25

Number of Lectures: 51

Number of Published Lectures: 51

Number of Curriculum Items: 51

Number of Published Curriculum Objects: 51

Original Price: $29.99

Quality Status: approved

Status: Live

What You Will 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 Should Attend

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

Target Audiences

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

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
TypeScriptfor type-safe code
Shadcn/UI for reusable components and theming
Convex DB as a real-time database
Clerkfor 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 authenticationwith 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!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Before we begin

Chapter 2: Project Setup

Lecture 1: NextJS Project Setup

Lecture 2: shadcn/ui Setup

Chapter 3: NextJS Basics (optional)

Lecture 1: Introduction to NextJS

Lecture 2: Routing in NextJS

Lecture 3: Client vs Server components

Chapter 4: Database & Auth setup

Lecture 1: Convex DB Setup

Lecture 2: Clerk Auth Setup

Lecture 3: Update: Clerk authMiddleware

Lecture 4: Integrating Convex with Clerk

Lecture 5: Storing user data in Convex DB

Chapter 5: Layout and Navigation

Lecture 1: Setting up frontend routes

Lecture 2: Sidebar & adding navigation

Lecture 3: Items list and conversation container

Chapter 6: Dark Mode

Lecture 1: Adding theme switching

Chapter 7: Adding Friends

Lecture 1: Backend for creating friend request

Lecture 2: Add dialog for sending requests

Lecture 3: Render list of requests

Lecture 4: Showing pending request count

Lecture 5: Deny friend request

Lecture 6: Accept friend request

Chapter 8: Conversations

Lecture 1: Render list of conversations

Lecture 2: Render active conversation

Lecture 3: Chat input and sending messages

Lecture 4: Rendering conversation messages

Lecture 5: Render last message in conversations list

Lecture 6: Removing friends

Chapter 9: Groups

Lecture 1: Backend for creating groups

Lecture 2: Add dialog for creating groups

Lecture 3: Rendering groups in conversations list

Lecture 4: Delete group

Lecture 5: Leave group

Chapter 10: Read receipts

Lecture 1: Backend for read receipts

Lecture 2: Adding read receipts to conversations

Lecture 3: Showing unseen messages count

Chapter 11: Build & Deploy

Lecture 1: Build & deploy to Vercel

Lecture 2: Adding a custom domain

Chapter 12: Emoji picker

Lecture 1: Creating attachments popover

Lecture 2: Adding the emoji picker

Lecture 3: Connecting emoji picker to chat input

Chapter 13: File upload

Lecture 1: Setting up uploadthing

Lecture 2: Adding image/video/file uploads

Lecture 3: Rendering image and video messages

Lecture 4: Rendering file messages

Chapter 14: Audio/Video call

Lecture 1: LiveKit setup

Lecture 2: Rendering audio/video calls

Lecture 3: Rendering call status

Chapter 15: Publishing Progressive Web App

Lecture 1: PWA and manifest setup

Lecture 2: Metadata and Next config setup

Lecture 3: Build and deploy to desktop and mobile

Instructors

Code Complete
Web Dev Courses & Tutorials

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 3 votes
4 stars: 4 votes
5 stars: 4 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu