---
addHowToData: true
---

import DocCardList from '@theme/DocCardList';
import DocCard from '@theme/DocCard';
import Icons from '@theme/Icon';
import LearningPath from '@site/src/components/LearningPath';

# Ecommerce Recipe

This document guides you through building an ecommerce store with Medusa and start selling.

## Overview

Businesses use an ecommerce store to allow customers to browse their products and make purchases. It also includes accepting payments, managing orders, and more.

Medusa provides all essential commerce features out-of-the-box. Businesses can go live and start selling without making any adjustments. They can also power-up their store with plugins for payment, fulfillment, and more.

:::tip

Recommended read: [How Tekla created an ecommerce store using Medusa](https://medusajs.com/blog/tekla-agilo-pos-case/).

:::

<LearningPath pathName="simple-quickstart" />

---

## Create a Next.js Starter Storefront

The Medusa backend can be used with any storefront. All you have to do is connect to its Store APIs to utilize the backend's commerce features.

You can install, use, and customize the Next.js starter storefront to benefit from all the necessary ecommerce features. Alternatively, you can build your own storefront.

<DocCard item={{
  type: 'link',
  href: '/starters/nextjs-medusa-starter',
  label: 'Install Next.js Storefront',
  customProps: {
    icon: Icons['academic-cap-solid'],
    description: 'Learn how to install the Next.js starter storefront.',
  }
}} />

---

## (Optional) Install Plugins

Medusa provides official plugins that you can use for payment, fulfillment, search, and more. These plugins can provide additional functionalities for both your backend and your storefront.

For example, if you want to accept payment with Stripe, you can install the [Stripe plugin](../plugins/payment/stripe.mdx).

<DocCard item={{
  type: 'link',
  href: '/plugins/overview',
  label: 'Explore Plugins',
  customProps: {
    icon: Icons['academic-cap-solid'],
    description: 'Explore official plugins and learn how to install them.',
  }
}} />

---

## Deploy the Backend

The first step to go live is to deploy the Medusa backend. The deployment guides available in our documentation provide extensive step-by-step guide for different hosting providers, as well as a general deployment guide that you can follow to deploy your backend to other providers.

<DocCard item={{
  type: 'link',
  href: '/deployments/server',
  label: 'Deploy Backend',
  customProps: {
    icon: Icons['academic-cap-solid'],
    description: 'Learn how to deploy the backend to your preferred hosting provider.',
  }
}} />

---

## Deploy the Storefront

You can now deploy your storefront. The instructions defer whether you're using the Next.js storefront, a custom storefront, or other forms of storefronts such as a mobile app.

<DocCard item={{
  type: 'link',
  href: '/deployments/storefront',
  label: 'Deploy Next.js Storefront',
  customProps: {
    icon: Icons['academic-cap-solid'],
    description: 'Learn how to deploy the Next.js storefront to your preferred hosting provider.',
  }
}} />

---

## Explore Features and Development Resources

Our documentation includes guides related to Medusa's features and how to customize your store. You can learn about how to add new features to your storefront and backend, how to customize existing features, or how to use the Medusa admin to perform different ecommerce functionalities.

<DocCardList colSize={4} items={[
  {
    type: 'link',
    href: '/modules/overview',
    label: 'Commerce Modules',
    customProps: {
      icon: Icons['academic-cap-solid'],
      description: 'Learn about Medusa\'s commerce features and check out available guides.',
    }
  },
  {
    type: 'link',
    href: '/development/overview',
    label: 'Medusa Development',
    customProps: {
      icon: Icons['academic-cap-solid'],
      description: 'Learn about how the Medusa backend works and how you can customize it.',
    }
  },
  {
    type: 'link',
    href: '/user-guide',
    label: 'Admin User Guide',
    customProps: {
      icon: Icons['users-solid'],
      description: 'Learn about available admin functionalities and how to use them.',
    }
  },
]} />
