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

Learn to create a new Next.js app with the latest version using npx create next app, configure TypeScript, Tailwind, and app router, and replace default content.

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.

Create a user profiles table in the super base with a unique email and required password, set full permissions and policies, then generate a TypeScript IUser interface.

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.

Demonstrates securing private routes with next.js middleware (proxy) by checking tokens in cookies, validating with jwt, and redirecting unauthenticated users to login, and routing authenticated users to dashboards.

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.

Build a header in the private layout showing the logged-in user’s name and role, and open a sidebar sheet with a hamburger menu while applying default padding to layout children.

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.

Build a hotel form UI with Tailwind grids, rich text via React Simple Wysiwyg, and image previews; wire city select, upload images to Supabase, and create hotel via API.

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.

Develop a rooms crud module for a hotel app with ai-assisted tooling, covering rooms table creation, room type and amenities constants, and interface and permissions setup.

Build a rooms CRUD UI with server actions in a Next.js app, including room form fields, hotel selection, status, image uploads, validation, and edit/delete workflows.

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.