Next.js & Expo: Professional Multi-Vendor ECommerce in 2025

Set up a Next.js vendor project, installing essential packages with npm. Configure TypeScript, ESLint, Tailwind CSS, app router, and turbo pack in VS Code.

Connect to a MongoDB database in a Next.js project using mongoose. Configure env with the MongoDB URL and implement a cached connect function to avoid redundant connections.

Define a cart model in typescript using mongoose, with a products array (product id, name, vendor, image, size, color, quantity, price), cart total, total after discount, user reference, and timestamps.

Define a category model using mongoose with fields for name (unique, required), images (url and public_id for cloudinary), slug (unique, lowercase, indexed), vendor, and timestamps.

Design a coupon model with mongoose, defining fields for coupon (trimmed, uppercase, unique, required, min four, max ten), vendor, start date, end date, discount, and enable timestamps.

Build a mongoose order model for a multi-vendor ecommerce setup with a user reference, products array, shipping address, and payment details including totals, discounts, and Razorpay IDs with timestamps.

Create a sub category model with mongoose schema, including unique and required name, slug (lowercase, unique, indexed), an images array for cloudinary assets, and references to vendor and parent category.

Define and export a top bar model using Mongoose, with a title, a button (title, color, link), and a color field. Reuse this schema across admin and the site.

Define a mongoose user model and schema with id, email, image, role, default payment method, and address with an active flag and timestamps; use clerk for web and mobile management.

Create a vendor model with mongoose, bcrypt, and jwt, defining a schema including name, email, password, and balance with admin-verified access.

Set up secure authentication by adding a JWT secret and the JWT expires value in the .env file, then save and prepare to implement server action functions.

Develop vendor category server actions by wiring a category module, validating name uniqueness, and uploading images to Cloudinary. Implement create, delete, update, and fetch all categories with Cloudinary asset management.

Master coupon management in a Next.js server actions file by creating, updating, deleting, and listing vendor coupons with mongoose, vendor validation, and lean querying.

Implement Next.js server actions to fetch vendor dashboard data, including orders, product analytics, low stock and out-of-stock items, and compute sales metrics with growth percentage.

Build an order server actions file for a multi-vendor e-commerce app. Retrieve all orders with date range and payment filters; update product order status with inventory adjustments.

Build product actions for a vendor by creating, updating, deleting, and listing products, with category management and cloudinary integration in a server file.

Build and manage subcategories for a multi-vendor e-commerce app using a Next.js server actions file, handling fetch, create, update, and delete operations with database models and Cloudinary uploads.

Create a Next.js middleware to enforce vendor authentication by checking the vendor token in cookies, guarding /vendor paths, and returning 'please login to continue' for unauthenticated users.

Build a vendor home page in Next.js and Expo by fetching vendor details from cookies using server actions, and design a navbar with login and a vendor dashboard link.

Learn to build sign up and sign in authentication pages for a vendor dashboard in a Next.js and Expo multi-vendor ecommerce app, with client-side validation and server actions.

Build a vendor dashboard layout in a Next.js app using use client, Mantine app shell, and a responsive navbar, with admin-verified access and dynamic vendor data.

Design and render a vendor dashboard using React icons and MUI, fetch dashboard data via server actions, and display total orders, sales, product performance, and stock lists (low/out-of-stock).

Develop a vendor categories page in Next.js by creating client components to fetch, display, create, and manage categories, including update and delete actions with modal confirmations.

Create a vendor product creation page in a Next.js expo multi-vendor app, using Mantine form, rich text editor, Cloudinary image uploads, and server actions to manage categories and submit products.

Create and manage vendor subcategories within the dashboard by building a subcategories page, implementing create, update, and delete operations, integrating image handling and cloudinary, and syncing with categories and slugs.

Build, manage, and validate a vendor coupon page in the vendor dashboard, enabling creating, listing, updating, and deleting coupons with date ranges and a date picker.

Build the all products page for vendors by fetching vendor products and displaying them in a data table with view, edit, delete, and update actions.

Build a vendor logout flow with a Mantine confirm modal in the vendor dashboard. Implement the confirm action on logout to trigger the server action and complete the sign out.

Push the completed project to a public GitHub repository, then clone and convert the vendor dashboard into an admin dashboard, removing the vendor folder.

Transform vendor server action files into admin equivalents by renaming references, stripping vendor-specific queries, and updating data flows to support the admin dashboard for multi-vendor e-commerce.

Convert vendor to admin by refactoring the navbar and layout, removing vendor logic, and switching to the admin dashboard, with sections for users, vendors, coupons, orders, products, and banners.

Rename the vendor to admin and build an admin vendors page to manage all vendors, using server actions to fetch from MongoDB and stringified data sorted by createdAt.

Manage vendors by approving or unapproving them in the admin dashboard, using a change verified tag action that updates the vendor verified status in the database via vendor ID.

