import { ChildDocs } from "docs-ui"

export const metadata = { title: Storefront Development Guides, }

{metadata.title}

The Medusa application is made up of a Node.js server and an admin dashboard. The storefront is installed, built, and hosted separately from the Medusa application, providing you with the flexibility to choose the frontend tech stack that you and your team are proficient in, and implement unique design systems and user experience.

You can build your storefront from scratch, or build it on top of the Next.js Starter storefront. This section of the documentation provides guides to help you build a storefront from scratch for your Medusa application.

Learn more about Medusa's architecture in this documentation.

Who Should Follow These Guides?

These guides are for developers who want to build a storefront for their Medusa application. That includes:

• A web storefront built with a frontend framework, such as Next.js. All guides include examples for React, but the concepts can be applied to other frontend frameworks.
• A mobile application or storefront that allows customers to browse and purchase products. While the guides don't cover mobile development specifically, the concepts can be applied to your mobile storefront as well. If you're using React Native, you can generally use the React code examples with some adjustments.

Build Storefront with AI Agents

Medusa provides an ecommerce-storefront Claude Code plugin with skills that allow you to build storefront features using AI agents like Claude Code.

To install the plugin in Claude Code, run the following commands:

claude # start claude code
/plugin marketplace add medusajs/medusa-agent-skills
/plugin install ecommerce-storefront@medusa

Alternatively, if you don't use Claude Code, you can use the skills command to copy the plugin's skills based on your preferred AI agent:

npx skills add medusajs/medusa-agent-skills

Pick the storefront-best-practices skill to get started with building storefront features using AI agents.

Example Skill Usage

The plugin's skill includes best practices for building ecommerce homepages, product pages, cart functionality, checkout flows, and more.

Some example prompts:

Build a Next.js ecommerce storefront that uses Medusa as the backend. The storefront should have product listing, product detail, cart, and checkout pages.
Add a megamenu to the storefront's header that displays product categories and subcategories. The menu should be responsive and work well on mobile devices.

Using the JS SDK

All guides under this documentation section use the JS SDK to interact with the Medusa application's Store API Routes. The JS SDK is a NPM package that facilitates interacting with the backend's REST APIs. You can use it in any JavaScript framework, such as Next.js, React, Vue, or Angular.

Refer to the Connect to the Medusa Application guide to learn how to set up the JS SDK in your storefront application.

Not Using JavaScript?

If you're not using JavaScript to build your storefront, the guides include a link to the Store API reference for the different API routes that the JS SDK uses in the code examples. You can use the API reference to learn about the API route's URL, parameters, response, and more.

<ChildDocs showItems={["General"]} />

<ChildDocs hideItems={["General", "Overview"]} defaultItemsPerRow={2} />