Next.js & Github Copilot , Claude code: Build Car Rental App

Create the public and private route folders in a Next.js app, implement login and register pages under public, and validate homepage routing while focusing on the public UI.

Design a car rental homepage UI skeleton using Next.js and GitHub Copilot with Claude Haiku 4.5 and Tailwind UI, featuring header with logo and login, and hero with get started.

Design and validate a register form using shortcn-form with react-hook form, implementing fields name, email, password, and role, applying validations, ui styling, and submit handling.

Build a robust login form by adapting the register form with AI prompts, add role selection, ensure full-width controls, and include back to home navigation for the car rental app.

Set up a supabase backend for a Next.js app by creating a supabase account and project, then configure server and client for authentication with dedicated config files and middleware.

Implement the register user server action in the register form, manage the loading state and toasts with sonar, and navigate to the login page after a successful account creation.

Implement login logic with superbase authentication, verify user role against the profiles, and navigate to user or admin dashboards based on role.

Implement logout for the superbase authenticated user and reuse the same fetch-and-display user logic on both user and admin dashboards, guided by AI to streamline code and navigation.

Learn how to protect private routes in Next.js with middleware, redirecting unauthenticated users to login and guiding public users to their role dashboard (admin or user) via cookies.

Build a reusable private layout skeleton in a Next.js app with a header, dynamic body, and role-based drawer menus; implement route-aware wrapping for public and private pages.

Learn to fetch the logged-in user and store it in a global Zustand store for shared access across all components and pages, avoiding multiple API calls.

Render menu items by user role using a shardcn sheet and a private layout, via a menu-items component with role-based paths like user/cars and admin/settings, and highlight the active route.

Build the cars table and ui in the backend with id, createdid, name, description, variant, company, images, rent per day, and status, and set up server actions and supabase permissions.

Explore server actions for the cars module in a Next.js car rental app, implementing add, fetch, fetch by id, update by id, and delete by id with supabase server client.

Organize the cars UI by creating a dedicated components folder and a reusable car form inside a modal dialog, wired to an add car button on the cars page.

Build a car form for a rental app with fields like name, description, company, variant, rent per day, and status, and upload images to Supabase storage using a server action.

Display added cars in the admin /cars page with a cars table UI. Implement edit and delete actions, handle loading, success, errors, and no cars scenarios.

Explore how to display all active cars in the user module, fetch active cars, and render them as interactive car tiles in a responsive grid.

Build a car detail page in a Next.js and GitHub Copilot project, styling the UI with image, lengthy description, and a start date, end date, and availability check for rentals.

Develop the car filters on the cars route, implementing variant and brand filters plus sort by rent per day, via a new car filters component and change handlers.

Create a bookings table in supabase with car id, user id, book dates, total amount, and status, then implement a check car availability function to enable payment.

Learn to integrate the Stripe payment gateway with a Next.js app by creating a backend payment intent, handling keys, and triggering a front end payment flow for car rental app.

Implement front-end stripe payment integration in a Next.js app using stripe react, including loading stripe, rendering a checkout form with elements and address, handling client secret, and completing bookings.

Fetch and display the logged-in user’s bookings with car details, start and end dates, and total amount; enable cancel booking with status updates using dayjs formatting.

Admins log in and view all bookings on the admin slash bookings route, implementing a status change feature with fetch bookings and server actions to update cancel, completed, and confirmed.

Configure sending booking status change email confirmations and booking confirmation templates using node mailer with a Gmail app password and environment variables, set up smtp host and port.

Create and integrate booking confirmation and cancellation email templates linked to status changes in the admin bookings page. Test by updating a booking from pending to confirmed to verify delivery.