Next.js 15 & Supabase - Organic Foods Marketplace App

Learn how clerk provides an authentication solution for Next.js apps, offering sign up, sign in, user info, and sign out components tied to a clerk users database; enjoy simple setup.

Design the home page with a two-column hero grid, header with the project title, static menu items, and login button, plus responsive typography and a Montserrat font.

Learn to create and sign in with clerk accounts, set up a clerk project, and integrate clerk with a Next.js app using environment keys, middleware, and a clerk provider.

Render a Clerk sheet component for sign-in and sign-up, opened via the login button, and switch between sign-in and sign-up forms using a form type query param.

Center the sign up and sign in forms on the home page using flex utilities, remove shadows, and adjust input and button heights and borders to match the design system.

Implement clerk authentication in a Next.js 15 app by configuring environment variables, sign-in and sign-up URLs, and redirects, then build private routes and display logged-in user info.

Fetch the logged-in clerk user as an object with current user, exposing id, email, first name, last name, and profile picture for storage in the Supabase user profiles.

Protect private routes in Next.js 15 using middleware to redirect unauthenticated users from /user, /admin, and /seller to the sign-in page.

Set up a Supabase project and integrate it into a Next.js app by copying the project URL and API key, configuring environment variables, and installing supabase-js.

Create a Supabase user_profiles table with fields like user_id, name, email, profile_pic, is_admin, is_seller, and is_active, and apply a full permissions policy for access.

Use server actions to store clerk user data in the Supabase user profiles table on first signup. Avoid duplicates by checking existing records and creating a single profile.

Implement a unified private-route layout (user, admin, seller) with header, logo, username, hamburger, and role-switcher, and dynamically render private or public layouts using a layout provider in Next.js 15.

Style the private layout header with a left logo and a right dynamic user name with a hamburger menu, fetch the current user from Supabase, and show a loader.

Explore building a dynamic header menu with a sheet component in a Next.js 15 app, rendering user, seller, and admin menu items with routing, icons, and active-state styling.

Add a manual sign out in the menu items using Clerk useAuth signOut, manage loading, show toasts, and redirect to sign-in after logout.

create a reusable spinner component to show a loader during asynchronous API calls, integrating height props, flex centering, and a spin animation in the private layout.

Store user data in a global Zustand store in a Next.js app to access across private routes, cart, orders, and profile without repeated API calls.

Explore the seller products module with a CRUD workflow in Supabase, including a reusable product form, products table, image arrays, and a foreign key to user profiles for ecommerce.

Create a cellar products folder with index, add, and edit pages using slug routing. Add a product form and a reusable page title component with form type and initial values.

Build a product form UI in a Next.js 15 app using shard CDN form with react hook form and Zod, defining fields like name, description, category, price, stock, and images.

Create a dynamic product form with category selection, price and stock inputs, and multi-image uploads with previews and delete options in an organic foods marketplace app.

Upload selected product images to Supabase storage by creating a bucket, uploading files, and retrieving public URLs, then attach these URLs to the product payload for the server action.

Implement a server action to add a product in a Next.js 15 and Supabase-powered organic foods marketplace, including form data, images, seller id, and navigation to the seller products page.

Display seller products with Next.js 15 and Supabase by fetching by seller ID and rendering a table. Includes name, category, price, stock, created at, actions, dayjs formatting, and edit navigation.

Learn to edit a product in a Next.js 15 and Supabase marketplace app by fetching product details, populating the form with initial values, and updating image URLs.

Implement delete product functionality in the seller products module with a server action that deletes by id using Supabase, handling errors and refreshing the list with loading states.

Display the home page products for the organic foods marketplace by adding at least two items, testing responsiveness, and fetching products with seller names via Next.js 15 and Supabase.

Render responsive product tiles on the home page with a grid for desktop, tablet, mobile. Show a product card with image hover overlay, price, seller, and plus/minus controls.

Set up a products cart store with Zustand to add products to the cart, increment and decrement quantities, and remove items when needed, integrating with the home page.

Explore cart actions in the product tile: add to cart, update quantity, and delete from cart using the product cart store, with plus and minus controls and disabled states.

Build and display a cart page with a seven-column grid showing each item’s image, name, quantity with plus/minus, price, and total, and a checkout section that navigates to user/checkout page.

Compute subtotal, delivery, and tax to form the total, using a reusable label-value UI, disable checkout when the cart is empty, and prepare the header cart icon and count.

Implement a header cart icon that uses the cart store to compute total items, shows a badge, and navigates to /user/cart with a clear cart action.

Builds a filters interface for the shop page with search, category filter, and sort by, including reset and apply actions, arranged in a responsive grid.

Explain how client-side filters pass selected category, search text, and sort values to the server via URL query strings to filter products.

Create the addresses table in Supabase with user id, name, email, phone, city, state, postal code, and address, linking to user profiles; implement a reusable address form and folder structure.

Create an address form UI as a modal dialog on the user addresses page to add or edit addresses, validated and saved to Supabase with the user id.

Display addresses teaches fetching the logged-in user's addresses from Supabase, rendering them in a responsive address card grid, handling loading and errors, and outlining edit and delete actions.

Explore the checkout flow by building a checkout page UI, listing and selecting user addresses (with a new address modal), integrating a Stripe payment gateway, and placing the order.

Integrate the Stripe payment gateway in Next.js app by creating a Stripe account, obtaining API keys, and using a payment intent API to generate a token for the user interface.

Create a Stripe account, access API keys, and assign the publishable key to the UI and the secret key to the server action for Next.js integration.

Master generating a Stripe payment intent token by installing the Stripe library, creating a server action to call payment intents create, and returning the client secret for checkout.

Explore step four of Stripe integration: wrap the credit card form with the elements provider, configure publishable key and client secret, and render a modal with payment and address elements.

Create orders and order items tables in Supabase, storing order id, subtotal, tax, shipping, total, customer id, address id, and status; add full permissions policies.

Save orders and items after payment success by sending a payload to a server action in Supabase, storing the order with totals, and linking each item to the order.