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

Set up a Next.js project in VSCode by running the boilerplate installer, name it chat-app, enable TypeScript, ESLint, and Tailwind, use the app router, then run npm run dev.

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.

discover how next.js simplifies full-stack development by bundling routing and backend, and explore the app and public folders, config files, and file-based routing with page.tsx and layouts.

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.

Set up authentication and authorization for the chat app with cloak, enabling Google sign-in and deselecting email, then copy keys to env local and add a middleware to protect pages.

Learn to integrate convex with clerk to secure a real-time next.js app by wiring a convex client provider with clerk authentication, including jwt templates and Google sign-in.

Enable Clark webhooks to store new user data in convex db, define a users table with schema and internal mutations, and implement an http endpoint to handle the webhook.

Set up frontend routes and layouts for a real-time chat app, implementing desktop and mobile navigation, conversations and friends pages, dynamic conversation ids, and a redirect from / to /conversations.

Create a responsive sidebar layout for a real-time chat app by implementing a SidebarWrapper with Tailwind classes that renders desktop left navigation and mobile bottom navigation with icons and tooltips.

Build a two-pane user interface with a left items list and a right conversation area, creating reusable item list and conversation components and responsive visibility for mobile and desktop.

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.

Add a real-time badge in the navigation bar to display the pending requests count by querying the API and rendering a badge in both desktop and mobile nav.

Define backend schemas for friends, conversations, and messages; implement accept request mutation to create friendship, set up a conversation and members, and remove the request.

Render the conversations list for the conversations page by fetching memberships and related conversations, then show other members' details or group info with avatars and names.

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.

Fetch and render chat messages by conversation, including sender data, time formatting, and adaptive ui with left-right alignment and avatars for real-time conversations.

Create groups by fetching current user's friends, assigning a group name, assembling group members, and inserting group conversations and memberships in the convex backend.

Add a create group dialog to a real-time chat app, enabling name and member selection from fetched friends with avatars, and show success or error feedback.

Render group conversations in the chat app by duplicating the DM item as a group item, using name and avatar fallback, and fix the conversation map to open group chat.

Implement a leave group feature in a real-time chat app built with NextJS, React, Tailwind, and Shadcn; manage memberships by user and conversation and provide a leave group dialog.

Implement read receipts by creating a mark read mutation in convex backend, updating the current user's last seen message, and displaying a read badge in the chat UI.

Add read receipts to the real-time chat app by updating message and body components to track and display who has seen each message, including a multi-user tooltip.

Implement real-time read receipts by calculating unseen messages from last seen times. Display badges on direct message and group conversation items.