import { CardList } from "docs-ui"

export const metadata = {
  title: `${pageNumber} Storefront Development`,
}

# {metadata.title}

In this chapter, you'll learn about storefronts and how to build one.

## Storefronts in Medusa

The Medusa application includes a Node.js server and an admin dashboard. Storefronts are separate applications that you install, build, and host independently from Medusa. This gives you the flexibility to choose your preferred frontend tech stack and implement unique designs and user experiences.

In your storefront, you can retrieve data and perform commerce operations by sending requests to the Medusa application's [Store API routes](!api!/store) and your custom API routes.

You can build your storefront from scratch with your preferred tech stack, or start with our Next.js Starter storefront. The Next.js Starter storefront provides rich commerce features and a modern design. You can use it as-is or customize it to match your business needs, design requirements, and customer experience goals.

<CardList
  items={[
    {
      title: "Install Next.js Starter Storefront",
      href: "!resources!/nextjs-starter"
    },
    {
      title: "Build Custom Storefront",
      href: "!resources!/storefront-development"
    }
  ]}
/>

---

## Using a Publishable API Key in Storefront Requests

When sending requests to API routes that start with `/store`, you must include a publishable API key in the request header.

A publishable API key sets the scope of your request to one or more sales channels.

When you retrieve products, only products from those sales channels are returned. This also ensures you get correct inventory data and associate created orders with the right sales channel.

Learn more about using the publishable API key in the [Storefront Development guide](!resources!/storefront-development/publishable-api-keys).
