
Initialize Shad CDN in your Next.js app to set up the component library, then install components like a button. Customize with CSS variables in globals.css and apply a blue theme.
Set up a real-time convex database, log in with GitHub, install convex, and run npm convex dev to auto-update your chat app’s schema and view logs.
Build the backend for friend requests in a real-time chat app: create a requests table with sender and receiver, add indexes, and implement a convex-backed create api with validation.
Create a front-end add friend dialog for a real-time chat app using Next.js, React, Tailwind, and Shadcn, with zod validation, react-hook-form, and convex mutations.
Render a user's received requests by querying the backend for current user's requests with sender details, then display them in a front-end component using convex use query and avatar components.
Render the active conversation using the URL conversation ID to fetch and verify membership, then show the header with the other member or group name and the chat body.
Note: I forgot to add the code for focusing on the input once the create message request is completed but it will be addressed in a later lesson
Implement real-time read receipts by calculating unseen messages from last seen times. Display badges on direct message and group conversation items.
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!