Create an admin all-users page in the Next.js and Expo multi-vendor app by fetching all users, integrating an enhanced users table, and displaying analytics data.

Learn to build and manage website and app banners with server actions, using Cloudinary for image upload, tagging, and admin-backed fetch and delete operations.

Design and manage the admin top bar for a multi-vendor ecommerce dashboard with Next.js server actions to create, delete, and update top bars, using database connections and sorting.

Build a top bar page in the admin dashboard by creating a top bars folder, a client page, and functions to fetch, create, update, and delete top bars.

Keep two header links in the admin dashboard header for top bars and home screen offers, using outline buttons from Manton UI to navigate admin/dashboard/top-bars and admin/dashboard/home-screen-offers pages.

List and manage created reviews from admin dashboard, adding a verified tag and using server actions with MongoDB aggregation (unwind, lookup, project) to fetch and display reviews and user details.

Test and debug the admin dashboard across products, orders, users, vendors, coupons, categories, banners, and top bars to ensure data flows and error handling.

Enhance the admin dashboard by adding vendor details to the vendor page, including image, name, contact, verification status, and delete option, and extend the products table with a vendor field.

Install Next.js and initialize a new project using the Next.js.org command, then set up TypeScript, ESLint, and Tailwind CSS in the manual website folder. Run npm install and npm run dev to test the app, then review layout.tsx, page.tsx, and global.css for next steps.

Build a responsive navbar for a Next.js multi-vendor ecommerce app by initializing a shared CDN UI, creating mobile sheet menus, and a desktop header with Tailwind and Lucid React icons.

Designs a responsive navbar and search modal for a Next.js e-commerce app, integrating a dialog-based search, trending searches, and a product recommendations panel with a cart drawer.

Design a responsive footer component for a Next.js and Expo multi-vendor ecommerce project, including company details, social icons, and a subscribe section.

Design a special combos component on the homepage by fetching combo data from the database and mapping each item into responsive cards with images and uppercase titles styled via tailwind.

Build an individual product review page in a Next.js app, with rating calculations, a reviews list, and a filterable, responsive UI using stars, buttons, and selects.

Develop a cancel payment page in a Next.js and Expo multi-vendor app, including a payment/cancel/page.tsx layout, an X icon, red styling, a clear error message, and a back-to-home link.

Design a responsive product card for the home page in Next.js and TSX, including best seller and sale badges, price and discount displays, and a horizontal scrollable carousel.

Design and implement a luxury category section on the home page by creating a category-section component, fetching and displaying categories with images in a responsive grid.

Design the crazy deals component for the home page by cloning the special combos section, creating a new crazy deals tsx file, and fetching three deals data from the database.

Design a home page review section with a left-right carousel to display customer testimonials, fetching reviews from the database and showing avatar, name, Instagram, text, and star ratings.

Design the home page blog images section by creating a blog images component, display five 300x300 images in a horizontal, scrollable flex container, with clickable links to each blog.

Design a feature-rich product page with image carousel, price and discount details, and sections for description, key benefits, ingredients, frequently asked questions, reviews, and related products.

Design a shop page for a Next.js and Expo ecommerce app, featuring product cards, a filter component with category and color options, and mobile- and desktop-friendly sort by options.

Design a checkout page in a Next.js app, implementing a multi-step flow with delivery address, coupon application, and payment method, plus an order summary with dynamic items.

Design a comprehensive order success page in a Next.js front-end, featuring an order id, customer details, billing and shipping info, itemized products, totals, and a delivery timeline of 2–3 days.

Design and implement a profile orders page in Next.js with tabbed filters for all, paid, and unpaid orders, rendering a table of order IDs, products, payment method, total, and status.

Fixes responsiveness by creating mobile banners and desktop banners, resolves submenus and overflow for special combos and crazy deals, and refines breakpoints for key layouts.

Fix small bugs by removing the flex class on small devices and preserving center alignment, then convert the theme into a website with image links.

Clone the frontend project from GitHub, install dependencies, upgrade Next.js to the latest 15.x (15.0.3) with turbo pack, and run npm run dev to test the dynamic site.

Explore essential npm packages for a Next.js and expo multi-vendor ecommerce project: Clear-com for user management, zustand and Zotye for state, a ui library, and Stripe for payments.

Install essential npm packages for a Next.js multi-vendor ecommerce app, including form, react email, node mailer, Cloudinary, Stripe, React Hot Toast, Sonar, and Justin for state management.

Remove the public GitHub link from the starter template, delete the dot git folder, reveal hidden items, and initialize a new repository with a commit message.

Refactor a Next.js app by moving components into a shared folder, creating navbar and related pages, and implement a responsive navbar with a mobile hamburger menu and search modal.

Modify the footer to a simple, responsive design using provided code. Commit changes and update the navbar to keep the e-commerce site tidy.

