diff --git a/www/apps/book/app/learn/deployment/page.mdx b/www/apps/book/app/learn/deployment/page.mdx index d3b6610c56..56021b2f17 100644 --- a/www/apps/book/app/learn/deployment/page.mdx +++ b/www/apps/book/app/learn/deployment/page.mdx @@ -13,7 +13,7 @@ A standard Medusa project is made up of: - Medusa application: The Medusa server and the Medusa Admin. - One or more storefronts -![Diagram showcasing the connection between the three deployed components](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600807/Medusa%20Book/deployment-options_ceuuvo.jpg) +![Medusa deployment architecture showing the relationship between three main components: the Medusa server (backend API), Medusa Admin dashboard (for store management), and customer-facing storefronts, all connected to facilitate complete ecommerce functionality](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600807/Medusa%20Book/deployment-options_ceuuvo.jpg) You deploy the Medusa application, with the server and admin, separately from the storefront. @@ -25,7 +25,7 @@ You must deploy the Medusa application before the storefront, as it connects to The Medusa application must be deployed to a hosting provider supporting Node.js server deployments, such as Railway, DigitalOcean, AWS, Heroku, etc… -![Diagram showcasing how the Medusa server and its associated services would be deployed](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600972/Medusa%20Book/backend_deployment_pgexo3.jpg) +![Medusa server deployment infrastructure diagram illustrating the backend services ecosystem: the Node.js Medusa server connected to essential services including PostgreSQL database for data storage, and Redis for caching and session management](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600972/Medusa%20Book/backend_deployment_pgexo3.jpg) Your server connects to a PostgreSQL database, Redis, and other services relevant for your setup. Most hosting providers support deploying and managing these databases along with your Medusa server (such as Railway and DigitalOcean). diff --git a/www/apps/book/app/learn/fundamentals/api-routes/middlewares/page.mdx b/www/apps/book/app/learn/fundamentals/api-routes/middlewares/page.mdx index 68a0d068ba..ce50582e41 100644 --- a/www/apps/book/app/learn/fundamentals/api-routes/middlewares/page.mdx +++ b/www/apps/book/app/learn/fundamentals/api-routes/middlewares/page.mdx @@ -14,7 +14,7 @@ A middleware is a function executed when a request is sent to an API Route. It's Middlewares are used to guard API routes, parse request content types other than `application/json`, manipulate request data, and more. -![Diagram showcasing how a middleware is executed when a request is sent to an API route.](https://res.cloudinary.com/dza7lstvk/image/upload/v1746775148/Medusa%20Book/middleware-overview_wc2ws5.jpg) +![API middleware execution flow diagram showing how HTTP requests first pass through middleware functions for authentication, validation, and data processing before reaching the actual route handler, providing a secure and flexible request processing pipeline in Medusa applications](https://res.cloudinary.com/dza7lstvk/image/upload/v1746775148/Medusa%20Book/middleware-overview_wc2ws5.jpg) diff --git a/www/apps/book/app/learn/fundamentals/modules/page.mdx b/www/apps/book/app/learn/fundamentals/modules/page.mdx index 79a5f2aee0..9de5e12117 100644 --- a/www/apps/book/app/learn/fundamentals/modules/page.mdx +++ b/www/apps/book/app/learn/fundamentals/modules/page.mdx @@ -44,7 +44,7 @@ A data model represents a table in the database. You create data models using Me You create a data model in a TypeScript or JavaScript file under the `models` directory of a module. So, to create a `Post` data model in the Blog Module, create the file `src/modules/blog/models/post.ts` with the following content: -![Updated directory overview after adding the data model](https://res.cloudinary.com/dza7lstvk/image/upload/v1732806790/Medusa%20Book/blog-dir-overview-1_jfvovj.jpg) +![Blog module directory structure showing the organized file hierarchy with the newly created 'models' folder containing the 'post.ts' data model file, which defines the data model for blog posts using Medusa's data modeling language](https://res.cloudinary.com/dza7lstvk/image/upload/v1732806790/Medusa%20Book/blog-dir-overview-1_jfvovj.jpg) ```ts title="src/modules/blog/models/post.ts" import { model } from "@medusajs/framework/utils" diff --git a/www/apps/book/app/learn/installation/page.mdx b/www/apps/book/app/learn/installation/page.mdx index 2dde46a68d..9135a343bf 100644 --- a/www/apps/book/app/learn/installation/page.mdx +++ b/www/apps/book/app/learn/installation/page.mdx @@ -45,7 +45,7 @@ After answering the prompts, the command installs the Medusa application in a di If you chose to install the storefront with the Medusa application, the storefront is installed in a separate directory named `{project-name}-storefront`. -![Diagram showcasing an overview of the installation directories](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856132/Medusa%20Resources/installation-dirs_x8jux4.jpg) +![Directory structure overview after Medusa installation showing the main project folder containing the Medusa backend application and admin dashboard, alongside the separate storefront directory for the customer-facing Next.js application](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856132/Medusa%20Resources/installation-dirs_x8jux4.jpg) ### Successful Installation Result @@ -57,7 +57,7 @@ If you also installed the Next.js Starter Storefront, it'll be running at `http: You can stop the servers for the Medusa application and Next.js Starter Storefront by exiting the installation command. To run the server for the Medusa application again, refer to [this section](#run-medusa-application-in-development). -![Diagram showcasing the server and applications running after successful installation](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856706/Medusa%20Resources/success-overview_bj4pbt.jpg) +![Post-installation running services overview: Medusa backend server and admin dashboard running on localhost:9000, Next.js Starter Storefront running on localhost:8000, with PostgreSQL database and other essential services active and ready for development](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856706/Medusa%20Resources/success-overview_bj4pbt.jpg) ### Troubleshooting Installation Errors diff --git a/www/apps/book/app/learn/introduction/architecture/page.mdx b/www/apps/book/app/learn/introduction/architecture/page.mdx index ce2f5c1289..a791df39d1 100644 --- a/www/apps/book/app/learn/introduction/architecture/page.mdx +++ b/www/apps/book/app/learn/introduction/architecture/page.mdx @@ -29,7 +29,7 @@ These layers of stack can be implemented within [plugins](../../fundamentals/plu -![This diagram illustrates the entry point of requests into the Medusa application through API routes. It shows a storefront and an admin that can send a request to the HTTP layer. The HTTP layer then uses workflows to handle the business logic. Finally, the workflows use modules to query and manipulate data in the data stores.](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175296/Medusa%20Book/http-layer_sroafr.jpg) +![Medusa application architecture diagram illustrating the HTTP layer flow: External clients (storefront and admin) send requests to API routes, which execute workflows containing business logic, which then interact with modules to perform data operations on PostgreSQL databases](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175296/Medusa%20Book/http-layer_sroafr.jpg) --- @@ -43,7 +43,7 @@ Modules can be implemented within [plugins](../../fundamentals/plugins/page.mdx) -![This diagram illustrates how modules connect to the database.](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175379/Medusa%20Book/db-layer_pi7tix.jpg) +![Database layer architecture diagram showing how Medusa modules establish connections to PostgreSQL databases through injected database connections, enabling data persistence and retrieval operations](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175379/Medusa%20Book/db-layer_pi7tix.jpg) --- @@ -89,4 +89,4 @@ All of the third-party services mentioned above can be replaced to help you buil The following diagram illustrates Medusa's architecture including all its layers. -![Full diagram illustrating Medusa's architecture combining all the different layers.](https://res.cloudinary.com/dza7lstvk/image/upload/v1727174897/Medusa%20Book/architectural-diagram-full.jpg) +![Complete Medusa architecture overview showing the full technology stack: client applications (storefront and admin) connecting through HTTP layer to workflows, which coordinate with commerce and Infrastructure Modules to manage data operations, third-party integrations, and database persistence](https://res.cloudinary.com/dza7lstvk/image/upload/v1727174897/Medusa%20Book/architectural-diagram-full.jpg) diff --git a/www/apps/book/app/learn/production/worker-mode/page.mdx b/www/apps/book/app/learn/production/worker-mode/page.mdx index 15d2412391..40a095895c 100644 --- a/www/apps/book/app/learn/production/worker-mode/page.mdx +++ b/www/apps/book/app/learn/production/worker-mode/page.mdx @@ -21,7 +21,7 @@ You don't need to set up different projects for each instance. Instead, you can This separation ensures that the server instance remains responsive to incoming requests, while the worker instance processes tasks in the background. -![Diagram showcasing how the server and worker work together](https://res.cloudinary.com/dza7lstvk/image/upload/fl_lossy/f_auto/r_16/ar_16:9,c_pad/v1/Medusa%20Book/medusa-worker_klkbch.jpg?_a=BATFJtAA0) +![Medusa worker mode architecture diagram illustrating the separation of responsibilities: the server instance handling HTTP requests, API calls, and real-time operations while the dedicated worker instance processes background tasks like data imports, email sending, and resource-intensive operations to maintain optimal server performance](https://res.cloudinary.com/dza7lstvk/image/upload/fl_lossy/f_auto/r_16/ar_16:9,c_pad/v1/Medusa%20Book/medusa-worker_klkbch.jpg?_a=BATFJtAA0) --- diff --git a/www/apps/book/generated/edit-dates.mjs b/www/apps/book/generated/edit-dates.mjs index 251929ea7c..bd919720e4 100644 --- a/www/apps/book/generated/edit-dates.mjs +++ b/www/apps/book/generated/edit-dates.mjs @@ -1,7 +1,7 @@ export const generatedEditDates = { "app/learn/fundamentals/scheduled-jobs/page.mdx": "2024-12-09T10:51:40.570Z", "app/learn/fundamentals/workflows/page.mdx": "2024-12-09T14:45:17.837Z", - "app/learn/deployment/page.mdx": "2025-06-20T08:36:29.097Z", + "app/learn/deployment/page.mdx": "2025-07-18T15:25:33.249Z", "app/learn/page.mdx": "2025-06-27T11:39:15.941Z", "app/learn/fundamentals/modules/commerce-modules/page.mdx": "2025-04-17T08:51:32.723Z", "app/learn/fundamentals/workflows/retry-failed-steps/page.mdx": "2025-03-28T07:15:19.388Z", @@ -46,7 +46,7 @@ export const generatedEditDates = { "app/learn/fundamentals/admin/tips/page.mdx": "2025-05-26T14:58:56.390Z", "app/learn/fundamentals/api-routes/cors/page.mdx": "2025-03-11T08:54:26.281Z", "app/learn/fundamentals/admin/ui-routes/page.mdx": "2025-02-24T09:35:11.752Z", - "app/learn/fundamentals/api-routes/middlewares/page.mdx": "2025-05-09T07:56:04.125Z", + "app/learn/fundamentals/api-routes/middlewares/page.mdx": "2025-07-18T15:20:25.735Z", "app/learn/fundamentals/modules/isolation/page.mdx": "2025-05-21T15:10:15.499Z", "app/learn/fundamentals/data-models/index/page.mdx": "2025-03-18T07:59:07.798Z", "app/learn/fundamentals/custom-cli-scripts/page.mdx": "2024-10-23T07:08:55.898Z", @@ -68,7 +68,7 @@ export const generatedEditDates = { "app/learn/fundamentals/module-links/query/page.mdx": "2025-06-26T16:01:59.548Z", "app/learn/fundamentals/modules/db-operations/page.mdx": "2025-04-25T14:26:25.000Z", "app/learn/fundamentals/modules/multiple-services/page.mdx": "2025-03-18T15:11:44.632Z", - "app/learn/fundamentals/modules/page.mdx": "2025-03-18T07:51:09.049Z", + "app/learn/fundamentals/modules/page.mdx": "2025-07-18T15:31:32.371Z", "app/learn/debugging-and-testing/instrumentation/page.mdx": "2025-06-16T10:40:52.922Z", "app/learn/fundamentals/api-routes/additional-data/page.mdx": "2025-04-17T08:50:17.036Z", "app/learn/fundamentals/workflows/variable-manipulation/page.mdx": "2025-04-24T13:14:43.967Z", @@ -89,14 +89,14 @@ export const generatedEditDates = { "app/learn/customization/integrate-systems/service/page.mdx": "2024-12-09T11:02:39.594Z", "app/learn/customization/next-steps/page.mdx": "2025-04-17T08:50:17.036Z", "app/learn/fundamentals/modules/infrastructure-modules/page.mdx": "2025-05-21T14:31:51.644Z", - "app/learn/introduction/architecture/page.mdx": "2025-05-21T14:31:51.644Z", + "app/learn/introduction/architecture/page.mdx": "2025-07-18T15:52:35.513Z", "app/learn/fundamentals/data-models/infer-type/page.mdx": "2025-03-18T07:41:01.936Z", "app/learn/fundamentals/custom-cli-scripts/seed-data/page.mdx": "2024-12-09T14:38:06.385Z", "app/learn/fundamentals/environment-variables/page.mdx": "2025-05-26T15:06:07.800Z", "app/learn/build/page.mdx": "2025-04-25T12:34:33.914Z", "app/learn/deployment/general/page.mdx": "2025-06-20T08:36:05.063Z", "app/learn/fundamentals/workflows/multiple-step-usage/page.mdx": "2024-11-25T16:19:32.169Z", - "app/learn/installation/page.mdx": "2025-05-16T13:44:27.118Z", + "app/learn/installation/page.mdx": "2025-07-18T15:53:43.544Z", "app/learn/fundamentals/data-models/check-constraints/page.mdx": "2024-12-06T14:34:50.384Z", "app/learn/fundamentals/module-links/link/page.mdx": "2025-04-07T08:03:14.513Z", "app/learn/fundamentals/workflows/store-executions/page.mdx": "2025-04-17T08:29:10.166Z", @@ -113,7 +113,7 @@ export const generatedEditDates = { "app/learn/resources/usage/page.mdx": "2025-02-26T13:35:34.824Z", "app/learn/configurations/medusa-config/page.mdx": "2025-07-14T09:28:54.302Z", "app/learn/configurations/ts-aliases/page.mdx": "2025-07-18T15:06:59.037Z", - "app/learn/production/worker-mode/page.mdx": "2025-03-11T15:21:50.906Z", + "app/learn/production/worker-mode/page.mdx": "2025-07-18T15:19:45.352Z", "app/learn/fundamentals/module-links/read-only/page.mdx": "2025-05-13T15:04:12.107Z", "app/learn/fundamentals/data-models/properties/page.mdx": "2025-03-18T07:57:17.826Z", "app/learn/fundamentals/framework/page.mdx": "2025-06-26T14:26:22.120Z", diff --git a/www/apps/book/public/llms-full.txt b/www/apps/book/public/llms-full.txt index acc53836ea..c1b13425ed 100644 --- a/www/apps/book/public/llms-full.txt +++ b/www/apps/book/public/llms-full.txt @@ -5133,7 +5133,7 @@ A standard Medusa project is made up of: - Medusa application: The Medusa server and the Medusa Admin. - One or more storefronts -![Diagram showcasing the connection between the three deployed components](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600807/Medusa%20Book/deployment-options_ceuuvo.jpg) +![Medusa deployment architecture showing the relationship between three main components: the Medusa server (backend API), Medusa Admin dashboard (for store management), and customer-facing storefronts, all connected to facilitate complete ecommerce functionality](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600807/Medusa%20Book/deployment-options_ceuuvo.jpg) You deploy the Medusa application, with the server and admin, separately from the storefront. @@ -5145,7 +5145,7 @@ You must deploy the Medusa application before the storefront, as it connects to The Medusa application must be deployed to a hosting provider supporting Node.js server deployments, such as Railway, DigitalOcean, AWS, Heroku, etc… -![Diagram showcasing how the Medusa server and its associated services would be deployed](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600972/Medusa%20Book/backend_deployment_pgexo3.jpg) +![Medusa server deployment infrastructure diagram illustrating the backend services ecosystem: the Node.js Medusa server connected to essential services including PostgreSQL database for data storage, and Redis for caching and session management](https://res.cloudinary.com/dza7lstvk/image/upload/v1708600972/Medusa%20Book/backend_deployment_pgexo3.jpg) Your server connects to a PostgreSQL database, Redis, and other services relevant for your setup. Most hosting providers support deploying and managing these databases along with your Medusa server (such as Railway and DigitalOcean). @@ -6562,7 +6562,7 @@ A middleware is a function executed when a request is sent to an API Route. It's Middlewares are used to guard API routes, parse request content types other than `application/json`, manipulate request data, and more. -![Diagram showcasing how a middleware is executed when a request is sent to an API route.](https://res.cloudinary.com/dza7lstvk/image/upload/v1746775148/Medusa%20Book/middleware-overview_wc2ws5.jpg) +![API middleware execution flow diagram showing how HTTP requests first pass through middleware functions for authentication, validation, and data processing before reaching the actual route handler, providing a secure and flexible request processing pipeline in Medusa applications](https://res.cloudinary.com/dza7lstvk/image/upload/v1746775148/Medusa%20Book/middleware-overview_wc2ws5.jpg) As Medusa's server is based on Express, you can use any [Express middleware](https://expressjs.com/en/resources/middleware.html). @@ -15103,7 +15103,7 @@ A data model represents a table in the database. You create data models using Me You create a data model in a TypeScript or JavaScript file under the `models` directory of a module. So, to create a `Post` data model in the Blog Module, create the file `src/modules/blog/models/post.ts` with the following content: -![Updated directory overview after adding the data model](https://res.cloudinary.com/dza7lstvk/image/upload/v1732806790/Medusa%20Book/blog-dir-overview-1_jfvovj.jpg) +![Blog module directory structure showing the organized file hierarchy with the newly created 'models' folder containing the 'post.ts' data model file, which defines the data model for blog posts using Medusa's data modeling language](https://res.cloudinary.com/dza7lstvk/image/upload/v1732806790/Medusa%20Book/blog-dir-overview-1_jfvovj.jpg) ```ts title="src/modules/blog/models/post.ts" import { model } from "@medusajs/framework/utils" @@ -18807,7 +18807,7 @@ After answering the prompts, the command installs the Medusa application in a di If you chose to install the storefront with the Medusa application, the storefront is installed in a separate directory named `{project-name}-storefront`. -![Diagram showcasing an overview of the installation directories](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856132/Medusa%20Resources/installation-dirs_x8jux4.jpg) +![Directory structure overview after Medusa installation showing the main project folder containing the Medusa backend application and admin dashboard, alongside the separate storefront directory for the customer-facing Next.js application](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856132/Medusa%20Resources/installation-dirs_x8jux4.jpg) ### Successful Installation Result @@ -18819,7 +18819,7 @@ If you also installed the Next.js Starter Storefront, it'll be running at `http: You can stop the servers for the Medusa application and Next.js Starter Storefront by exiting the installation command. To run the server for the Medusa application again, refer to [this section](#run-medusa-application-in-development). -![Diagram showcasing the server and applications running after successful installation](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856706/Medusa%20Resources/success-overview_bj4pbt.jpg) +![Post-installation running services overview: Medusa backend server and admin dashboard running on localhost:9000, Next.js Starter Storefront running on localhost:8000, with PostgreSQL database and other essential services active and ready for development](https://res.cloudinary.com/dza7lstvk/image/upload/v1745856706/Medusa%20Resources/success-overview_bj4pbt.jpg) ### Troubleshooting Installation Errors @@ -18934,7 +18934,7 @@ In a common Medusa application, requests go through four layers in the stack. In These layers of stack can be implemented within [plugins](https://docs.medusajs.com/learn/fundamentals/plugins/index.html.md). -![This diagram illustrates the entry point of requests into the Medusa application through API routes. It shows a storefront and an admin that can send a request to the HTTP layer. The HTTP layer then uses workflows to handle the business logic. Finally, the workflows use modules to query and manipulate data in the data stores.](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175296/Medusa%20Book/http-layer_sroafr.jpg) +![Medusa application architecture diagram illustrating the HTTP layer flow: External clients (storefront and admin) send requests to API routes, which execute workflows containing business logic, which then interact with modules to perform data operations on PostgreSQL databases](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175296/Medusa%20Book/http-layer_sroafr.jpg) *** @@ -18944,7 +18944,7 @@ The Medusa application injects into each module, including your [custom modules] Modules can be implemented within [plugins](https://docs.medusajs.com/learn/fundamentals/plugins/index.html.md). -![This diagram illustrates how modules connect to the database.](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175379/Medusa%20Book/db-layer_pi7tix.jpg) +![Database layer architecture diagram showing how Medusa modules establish connections to PostgreSQL databases through injected database connections, enabling data persistence and retrieval operations](https://res.cloudinary.com/dza7lstvk/image/upload/v1727175379/Medusa%20Book/db-layer_pi7tix.jpg) *** @@ -18986,7 +18986,7 @@ All of the third-party services mentioned above can be replaced to help you buil The following diagram illustrates Medusa's architecture including all its layers. -![Full diagram illustrating Medusa's architecture combining all the different layers.](https://res.cloudinary.com/dza7lstvk/image/upload/v1727174897/Medusa%20Book/architectural-diagram-full.jpg) +![Complete Medusa architecture overview showing the full technology stack: client applications (storefront and admin) connecting through HTTP layer to workflows, which coordinate with commerce and Infrastructure Modules to manage data operations, third-party integrations, and database persistence](https://res.cloudinary.com/dza7lstvk/image/upload/v1727174897/Medusa%20Book/architectural-diagram-full.jpg) # Build with AI Assistants and LLMs @@ -19131,7 +19131,7 @@ You don't need to set up different projects for each instance. Instead, you can This separation ensures that the server instance remains responsive to incoming requests, while the worker instance processes tasks in the background. -![Diagram showcasing how the server and worker work together](https://res.cloudinary.com/dza7lstvk/image/upload/fl_lossy/f_auto/r_16/ar_16:9,c_pad/v1/Medusa%20Book/medusa-worker_klkbch.jpg?_a=BATFJtAA0) +![Medusa worker mode architecture diagram illustrating the separation of responsibilities: the server instance handling HTTP requests, API calls, and real-time operations while the dedicated worker instance processes background tasks like data imports, email sending, and resource-intensive operations to maintain optimal server performance](https://res.cloudinary.com/dza7lstvk/image/upload/fl_lossy/f_auto/r_16/ar_16:9,c_pad/v1/Medusa%20Book/medusa-worker_klkbch.jpg?_a=BATFJtAA0) *** @@ -32900,7 +32900,7 @@ The Analytics Module exposes functionalities to track and analyze user interacti In your Medusa application, you can use the Analytics Module to send data to third-party analytics services like PostHog or Segment, enabling you to gain insights into user behavior and system performance. -![Diagram showcasing the flow of tracking an event like order.placed](https://res.cloudinary.com/dza7lstvk/image/upload/v1747832107/Medusa%20Resources/analytics-module-overview_egz7xg.jpg) +![Analytics Module workflow diagram showing the event tracking flow: when a customer places an order in the storefront, the Medusa application uses the Analytics Module to capture the event data and forwards it to configured third-party analytics services for business intelligence and user behavior analysis](https://res.cloudinary.com/dza7lstvk/image/upload/v1747832107/Medusa%20Resources/analytics-module-overview_egz7xg.jpg) *** @@ -39847,7 +39847,7 @@ By following this guide, you'll add the following features to Medusa: 3. Customers can accept or reject a quote once it's been sent by the merchant. 4. Once the customer accepts a quote, it's converted to an order in Medusa. -![Diagram showcasing the features summary](https://res.cloudinary.com/dza7lstvk/image/upload/v1741173690/Medusa%20Resources/quote-management-summary_xd319j.jpg) +![Quote management system workflow diagram illustrating the complete quote lifecycle: customers request quotes from cart items, merchants review and create detailed quotes with pricing, quotes are sent to customers for approval, and upon acceptance, quotes are automatically converted into processable orders within the Medusa e-commerce platform](https://res.cloudinary.com/dza7lstvk/image/upload/v1741173690/Medusa%20Resources/quote-management-summary_xd319j.jpg) To implement these features, you'll be customizing the Medusa server and the Medusa Admin dashboard. @@ -41374,7 +41374,7 @@ Then, open the Medusa Admin dashboard at `http://localhost:9000/app` and login u You'll find a "Quotes" sidebar item. If you click on it, it will show you the table of quotes. -![Quotes table in Medusa Admin](https://res.cloudinary.com/dza7lstvk/image/upload/v1741099952/Medusa%20Resources/Screenshot_2025-03-04_at_4.52.17_PM_nqxyfq.png) +![Medusa Admin dashboard displaying the Quotes management interface with a data table showing quote entries including columns for quote ID, customer information, status, and creation date](https://res.cloudinary.com/dza7lstvk/image/upload/v1741099952/Medusa%20Resources/Screenshot_2025-03-04_at_4.52.17_PM_nqxyfq.png) *** @@ -62803,11 +62803,11 @@ In addition, Resend allows you to send emails from the address `onboarding@resen 1. Go to Domains from the sidebar. 2. Click on Add Domain. -![Click on Domains in the sidebar then on the Add Domain button in the middle of the page.](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523238/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.11_AM_pmqgtv.png) +![Resend dashboard interface showing the Domains section in the left sidebar navigation and the prominent "Add Domain" button in the main content area, which initiates the process of configuring a custom domain for email sending through the Resend service](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523238/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.11_AM_pmqgtv.png) 3\. In the form that opens, enter your domain name and select a region close to your users, then click Add. -![A pop-up window with Domain and Region fields.](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523280/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.52_AM_sw2pr4.png) +![Domain configuration modal in Resend showing form fields for entering the custom domain name and selecting the appropriate geographical region for optimal email delivery performance, with an "Add" button to confirm the domain setup](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523280/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.52_AM_sw2pr4.png) 4\. In the domain's details page that opens, you'll find DNS records to add to your DNS provider. After you add them, click on Verify DNS Records. You can start sending emails from your custom domain once it's verified. @@ -68119,7 +68119,7 @@ By following this tutorial, you'll learn how to: You can follow this tutorial whether you're new to Medusa or an advanced Medusa developer. -![Diagram showcasing the flow of the integration between Medusa and Slack](https://res.cloudinary.com/dza7lstvk/image/upload/v1748943447/slack-integration-overview_vkdijx.jpg) +![Slack integration workflow diagram showing the complete integration flow: when ecommerce events occur in Medusa (such as order placement), the system automatically sends webhook notifications to Slack channels, enabling real-time team communication and order monitoring for business operations](https://res.cloudinary.com/dza7lstvk/image/upload/v1748943447/slack-integration-overview_vkdijx.jpg) [Example Repository](https://github.com/medusajs/examples/tree/main/slack-integration): Find the full code of the guide in this repository. @@ -68508,27 +68508,27 @@ To set the webhook URL, you need to create a Slack application and configure a w 1. Go to your [Slack Apps](https://api.slack.com/apps) page. 2. Click the "Create New App" button. -![Create New App button on Slack Apps page](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940543/Medusa%20Resources/CleanShot_2025-06-03_at_10.43.01_2x_zadmwn.png) +![Slack Apps page interface showing the prominent green "Create New App" button in the top navigation area, which initiates the process of creating a new Slack application for integrating with external services like Medusa](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940543/Medusa%20Resources/CleanShot_2025-06-03_at_10.43.01_2x_zadmwn.png) 3. In the pop-up, choose "From scratch". 4. Enter the app's name and select the workspace to install it in. 5. Once you're done, click the "Create App" button. -![Create App pop-up](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940602/Medusa%20Resources/CleanShot_2025-06-03_at_10.43.52_2x_edqawv.png) +![Slack app creation modal dialog with options to create app "From scratch" or "From an app manifest", including form fields for app name and workspace selection, with a "Create App" button to confirm the new Slack application setup](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940602/Medusa%20Resources/CleanShot_2025-06-03_at_10.43.52_2x_edqawv.png) 6. In the app's settings, go to the "Incoming Webhooks" section. 7. Enable the "Activate Incoming Webhooks" toggle. -![Enable Incoming Webhooks toggle](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940647/Medusa%20Resources/CleanShot_2025-06-03_at_10.44.07_2x_rykabg.png) +![Slack app configuration page showing the Incoming Webhooks settings with the "Activate Incoming Webhooks" toggle switch prominently displayed, which enables the app to receive webhook notifications from external services like Medusa](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940647/Medusa%20Resources/CleanShot_2025-06-03_at_10.44.07_2x_rykabg.png) 8. In the "Webhook URLs for Your Workspace" section, click the "Add New Webhook" button. -![Add New Webhook button](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940671/Medusa%20Resources/CleanShot_2025-06-03_at_10.44.33_2x_e7qk8o.png) +![Webhook configuration section displaying the "Add New Webhook" button in the "Webhook URLs for Your Workspace" area, allowing users to create a new webhook endpoint for receiving automated notifications in their Slack workspace](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940671/Medusa%20Resources/CleanShot_2025-06-03_at_10.44.33_2x_e7qk8o.png) 9. Select the channel or conversation to send notifications to and click the "Allow" button. 10. Copy the generated webhook URL. -![Copy the generated webhook URL](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940718/Medusa%20Resources/CleanShot_2025-06-03_at_10.45.51_2x_xet5u5.png) +![Slack webhook URL generation interface showing the newly created webhook URL with a copy button, which provides the unique endpoint URL needed to configure Medusa for sending automated notifications to the selected Slack channel](https://res.cloudinary.com/dza7lstvk/image/upload/v1748940718/Medusa%20Resources/CleanShot_2025-06-03_at_10.45.51_2x_xet5u5.png) Then, in the `.env` file of your Medusa application, set the `SLACK_WEBHOOK_URL` and `SLACK_ADMIN_URL` environment variables: @@ -81528,7 +81528,7 @@ By following this tutorial, you'll learn how to: - Customize the add-to-cart flow to support bundled products. - Customize the Next.js Starter Storefront to display bundled products. -![Diagram illustrating the bundled products architecture](https://res.cloudinary.com/dza7lstvk/image/upload/v1745855513/Medusa%20Resources/bundled-products-overview_r5zejm.jpg) +![Bundled products system architecture diagram showing the relationship between bundled products and individual products and variants](https://res.cloudinary.com/dza7lstvk/image/upload/v1745855513/Medusa%20Resources/bundled-products-overview_r5zejm.jpg) - [Bundled Products Repository](https://github.com/medusajs/examples/tree/main/bundled-products): Find the full code for this guide in this repository. - [OpenApi Specs for Postman](https://res.cloudinary.com/dza7lstvk/raw/upload/v1746024108/OpenApi/Bundled_Products_vloupx.yaml): Import this OpenApi Specs file into tools like Postman. diff --git a/www/apps/cloud/app/deployments/page.mdx b/www/apps/cloud/app/deployments/page.mdx index d04e4cf421..aa7d485e64 100644 --- a/www/apps/cloud/app/deployments/page.mdx +++ b/www/apps/cloud/app/deployments/page.mdx @@ -37,7 +37,7 @@ To find the deployments for a project: You'll find all deployments for the project's environments in the "Deployments" tab, sorted in descending order. For each deployment, you can see its branch, environment, status, and more. -![Deployments tab in the project's dashboard](https://res.cloudinary.com/dza7lstvk/image/upload/v1750343899/Cloud/CleanShot_2025-06-19_at_17.37.45_2x_dwimzq.png) +![Cloud project dashboard showing the Deployments tab interface with a table displaying deployment history including columns for branch names, target environments, deployment status indicators, commit information, and timestamps for tracking project deployment activity](https://res.cloudinary.com/dza7lstvk/image/upload/v1750343899/Cloud/CleanShot_2025-06-19_at_17.37.45_2x_dwimzq.png) --- @@ -51,7 +51,7 @@ For example, to find the deployments for the Production environment: 1. [Go to its project's dashboard](../projects/page.mdx#open-project-dashboard). 2. You can go to the latest Production deployment's details by clicking the "Latest Deployment" link in the Production environment card. -![Production card highlighted with the latest deployment link](https://res.cloudinary.com/dza7lstvk/image/upload/v1750146946/Cloud/CleanShot_2025-06-17_at_10.54.05_2x_ksw4nk.png) +![Production environment card in the Cloud dashboard with the "Latest Deployment" link prominently highlighted, providing quick access to view details about the most recent deployment including status, commit information, and deployment logs](https://res.cloudinary.com/dza7lstvk/image/upload/v1750146946/Cloud/CleanShot_2025-06-17_at_10.54.05_2x_ksw4nk.png) 3. To find a list of all deployments, click on the "Production" environment card to open the environment's dashboard. - The "Latest update" card shows details about the latest deployment. diff --git a/www/apps/cloud/app/organizations/page.mdx b/www/apps/cloud/app/organizations/page.mdx index fc6b865227..eb793381cc 100644 --- a/www/apps/cloud/app/organizations/page.mdx +++ b/www/apps/cloud/app/organizations/page.mdx @@ -25,7 +25,7 @@ You can also join an existing organization by [receiving an invite from a user i When you open the Cloud dashboard and log in, you're viewing the projects, resources, and settings of a specific organization. You'll find the name of that organization at the top left of the dashboard. -![The Cloud dashboard with the organization name at the top left](https://res.cloudinary.com/dza7lstvk/image/upload/v1749738810/Cloud/CleanShot_2025-06-12_at_17.32.46_2x_dx0jet.png) +![Cloud dashboard interface showing the current organization name prominently displayed in the top-left corner of the navigation header, indicating which organization's projects and resources are currently being managed in the dashboard view](https://res.cloudinary.com/dza7lstvk/image/upload/v1749738810/Cloud/CleanShot_2025-06-12_at_17.32.46_2x_dx0jet.png) ### Switch Organization diff --git a/www/apps/resources/app/examples/guides/quote-management/page.mdx b/www/apps/resources/app/examples/guides/quote-management/page.mdx index b6c935a6a4..fc6c3e86b8 100644 --- a/www/apps/resources/app/examples/guides/quote-management/page.mdx +++ b/www/apps/resources/app/examples/guides/quote-management/page.mdx @@ -65,7 +65,7 @@ By following this guide, you'll add the following features to Medusa: 3. Customers can accept or reject a quote once it's been sent by the merchant. 4. Once the customer accepts a quote, it's converted to an order in Medusa. -![Diagram showcasing the features summary](https://res.cloudinary.com/dza7lstvk/image/upload/v1741173690/Medusa%20Resources/quote-management-summary_xd319j.jpg) +![Quote management system workflow diagram illustrating the complete quote lifecycle: customers request quotes from cart items, merchants review and create detailed quotes with pricing, quotes are sent to customers for approval, and upon acceptance, quotes are automatically converted into processable orders within the Medusa e-commerce platform](https://res.cloudinary.com/dza7lstvk/image/upload/v1741173690/Medusa%20Resources/quote-management-summary_xd319j.jpg) To implement these features, you'll be customizing the Medusa server and the Medusa Admin dashboard. @@ -1772,7 +1772,7 @@ Then, open the Medusa Admin dashboard at `http://localhost:9000/app` and login u You'll find a "Quotes" sidebar item. If you click on it, it will show you the table of quotes. -![Quotes table in Medusa Admin](https://res.cloudinary.com/dza7lstvk/image/upload/v1741099952/Medusa%20Resources/Screenshot_2025-03-04_at_4.52.17_PM_nqxyfq.png) +![Medusa Admin dashboard displaying the Quotes management interface with a data table showing quote entries including columns for quote ID, customer information, status, and creation date](https://res.cloudinary.com/dza7lstvk/image/upload/v1741099952/Medusa%20Resources/Screenshot_2025-03-04_at_4.52.17_PM_nqxyfq.png) --- diff --git a/www/apps/resources/app/infrastructure-modules/analytics/page.mdx b/www/apps/resources/app/infrastructure-modules/analytics/page.mdx index d5bcfb1b6f..a9b7209e87 100644 --- a/www/apps/resources/app/infrastructure-modules/analytics/page.mdx +++ b/www/apps/resources/app/infrastructure-modules/analytics/page.mdx @@ -20,7 +20,7 @@ The Analytics Module exposes functionalities to track and analyze user interacti In your Medusa application, you can use the Analytics Module to send data to third-party analytics services like PostHog or Segment, enabling you to gain insights into user behavior and system performance. -![Diagram showcasing the flow of tracking an event like order.placed](https://res.cloudinary.com/dza7lstvk/image/upload/v1747832107/Medusa%20Resources/analytics-module-overview_egz7xg.jpg) +![Analytics Module workflow diagram showing the event tracking flow: when a customer places an order in the storefront, the Medusa application uses the Analytics Module to capture the event data and forwards it to configured third-party analytics services for business intelligence and user behavior analysis](https://res.cloudinary.com/dza7lstvk/image/upload/v1747832107/Medusa%20Resources/analytics-module-overview_egz7xg.jpg) --- diff --git a/www/apps/resources/app/integrations/guides/resend/page.mdx b/www/apps/resources/app/integrations/guides/resend/page.mdx index 11c8985cce..8e7b4ad9d7 100644 --- a/www/apps/resources/app/integrations/guides/resend/page.mdx +++ b/www/apps/resources/app/integrations/guides/resend/page.mdx @@ -111,11 +111,11 @@ In addition, Resend allows you to send emails from the address `onboarding@resen 1. Go to Domains from the sidebar. 2. Click on Add Domain. -![Click on Domains in the sidebar then on the Add Domain button in the middle of the page.](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523238/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.11_AM_pmqgtv.png) +![Resend dashboard interface showing the Domains section in the left sidebar navigation and the prominent "Add Domain" button in the main content area, which initiates the process of configuring a custom domain for email sending through the Resend service](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523238/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.11_AM_pmqgtv.png) 3\. In the form that opens, enter your domain name and select a region close to your users, then click Add. -![A pop-up window with Domain and Region fields.](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523280/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.52_AM_sw2pr4.png) +![Domain configuration modal in Resend showing form fields for entering the custom domain name and selecting the appropriate geographical region for optimal email delivery performance, with an "Add" button to confirm the domain setup](https://res.cloudinary.com/dza7lstvk/image/upload/v1732523280/Medusa%20Resources/Screenshot_2024-11-25_at_10.18.52_AM_sw2pr4.png) 4\. In the domain's details page that opens, you'll find DNS records to add to your DNS provider. After you add them, click on Verify DNS Records. You can start sending emails from your custom domain once it's verified. diff --git a/www/apps/resources/app/integrations/guides/slack/page.mdx b/www/apps/resources/app/integrations/guides/slack/page.mdx index 9087b8a0b4..8516fd1c17 100644 --- a/www/apps/resources/app/integrations/guides/slack/page.mdx +++ b/www/apps/resources/app/integrations/guides/slack/page.mdx @@ -35,7 +35,7 @@ By following this tutorial, you'll learn how to: You can follow this tutorial whether you're new to Medusa or an advanced Medusa developer. -![Diagram showcasing the flow of the integration between Medusa and Slack](https://res.cloudinary.com/dza7lstvk/image/upload/v1748943447/slack-integration-overview_vkdijx.jpg) +![Slack integration workflow diagram showing the complete integration flow: when ecommerce events occur in Medusa (such as order placement), the system automatically sends webhook notifications to Slack channels, enabling real-time team communication and order monitoring for business operations](https://res.cloudinary.com/dza7lstvk/image/upload/v1748943447/slack-integration-overview_vkdijx.jpg) Publishable API Keys. -![Find the publishable API key by going to Settings -> Publishable API Key, then clicking the publishable API key to copy its token.](https://res.cloudinary.com/dza7lstvk/image/upload/v1735810830/Medusa%20Resources/Screenshot_2025-01-02_at_11.36.20_AM_gw7i7h.png) +![Navigation path in Medusa Admin dashboard: Settings showing "Publishable API Key" option, with the publishable API key displayed and a copy button to retrieve the token for storefront configuration](https://res.cloudinary.com/dza7lstvk/image/upload/v1735810830/Medusa%20Resources/Screenshot_2025-01-02_at_11.36.20_AM_gw7i7h.png) --- @@ -257,7 +257,7 @@ To easily access and manage these resources, you'll wrap your storefront with tw To create the region provider, create the file `providers/region.tsx` with the following content: -![Directory structure after creating region provider file](https://res.cloudinary.com/dza7lstvk/image/upload/v1735815539/Medusa%20Resources/express-checkout-2_htf5ke.jpg) +![Project directory tree showing the newly created 'providers' folder containing the 'region.tsx' file, which implements React context for managing regional settings and currency selection across the storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1735815539/Medusa%20Resources/express-checkout-2_htf5ke.jpg) export const regionProviderHighlights1 = [ ["9", "region", "The region selected by the customer."], diff --git a/www/apps/resources/references/payment_provider/classes/payment_provider.AbstractPaymentProvider/page.mdx b/www/apps/resources/references/payment_provider/classes/payment_provider.AbstractPaymentProvider/page.mdx index c7f1b88455..1f50e7de7c 100644 --- a/www/apps/resources/references/payment_provider/classes/payment_provider.AbstractPaymentProvider/page.mdx +++ b/www/apps/resources/references/payment_provider/classes/payment_provider.AbstractPaymentProvider/page.mdx @@ -158,7 +158,7 @@ During cart-completion before placing the order, this method is used to authoriz third-party payment provider. The payment can later be captured using the [capturePayment](page.mdx#capturepayment) method. -![Diagram showcasing authorize payment flow](https://res.cloudinary.com/dza7lstvk/image/upload/v1747307795/Medusa%20Resources/authorize-payment\_qzpy6e.jpg) +![Payment authorization workflow diagram illustrating the flow from cart completion through payment authorization, showing how the payment session is validated with the third-party provider before order placement, with subsequent payment capture occurring after successful authorization](https://res.cloudinary.com/dza7lstvk/image/upload/v1747307795/Medusa%20Resources/authorize-payment\_qzpy6e.jpg) When authorized successfully, a `Payment` is created by the Payment Module, and it's associated with the order.