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](../nextjs-starter/page.mdx). This section of the documentation provides guides to help you build a storefront from scratch for your Medusa application.

<Note>

Learn more about Medusa's architecture in [this documentation](!docs!/learn/introduction/architecture).

</Note>

## 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.

---

## Using the JS SDK

All guides under this documentation section use the [JS SDK](../js-sdk/page.mdx) 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](./tips/page.mdx) 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](!api!/store) 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} />
