Next.js Ecommerce 2025 - From Scratch Using Cursor AI

Upgrade to Cursor Pro via Stripe, then build an admin dashboard with Next.js, using TypeScript and Tailwind, selecting cloud 3.7 or Gemini 2.5 Pro models.

Install Next.js and cursor to build an admin dashboard with a sidebar and navbar, showcasing analytics like sales, revenue, recent orders, top products, and customer management, and coupon management.

Implement a collapsible sidebar with links and build a customers page listing users in a cn ui table with delete actions and a confirmation dialog.

Create a coupons page that lets admins add and list coupons, using a date range picker and UI components to manage name, discount, and dates, with edit and delete actions.

Build an admin orders page UI in Next.js ecommerce 2025, enabling search by order id, range filters, payment status and method, and modal order details for customers and products.

Create a modern product creation page in next.js ecommerce, featuring product title, description, SKU, discount, category, sizes, benefits, ingredients, long description, rich text editor, and image uploads.

Build all products page from scratch in Next.js, detailing an admin table with id, main image, title, category, price, sizes, and edit/delete actions, plus routing to /product/[id] and confirm model.

Create and manage a category page in a next.js ecommerce app using cursor ai; admins add categories with name and image, view them in a table, and edit or delete.

Create a subcategory management UI in a Next.js ecommerce app. Admins add subcategories with name, image, and a parent category, then edit or delete them in a table.

Create a website banners page in a Next.js ecommerce UI, enabling admins to upload multiple images, display them with delete buttons, and confirm deletions using Cloudinary storage, Prisma integration planned.

Duplicate and adapt website banners for the app banners page by copying the code into app banners, adjusting the page.tsx, and configuring banner upload and top bar management.

Design and configure a top bar UI for an ecommerce admin page, including title, text and background colors, back button, visibility, and button links, with edit and delete workflows.

Create the home screen offers UI by duplicating website banners and displaying offer images with captions on the home screen.

Build an admin reviews page that lists latest product reviews in a table with image, title, star rating, customer name and email, review, date, and an approval switch.

Integrate the back end with the admin dashboard using Prisma for Next.js, initialize Prisma, install Prisma and Prisma client, and configure the MongoDB URL in the env file.

Create prisma models for a MongoDB backed e-commerce stack, detailing user, product, cart, and order relations in schema.prisma. Explore related reviews, categories, subcategories, and cloudinary image handling.

Connect the coupons page to the backend with Prisma ORM to enable CRUD operations without changing the UI. Define Prisma models, generate the client, and use server actions.

Build a dynamic categories page in Next.js ecommerce using Prisma ORM and server actions. Integrate Cloudinary image uploads, create all CRUD operations, and manage data with Prisma Studio.

Create a dynamic sub-categories page using Prisma ORM and server actions, replacing dummy data, and implementing get all categories, get all subcategories, create, update, and delete with Cloudinary image uploads.

Learn to integrate Prisma ORM with the product creation page using the product model, implement the create operation via server actions, and configure Cloudinary image uploads.

List all products on the all products page by integrating Prisma ORM with the product model and using server actions and Cloudinary for images.

Learn to create and edit a product page in a Next.js ecommerce app using Cursor AI, with server actions and Prisma ORM to fetch, update, and populate product data.

Learn to build app, website banners and home screen offers in a Next.js ecommerce site by integrating Cloudinary and Prisma, uploading and organizing images by folders, and fetching them efficiently.

Complete the top bar page in the Next.js ecommerce 2025 course by integrating Prisma ORM with the top bar model and implementing CRUD operations via server actions.

Create the analytics page for admin to view orders by month, new customers by month, and product analytics with bar and line charts using dummy data, before backend integration.

Update offers page logic by adding title, link, and type fields (crazy deals, special combos) in home screen offers, with Prisma schema updates and banner actions.

Develop and explore a complete Next.js ecommerce frontend by cloning the repo, installing dependencies, and navigating home, shop, product, cart, checkout, and track order pages.

Set up Prisma in the e-commerce project by copying the Prisma directory and schema.prisma, configuring .env, and generating the Prisma client to access categories, subcategories, and products in API routes.

Update the home page by integrating prisma orm and cloudinary for dynamic website banners and app banners, wiring a banner carousel with prisma data.

Update the home page to fetch and display special combos, best sellers, categories and subcategories, and crazy deals using Prisma ORM, with centered layouts and overflow auto for image links.

Learn how to build an individual product page in Next.js with Prisma ORM, slug-based data fetching, and server-side rendering, including size selection, quantity control, image carousel, and long description.

Update the search products modal by wiring the navbar search to fetch products by title with debouncing, render recommended products, and show matched results or a no results message.

Develop a passwordless authentication flow for an e-commerce site using four-digit email codes, with Prisma-backed user data, cookies for persistence, and middleware-protected routes.

Implement a login-aware navbar by redirecting authenticated users to the /profile page when they click the account icon, and update the account pop up accordingly.

Create a modern profile page in a Next.js ecommerce app. Update username while keeping email disabled, view orders, add a shipping address, and logout with confirmation.

Implement a Next.js cart with Zustand state management, enabling add to cart with size, update quantities, remove items, and a persistent cart drawer with checkout controls.

Learn to build a Shopify-inspired checkout in Next.js ecommerce, implementing shipping address, coupon codes, and payment method, with Prisma models, server actions, and order flow.

Update the checkout page to a modern, elegant design, integrate a separator UI and coupon flow, and support Razorpay and Stripe payments while debugging user id and order creation issues.

Fix the order page by enabling coupon application and correct shipping address loading from the database. Create a dynamic page by id using Prisma, and display the order status.

Debug the order page by fixing cookie issues with server-side actions to fetch the authenticated user ID, and streamline auth flows to profile and orders.

Build an authentication page that first asks for email, checks the backend, and routes existing users to code verification while new users supply a username and complete verification.

Fetch all products and render a shop page with sorting options like newest, bestsellers, price order, plus filters for categories, subcategories, price ranges with URL updates and skeleton loading.

Integrate a favorites drawer in the Next.js ecommerce app by building a favorites store, wiring it to the cart, and enabling add-to-favorites and add-to-cart actions.

Update the customers page in the admin dashboard by fetching all users with Prisma ORM and displaying them in a table, with cascading deletions of orders, reviews, and cart items.

update the orders page in the admin dashboard to list all orders in a table and update order status via a dialog, with prisma schema syncing and stock adjustments.

Update the analytics page by linking orders, customers, and product analytics from the schema.prisma, fetch all products, and visualize four months of product sold data with bar and line charts.

Update the product reviews page with a submit flow for authenticated users, default unverified status, and only verified reviews, plus dynamic review pages using server actions and Prisma.

Replace the dashboard's dummy content with real data from the Prisma schema, integrating analytics for total orders, products, revenue, and sales, plus recent orders and top products.

Send end-to-end order confirmation emails after checkout using node mailer and react email, rendering order details in a structured table with product images and status.

Develop a top bar component using the Schema.prisma topper model and a server action. Create an API route to fetch toppers, enable a carousel, and style the shop now button.