Build Next.js Apps with AI (GitHub Copilot, Claude, ChatGPT)

Install the Qaqun UI component library in a Next.js project, style with Tailwind CSS, and add components with npx Qaqun, then explore default and outline button variants.

Learn to customize the Qaqun theme by setting the primary color and border and input hover colors, using the official site or a third‑party tweak CDN in a Next.js app.

Organize the app directory into public and private routes, create home, login, and register pages under public, and set up folders for the authentication module for an AI-assisted UI build.

Design a Next.js home page UI with AI, using a screenshot reference and Claude Haiku 4.5 for image prompts, wiring login and start booking routes with tailwind classes.

Design a centered register page UI for Next.js apps using AI-assisted components with a gray background, a role select (customer, hotel owner, administrator), and required fields validation.

Create a functional login page UI by referencing the register page, remove the name field, add role selection, adjust navigation, and apply primary styling for Next.js apps.

Create a Supabase account and project, configure the project in your Next.js app, and set up environment variables and a Supabase config using @supabase/supabase-js.

Implement a register user server action and integration, hash the password with bcrypt, and insert data into the users table via Supabase, with success and error handling.

Implement login with a server action and UI, generating a JWT from user id and email, and store the token in browser cookies to enable customer, owner, and admin dashboards.

Fetch and display logged-in user data by decrypting the JWT token from browser cookies, and restrict access to private routes when no token is present, redirecting users to login.

Build a private layout with a header and sidebar for owner, customer, and admin routes in a Next.js app, using a custom layout wrapper to toggle private and public sections.

Refactor the app to fetch the current user once and store it in a global Zustand store, enabling access across private layout pages and moving logout to a reusable component.

Render role-based sidebar menus for customer, owner, and admin with icons and path navigation, highlighting the active route and testing via the owner hotels page.

Adds a tailwind spinner component in the layout and renders it during loading, then reviews basic project setup and authentication, and previews common full-stack requirements like private and public layouts.

Demonstrate hotels crud operations across front end and back end, including database tables, interfaces, owner dashboard integration, with view, add, edit, delete workflows and admin approval status.

Set up the folder structure for a hotels CRUD UI in a Next.js app, create reusable page title and hotel form components, and wire add/edit routes.

Create and manage hotel data by implementing server actions in a Next.js app, including create, edit, delete, and get by ID, using use server and Supabase config.

Display hotels by owner, edit hotel details with image management, and delete hotels in a Next.js app, using a UI table and helpers for date and status color.

Build an admin hotels page that fetches all owners' hotels, allows status updates (approved or pending), and displays hotel details in a reusable modal component.

Fetch and display the users list in the admin panel and enable role changes, such as customer to owner or admin, using get all users and update user role actions.

Fetch all active rooms in the customer portal, display them in a three-column grid with hotel names and room images, and enable booking via a dedicated room page.

Build a reusable filters component on the book room page to filter by room type and sort by rent per day, newest or oldest, with apply and clear actions.