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

Real-Time Chat App with NextJS, React, Tailwind, and Shadcn
Published 4/2024
Duration: 4h52m | .MP4 1280x720, 30 fps(r) | AAC, 44100 Hz, 2ch | 2.98 GB

Genre: eLearning | Language: English [/center]

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

Requirements
Basic knowledge of ReactJS and TypeScript are required
No NextJS experience is needed, the course includes a crash course before we get started!

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

More Info