Next.js 15 & Supabase - Build an Online Auction Platform

Explore the authentication module UI, displaying login and register forms via a sheet component controlled by the url query string, and organizing files in public and private folders.

Design the home page with a header featuring login button and a two-column grid for text and an image, using Tailwind classes and a Montserrat font via next/font.

Demonstrate opening the Qaqun sheet authentication component from a login button, wire the open state, and adjust width via the sheet content class for a wider login form.

Build a register form UI for a Next.js 15 and Supabase app with name, email, and password fields, validated by a Zod-based reactive form.

Create a dynamic login form using URL query strings, mirror the register form, and implement a role selector (user or admin) with radio group validations.

Set up Supabase integration in a Next.js app by creating an account, organization, and project, then configure client and server env vars and install @supabase/supabase-js.

Set up a user profiles table in the Supabase database, naming it to avoid the reserved users keyword, and define id, name, email (unique), password, role, is_active, and profile pic.

Build a server action for user registration with Supabase, hash passwords with bcryptjs, verify unique emails, insert new users, and surface success or error messages with toasts and login navigation.

Implement login server action using JSON web token and JS cookie to authenticate users, validate credentials, issue a signed token, store it in cookies, and route users by role.

Fetch and display the logged-in user in private routes by reading the token from cookies, decoding it, and querying Supabase with Next.js 15 server and client components.

Implement a client-side logout flow in next.js 15, removing auth cookies with js-cookie, showing success or error toast, and redirecting to home or login for admin and user dashboards.

Learn to enforce private route access with Next.js middleware by checking browser cookies for token and role, redirecting unauthenticated users to login, and routing authenticated users to their dashboards.

Build a unified admin and user layout in Next.js 15 with Supabase, featuring a common header and sidebar, admin dashboard metrics, and a global store for the logged-in user.

Build private and public layout skeletons with a custom layout switcher based on path, render children in each layout, and implement a header featuring a Lucid menu icon.

Learn to fetch and store the logged-in user in a global Zustand store, enabling access across components and updating user data with a single set function.

Learn to build a responsive sidebar with user and admin menu items in a Next.js 15 app, including dynamic highlighting, routing, and logout behavior for an online auction platform.

Design and implement a spinner component as the loading indicator for API and server responses, replacing static loading text in user and admin dashboards.

Create and manage the categories table in Supabase, implement server actions for create, update, delete, and fetch all categories, and set policies for a complete CRUD workflow.

Develop a reusable Supabase storage upload function that generates a unique file name, uploads to a public bucket, and returns the file URL for category and listing forms.

Build the admin category form on the front end with a reusable page title and a modal dialog for create and edit modes, featuring name, description, and image fields.

Integrate Supabase upload file and get url with the create category flow to upload an image, generate its URL, and save the category name, description, and image URL.

Display categories in the admin route by fetching data and rendering a table with id, name, image, and created date, with loading states and a no-categories message.

Learn to implement edit category functionality in a Next.js 15 and Supabase app, including state management, pre-populated forms, image handling, and automatic UI refresh.

Implement delete category with a server action, including a try-catch, loading state, and client-side filtering to remove the deleted item, while addressing add-category flows and showing latest categories first.

Navigate the admin listings module to view, add, edit, and delete auction listings, and configure required fields like name, category, description, auction timings, starting bid, and images.

Create the listings table in Supabase, defining name, category id, description, auction start, auction end, images, and minimum bid, with a category relationship and rls policy.

Set up the listings interface and runtime fields, map database columns, and implement server actions (add, update, delete, get) using Supabase for the online auction platform.

Build the listings UI in a Next.js 15 and Supabase app by creating add and edit listing pages, a reusable listing form component, and client-side navigation using router.

Create a listing form UI for Next.js 15 and Supabase, featuring a shard CDN category select and fields like name, description, category ID, auction dates, and minimum bid.

Implement image selection and previews in the listing form, delete and upload images to obtain URLs, then submit as a new listing with navigation to admin/listings.

Implement the listings table in a Next.js 15 and Supabase auction app, fetching and displaying listings, handling delete and edit actions, and joining listings with categories to show category names.

Edit and delete listings by fetching details by id, populating the form with images and category data. Wrap server components in suspense with a loading spinner to manage asynchronous fetch.

Build listings and a single listing page in a Next.js 15 and Supabase online auction platform, setting up four categories, four listings, and two user accounts for bidding and filters.

Build a user listings page in a Next.js 15 and Supabase app, fetch eligible listings with future auction end dates, and render them in a responsive grid with listing cards.

Build a listing card UI for the Next.js 15 auction platform, displaying image, name, auction started, and starting bid, with hover borders and click navigation to /user/listing/{id}.

Build a client-side single listing page that fetches a listing by id and shows a loading state. Show an image gallery and a bid input with a place bid button.

Build a filters UI for the user listings page with category and sort by dropdowns; apply updates to the URL query string and read filters via query strings in Next.js.

Implement filters on the listings page by passing category and sort by to the server action, building a dynamic query for min bid ordering, with created date as the default.