Initialize database by copying admin dashboard models into a database, including card.model.ts, category.model, coupon.model, home screen offers model, and order.model; install mongoose with force for react 19 rc.

Create a Next.js server actions file to manage user operations—connect to the database, configure env, and implement create, get by id, update, and delete user actions via Clerk webhooks.

Learn to implement server actions for user management, including save cart for user, get saved cart, manage addresses, apply coupons, and fetch orders by clerk id.

Create a product server actions file in Next.js to fetch all, top selling, new arrivals, query-based, single products with populated category, subcategory, reviews, and related items by subcategory.

Create a top bar server actions file in Next.js to fetch all top bars by connecting to the database and querying the top bar model, sorting by updatedAt.

Create a banners server actions file to fetch website and app banners using Cloudinary tagging, duplicating admin actions, and handling errors for a multi-vendor ecommerce platform.

Define an async get all categories server action in categories.actions file, connect to the database, fetch and lean all categories sorted by update time, and return a JSON success payload.

Create a server-side cart actions file that connects to the database, imports the product model, updates the cart for the user, and returns a stringified json.

Create a featured products function in server actions (actions.js), fetch and populate featured products from the database, enable admin dashboard support, and prepare home page visibility for customers.

Create a Next.js server action to fetch home screen offers, including special combo and crazy deal types, from the database and return them as JSON with a success message.

create a sub category server actions file to expose an API endpoint with Next.js 15, connect to the database, and fetch subcategories by parent ID for this project.

Fetch dynamic special combos data from the database and replace hard-coded data. Map offers to images and titles, and configure the admin dashboard to manage home screen offers.

Create and manage crazy deals offers by saving images, selecting offer types, and adding offers; fetch and map crazy deals data from the backend to display on the page.

Fetch top selling products from the database, sort by the sold property, transform the data, and pass only what the product card needs to render two products side by side.

Replace hard coded categories with database driven subcategories by creating admin dashboard data, fetching subcategories by parent name, and updating the ui to reflect dynamic categories.

Learn to list new arrival products by duplicating the bestseller flow, wiring a new arrival products array and server action to render arrival product cards on the home page.

Complete the home page by replacing placeholders with real blog images and data. Build an admin dashboard for blog images and display top reviews with customer photos.

Connect the search modal to real data in Next.js by wiring client components to fetch top selling products and query results, with interactive search input and trending searches.

Connect clerk authentication to a Next.js website, configure env variables and middleware, and wrap the app with clerk provider for sign up and sign in flows. Learn to set up webhooks, protect routes, and deploy the app for a multi-vendor ecommerce site.

Deploy a Next.js project to Vercel, configure Clerk webhooks with a secret and environment variables, and test sign up and sign in flows to capture user events.

Learn to build Next.js product pages using slug-based routing, fetch real data from a database by slug, and update slugs from the admin dashboard.

explore dynamic routing in next.js 15 using slug and params to fetch product details by slug, style, and size, with server data and client quantity controls.

Update the product page with quantity buttons, 'out of stock' and 'ten left' indicators, size options, and a client-side add-to-cart workflow backed by a Zustand cart store.

Update the product page with dynamic data in the details accordion, binding long description, key benefits, ingredients, and details, while integrating a review system with rating breakdown and user authentication.

Fix the product page bug by requiring a selected size before adding to cart, using strict equality and a red visual cue for missing size, and commit it on GitHub.

Build a dynamic cart drawer in a Next.js and expo ecommerce app, persisting cart data, updating items, and guiding users through authentication to checkout.

Update the checkout page to reflect a saved cart and user address data by wiring server actions, dynamic rendering, and a multi-step flow with coupons and payments.

Design and implement a customer profile page in a Next.js app, showing orders, billing addresses, and account details with Clerk integration and dynamic rendering.

Update the track order page by wiring the router and validating a 24-character mongodb order id. Route invalid inputs to the order page and implement clear custom error messages.

Learn to add security to dynamic Next.js pages by validating object IDs from MongoDB, validating slugs, and redirecting on invalid data to protect order, shop, and slug pages.

Design error, not found, and loading pages in a Next.js app by implementing error boundaries and creating error.tsx, not-found.tsx, loading.tsx with a fallback UI.

Develop a fallback UI for invalid ids by creating an id invalid error component that shows a broken link image and friendly message instead of redirecting, on dynamic Next.js pages.

Update the loading experience by resizing the loader to 30 and adding a loading text below the loader, improving the loader component in the app loading state.

Develop a client-side top bar component that fetches banners, displays promotional messages in an Embla carousel, and provides next/previous controls with error handling.

Learn to implement seo in a Next.js app by configuring robots.txt, metadata, and server-side rendering to improve crawlability, indexing, and organic traffic for a multi-vendor ecommerce site.