Next.js & Github Copilot AI : Build a Real Time Chat App

Set up public routing for the authentication module by creating a public route group with home, login, and register pages, and distinguish private routes that require authentication.

Build the home page UI for a chart app, with a black header, white text, login and register links, a hero section, and a responsive layout using global CSS.

Build a register page with name, email, and password fields using shard form and react hook form, validating input and printing values on submit, with login and back-to-home links.

Adapt register page UI and logic to build the login page with email and password fields. Cover the login form title, button, navigation, and authentication.

Learn to set up a Supabase backend for authentication, create a project, integrate it with a Next.js app, configure environment variables and the Supabase client, and prepare for user profiles.

Create a user profiles table in Supabase for a real-time chat app, with name, email, password, avatar URL, status, and created date, plus a unique email constraint.

Register user builds a server action that hashes the password with bcrypt, checks for existing users, and inserts data into the user profiles table using a Supabase client.

Implement login with JWT in a Next.js app by validating users, creating a token with id and email, storing it in cookies, and navigating to the charts page.

Fetch the logged in user using a server action with the JSON web token, verify the token, and store the user in a global Zustand store for private pages.

Learn how to protect private routes in a real-time chat app using Next.js proxy middleware to check auth tokens, redirect unauthenticated users to login, and prevent flash of private layouts.

Explore designing charts and chart members tables to model one-to-one and group conversations, track last messages, sender, timestamps, and per-user unread counts for real-time chat apps.

Develop server actions for charts and chart members using a Supabase client and SQL-derived interfaces, inserting data and fetching user charts with error-safe responses.

We design a private layout skeleton for a real-time chat app, featuring a left sidebar with charts, stories, and profile icons with tooltips, plus a chart-bound messages area.

Enable real-time profile updates in a Next.js app by displaying the logged-in user and editing name, status, and profile picture via Supabase storage upload and public URL.

Explore building the chat page skeleton with a two-column grid: a charts section and a messages area, including charts list, a users list toggle, and a new chart button.

Build a real-time chat feature by fetching users, filtering out the logged-in user and existing charts, and creating a chart on card click with the two member IDs.

Optimize fetching and storing charts with a centralized charts store, reuse data across components, and implement a chart card to show 1-to-1 recipient details, paving the way for messages.

Create the messages table in Supabase with chart_id, sender_id, sender_name, content, content_type, and read_by; define relations to charts and users, enable permissions, and implement server actions to send messages.

Create the messages section skeleton with three components—messages header, messages list, and new message—displaying the selected recipient, online and typing indicators, and conditional rendering when no chat is chosen.

Implement the send message server action in the messages module, wiring chart and user stores to send, store, and update last message data in charts with timestamps in iso format.

Learn to display and format chat messages in a Next.js app, sorting charts by last message, prefixing own messages with you, and showing times with left and right styling.

Resolve scroller issues by keeping one screen root, applying overflow hidden to non-scrolling areas, and using overflow-y auto for scrolling sections like messages; adjust scrollbar color to light and thin.

Set up a real-time chat backend with express and socket.io, initialize npm, create a server, and enable client connections, logging new clients as the frontend connects via socket.io client.

Implement real-time messaging with socket.io by emitting new messages from client to backend, joining user rooms, and updating the recipient's chat in real time.

Learn to update the selected chat in real time with new messages using socket.io, ensuring the latest chat rises to the top by updating last messages in the charts list.

Update the selected chat's last message in real time when a new message is sent, including content. Auto-scroll the messages list to the bottom when messages change, using a ref.

Implement unread message counts for a real-time Next.js chat by using a Supabase rpc to increment counts for chart members except the sender, and display them in the chat ui.

Learn how to clear unread message counts in real time when opening a chart, update the UI immediately, and implement a reset unread count function in the chart store.

Implement real-time unread message counts with socket.io in a Next.js chat app. Update chat list as new messages arrive and reset counts when a conversation is opened, without reloads.