Next.js 15 & Supabase - Rental Equipment Marketplace App

Design the home page UI for the authentication module of a Next.js 15 and Supabase rental equipment marketplace app, with login and register links, a two-column layout, and hero image.

Design the login page inside the public routes of a Next.js 15 and Supabase rental marketplace app, using a gradient background and shard CDN form with email, password, and role.

Create a Supabase project and integrate it with a Next.js app to support authentication, configuring env keys (URL and anon key) and authentication server actions.

Create the user profiles table in Supabase with id, name, email, password, profile pic, and roll; set email unique and enable policies for all operations with true for scratch authentication.

Register the user using a server action in Next.js that connects to Supabase, hashes passwords with bcryptjs, checks for existing users, and inserts new users into the user profiles table.

Configure react hot toast and root toaster, implement async onsubmit for the register form, call the register user server action, handle success with toast and navigate to login.

Learn how to implement a login server action that validates user credentials, generates a JWT, and stores the token in browser cookies for subsequent API requests.

Implement the login flow by integrating the login user server action, manage loading, handle errors with toast, and store the JWT in cookies to navigate to user or admin dashboards.

Display logged-in user on admin and user dashboards by reading the token from cookies, decrypting the JWT, fetch user data from Supabase, and show id, name, email, and role.

Create a reusable client logout button as a client component, remove the access token with JS cookie, and navigate users to the login page from both admin and user dashboards.

Utilize Next.js middleware to protect private routes by checking a token in browser cookies and redirecting unauthorized users to login and authenticated users to their admin or user dashboards.

Design the private layout for a Next.js 15 and Supabase rental app, with header, content, and a role-based sidebar. Move logout to the layout and prioritize the admin dashboard and menus.

learn to build a layout provider that wraps private and public routes and implement a private layout header with a username placeholder and a lucid react hamburger menu.

Fetch the logged in user information in the private layout and store it in a global zustand store to share across client components without extra API calls.

Implement a responsive layout sidebar using a drawer triggered by a hamburger menu, rendering admin or user menus by role, with active item highlighting and a logout option.

Design and implement a spinner component to replace the loading label with a rounded, animated loader centered via a height prop and flex utilities.

Explore the categories module back end, creating the categories table in Supabase with name, description, and image fields. Use a modal to add categories and implement storage and policies.

Develop server actions for the categories module in a Next.js 15 and Supabase rental equipment marketplace app, implementing create, get all, update by id, and delete by id.

Build the categories CRUD UI by creating routes, a reusable page title, and an add/edit category modal using a dialog with open state and selected category handling.

Builds a category form UI in a Next.js and Supabase app, wiring the form schema and inputs for name, description, and image with live preview and server action integration.

Upload category images to Supabase storage by creating a bucket, uploading files with a helper, getting public URLs, and saving the category with the image URL.

Display categories in the admin/categories route by fetching all categories and rendering a dynamic table with id, name, image, created date, and actions, including loading states and dayjs formatting.

Use the onClick handler on the edit button to set the form to edit, and load the selected category’s name, description, and image, including default DB image and URL handling.

Learn to implement delete category in a Next.js 15 and Supabase rental equipment marketplace, handling onClick deletion, API calls, local data filtering, and user feedback.

The lecture builds items table in Supabase with fields for name, description, category ID linked to categories, rent per day, quantities, images, and an active flag, plus admin CRUD policies.

master items crud operations in next.js 15 actions using supabase, including add, get all, get by id, update by id, and delete by id for a rental equipment marketplace app.

Introduce the front-end items module by creating admin items pages and a shared item form for adding and editing items, with routes using item IDs and optional initial values.

Fetches categories data to populate a dynamic category dropdown and builds a grid-based, responsive item form user interface with name, category, description, rent per day, quantities, and image uploads.

Add a new item by handling the onsubmit logic, uploading images, constructing all images, saving or updating the item, and navigating to the items admin page while handling errors.

Display items in the admin route by reusing the categories module, map item data (images, rent per day, and quantity), and show the category name.

Implement edit and delete item flows in a Next.js 15 app, populating initial values, managing existing and new images, and using suspense boundaries for loading.

Build the user items and item info pages in a Next.js 15 and Supabase rental marketplace, with product fetch, category and price filters, image previews, and availability checks for renting.

Fetch and render all rental items in a server component, display a four-column responsive grid with item cards and filters, and navigate to each item's detail page via next/navigation.

Builds the item info page ui for a rental marketplace, featuring a five-column grid with image switcher, item details, rent per day, duration and date controls, and actions.

Learn to integrate the stripe payment gateway with a Next.js app by creating or signing into a stripe account and configuring keys in env vars.

Demonstrates implementing Stripe payment intent for a rental app. Front-end requests a payment intent token via a server action, then uses the client secret to show the credit card form.

Learn to implement Stripe frontend checkout with the elements provider, publishable key, and client secret; render the credit card form inside a modal using payment and address elements.

Implement a frontend-only stripe payment flow in a Next.js and Supabase app, handling on submit with stripe elements and confirm payment, show toast feedback, then redirect to rents.

Implement save order logic after payment by creating an orders table with user_id, item_id, quantity, total_days, total_amount, payment_id, status, from_date, to_date, and enforce foreign keys.

Learn to implement item availability and validation in a Next.js 15 with Supabase rental marketplace: calculate availability across date ranges, handle requested quantity, and update total amount and available quantity.