How to Build an Electronic Commerce Store with Medusajs
Tags: nextjs, beginners, ecommerce, webdev
Published: 2023-10-25 12:55:57

The demand and supply of goods and services keep evolving daily. Businesses need to keep an eye on these evolutions to adopt the right ecommerce platform to distribute their goods and services to various end users. 

Headless commerce is becoming increasingly popular because of its adaptability and scalability. A great option for constructing a headless commerce store is Medusa, an open source and scalable ecommerce engine. Next.js offers a robust framework for building storefronts. 

With the help of Medusa and Next.js, you can develop a powerful and scalable online store that is tailored to the particular requirements of your company or business. Regardless of your experience as a developer or online retailer, this tutorial will guide you on building and customizing an electronic store. 

Here’s a demo of the application with Medusa and Next.js by following this tutorial:

[demo medusa electronic store.mp4](https://prod-files-secure.s3.us-west-2.amazonaws.com/e27708d9-808e-4b35-b986-9f26951398de/5060b0c4-c5a5-4c04-a058-74cf16653819/demo_medusa_electronic_store.mp4)

## What Will You Learn?

- Set up a Storefront with Medusa’s **[Next.js default starter template](https://docs.medusajs.com/starters/nextjs-medusa-starter).**
- Add product using the admin dashboard.
- Display products in your storefront.
- Customize your storefront.
- Add a Search option to your store.
- Add a Payment option to your store.

You can find the code for this tutorial in this [GitHub Repository](https://github.com/Gunkev/electronic-storefront-medusa).

## What is Next.js?

[Next.js](https://nextjs.org/) is an open-source React framework for building user-friendly web applications. [React](https://beta.reactjs.org/) is a JavaScript library for building interactive user interfaces. Next.js enables server-side rendering and requires minimal or no configuration.

Medusa offers two storefront starters: Next.js and Gatsby. It's easy to install them with the CLI command. Medusa Next.js storefront has many ecommerce pre-build features like a shopping cart, product display, payment processing, and more.

## What is Medusa?

[Medusa](https://medusajs.com/) is an [open-source digital commerce infrastructure](https://medusajs.com/blog/composable-ecommerce-platform/) built with Node.js and provides many ecommerce features such as RMA flows, product and collection management, order management, customization, and more. 

These are some features that set Medusa apart from other ecommerce platforms. Medusa also offers a great developer experience, allowing developers to create amazing and scalable stores with minimal effort.

[Medusa's headless architecture](https://medusajs.com/blog/composable-commerce/) enables you to build your store with the framework or language of your choice. There are no constraints, as you can use [Medusa's API](https://docs.medusajs.com/api/admin) to connect the [Medusa admin](https://docs.medusajs.com/admin/quickstart) to the storefront to perform actions like the product, customer, order, payment management, and many more.

## Creating your Electronic Commerce Platform

This section highlights the steps to build your electronic store with Next.js and Medusa.

### Prerequisites

Before you begin, make sure you have the following:

- [Nodejs](https://nodejs.org/en) version 14 or later
- **[Git](https://git-scm.com/)**
- [Yarn](https://yarnpkg.com/) or Npm(This tutorial uses Yarn)
- A code editor like [VSCode](https://code.visualstudio.com/)
- An [Algolia](https://www.algolia.com/) account
- A [Stripe](http://stripe.com/) account
- S3 for file upload service

You will find all the resources used in this tutorial, such as [icons and images in the Git repository](https://github.com/Gunkev/electronic-storefront-medusa/tree/main/public/store%20images).

### How to Set Up the Medusa Server for the Electronic Store

If you have everything installed, follow these steps to set up your [Medusa](https://github.com/medusajs/medusa) project.

1. Install the Medusa CLI tool with the following command:

```bash
yarn global add @medusajs/medusa-cli
```

2. Create your Medusa application with this command:

```bash
yarn create medusa-app
```

Upon executing, this command will ask you where you which to install your project. Enter a name there; in this tutorial, it is `ElectronicStore`. Then, press enter. For this tutorial, choose the `Medusa-starter-default` for the backend and the `Next.js starter` template for the storefront. 

Normally you should have the same information as the screenshot below.

![How to Build an Electronic Commerce Store with Medusa and Nextjs]https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/starter-1024x302.png


Upon the execution of this command, Medusa will create three folders in the `ElectronicStore`: storefront, admin, and backend.

To start each part of the application, open the three command line/terminal tabs and run the following command with respect to each folder:

```bash
# Medusa server
cd ElectronStore/backend
yarn start

# Admin
cd ElectronStore/admin
yarn start

# Storefront
cd ElectronStore/storefront
yarn dev
```

After executing those commands, visit `localhost:8000` to view your storefront.

![storef.PNG](https://prod-files-secure.s3.us-west-2.amazonaws.com/e27708d9-808e-4b35-b986-9f26951398de/39ee85f8-0c84-42c8-8d2f-e600fd4dfb6a/storef.png)

Similarly, visit your admin dashboard by opening your browser on `localhost:7000`. 7000 is the default admin port.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/admin-1024x552.png

The next step consists of styling your storefront. This tutorial uses [Tailwind CSS](https://tailwindcss.com/) very useful for building modern websites. Note that you can equally set up your [Medusa admin](https://docs.medusajs.com/admin/quickstart), [Medusa storefront](https://docs.medusajs.com/starters/nextjs-medusa-starter), and [Medusa Backend](https://docs.medusajs.com/development/backend/install) separately.

## Styling the Electronic Commerce Storefront

This section shows how to style your storefront using [Tailwind CSS](https://tailwindcss.com/). With `create-medusa-app`, the Next.js starter template already contains Tailwind. However, you need to configure the `tailwind.config.js` as follows: 

```jsx
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Now that you have successfully added Tailwind to your project, you must customize your storefront.

### Customizing the Storefront

Start by changing the style of the header `storefront/src/module/layout/templates/nav/index.tsx` with the code below:

```tsx
const Nav = () => {
  const { pathname } = useRouter()
  const [isHome, setIsHome] = useState(false)
  useEffect(() => {
    pathname === "/" ? setIsHome(true) : setIsHome(false)
  }, [pathname])

  const { toggle } = useMobileMenu()

  return (
    <div
      className={clsx("sticky top-0 inset-x-0 z-50 group", {
        "!fixed": isHome,
      })}
    >
      <header className="relative h-16 px-8 mx-auto transition-colors bg-white border-b border-transparent duration-200 group-hover:bg-white group-hover:border-gray-200 border-b-[#f1f1f1]">
        <nav
          className={clsx(
            "text-gray-900 flex items-center justify-between w-full h-full text-small-regular transition-colors duration-200"
          )}
        >
          <div className="flex-1 basis-0 h-full flex items-center">
            <div className="block small:hidden">
              <Hamburger setOpen={toggle} />
            </div>
            <div className="hidden small:block h-full">
              <DropdownMenu />
            </div>
          </div>

          <div className="flex items-center h-full">
            <Link href="/">
              <a className="text-xl-semi uppercase">
                <img src="/logo.png" alt="" width={50} />
              </a>
            </Link>
          </div>

          <div className="flex items-center gap-x-6 h-full flex-1 basis-0 justify-end">
            <div className="hidden small:flex items-center gap-x-6 h-full">
              {process.env.FEATURE_SEARCH_ENABLED && <DesktopSearchModal />}
              <Link href="/account">
                <a>Account</a>
              </Link>
            </div>
            <CartDropdown />
          </div>
        </nav>
        <MobileMenu />
      </header>
    </div>
  )
}

export default Nav

```

This code above changes the navbar by adding a border and logo.

To change the banner image, locate your `storefront/src/modules/home/components/hero/index.tsx`, which is the hero section and replace it with the code below:

```tsx
const Hero = () => {
  return (
    <div className="h-[90vh] w-full relative">
      <div className="text-white absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:text-left small:justify-end small:items-start small:p-32">
        <h1 className="text-2xl-semi mb-4 drop-shadow-md shadow-black">
          Hi 👋 welcome to my electronic shop
        </h1>
        <p className="text-base-regular max-w-[32rem] mb-6 drop-shadow-md shadow-black">
          The best electronic devices to help you in your daily tasks both in
          the professional and personal life.
        </p>
        <UnderlineLink href="/store">Explore products</UnderlineLink>
      </div>
      <div className="bg-white h-[90vh] w-full">
        The best electronic devices to help you in your daily tasks both
        in the professional and personal life.
      </div>
      <Image
        src="/hero2.jpg"
        layout="fill"
        loading="eager"
        priority={true}
        quality={90}
        objectFit="cover"
        alt="computer"
        className="absolute inset-0"
        draggable="false"
      />
      <div className="bg-black h-[90vh] w-full absolute top-0 opacity-50"></div>
    </div>
  )
}

export default Hero
```

This code block adds a banner image and text to the hero section. 

Next, change how you display feature products in the home section. `storefront/src/module/home/components/featured-products/index.tsx`:

```tsx
const FeaturedProducts = () => {
...
  return (
   ...
        <div className="flex flex-col items-center text-center mb-16">
          <span className="text-base-regular text-gray-600 mb-6">
            Latest products
          </span>
          <p className="text-2xl-regular text-gray-900 max-w-lg mb-4">
            Our newest electronic gadgets to make your life smooth.
          </p>
          <UnderlineLink href="/store">Explore products</UnderlineLink>
        </div>
       ...
  )
}

...
```

The code above changes the text of feature products of your store.

Change the section just before the footer  `storefront/src/modules/layout/components/footer-cta/index.tsx` by adding the following code:

```tsx
const FooterCTA = () => {
  return (
    <div className="bg-gray-100 w-full">
      <div className="content-container flex flex-col-reverse gap-y-8 small:flex-row small:items-center justify-between py-16 relative">
        <div>
          <h3 className="text-2xl-semi">Check out the lastest gadgets</h3>
          <div className="mt-6">
            <UnderlineLink href="/store">Explore products</UnderlineLink>
          </div>
        </div>

        <div className="relative w-full aspect-square small:w-[35%] small:aspect-[28/36]">
          <Image
            src="/hero3.jpg"
            alt=""
            layout="fill"
            objectFit="cover"
            className="absolute inset-0"
          />
        </div>
      </div>
    </div>
  )
}

export default FooterCTA
```

Here you are changing the default text as well as the default image. 

Now move to the footer file `storefront/src/modules/layout/components/footer-nav/index.tsx` and replace it with the following code:

```tsx
const FooterNav = () => {
  const { collections } = useCollections()

  return (
    <div className="content-container flex flex-col gap-y-8 pt-16 pb-8">
      <div className="flex flex-col gap-y-6 xsmall:flex-row items-start justify-between">
        <div>
          <Link href="/">
            <a className="text-xl-semi uppercase">
              <img src="/logo.png" alt="" width={50} />
            </a>
          </Link>
          <p className="py-5 text-sm text-[#999]">
            Get the best electronics from the best place
          </p>
          <div className="flex flex-col-reverse gap-y-0 justify-center xsmall:items-center xsmall:flex-row xsmall:justify-between">
            <span className="text-xsmall-regular text-gray-500">
              © Copyright 2023 ES store
            </span>
            <div className="min-w-[316px] flex xsmall:justify-end">
              <CountrySelect />
            </div>
          </div>
        </div>
        <div className="text-small-regular grid grid-cols-3 gap-x-16">
          <div className="flex flex-col gap-y-2">
            <span className="text-base-semi">Collections</span>
            <ul
              className={clsx("grid grid-cols-1 gap-y-2", {
                "grid-cols-2": (collections?.length || 0) > 4,
              })}
            >
              {collections?.map((c) => (
                <li key={c.id}>
                  <Link href={`/collections/${c.id}`}>
                    <a>{c.title}</a>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

export default FooterNav
```

This code snippet above adds new links and a logo in the footer. In the last part of the footer, change the background colour `storefront/src/modules/layout/components/medusa-cta/index.tsx`

```tsx
const MedusaCTA = () => {
  return (
    <div className="py-4 flex justify-center items-center w-full bg-[#333]">
      <div className="content-container flex justify-center flex-1">
        <a href="https://www.medusajs.com" target="_blank" rel="noreferrer">
          <PoweredBy />
        </a>
      </div>
    </div>
  )
}
```

Head to `storefront/src/pages/index.tsx` to modify the meta information of the home page:

```tsx
const Home: NextPageWithLayout = () => {
  return (
    <>
      <Head
        title="Home"
        description="Get the best electroics for your home and office from the best stores online with secure payment methods."
      />
      <Hero />
      <FeaturedProducts />
    </>
  )
}
```

By the end, you should have a store similar to the screenshot below: 

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store1-1024x470.png

## Adding Products in the Electronic Commerce Store

By default, Medusa comes with some products on the storefront. You need to add your products. Medusa commonly uses a [file service](https://docs.medusajs.com/development/file-service/overview) plugin to add products to the admin dashboard.

### Installing and Integrating a File Service Plugin (S3)

Simple Storage Service (S3) is a powerful open-source object storage suite available on any public and private cloud. Medusa uses file service plugins to host files such as images.

This tutorial will use [AWS S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html), but you can use other file services like [Space](https://docs.medusajs.com/plugins/file-service/spaces) and [Minio](https://docs.medusajs.com/plugins/file-service/minio). You need to have an [AWS account](https://console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin) and [create a bucket](https://docs.medusajs.com/plugins/file-service/s3) if you have none. Equally, you need to [create an access and secret key](https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-secret-access-keys) that you will use in the next section to build your store.

When you are done with that, install the S3 plugin in the backend with the command below:

```tsx
yarn add medusa-file-s3
```

Then, open your `backend/.env` file and add the following:

```
S3_URL=<YOUR_BUCKET_URL>
S3_BUCKET=<YOUR_BUCKET_NAME>
S3_REGION=<YOUR_BUCKET_REGION>
S3_ACCESS_KEY_ID=<YOUR_ACCESS_KEY_ID>
S3_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>
```

- `<YOUR_BUCKET_URL>` corresponds to the URL of your bucket it's generally in the form: `http://<YOUR_BUCKET_NAME>.s3-website-<YOUR_BUCKET_REGION>.amazonaws.com`
- `<YOUR_BUCKET_NAME>`: The name of your S3 bucket
- `<YOUR_ACCESS_KEY_ID`: The access key which was created earlier
- `<YOUR_SECRET_ACCESS_KEY>`: The secret key created earlier

To complete the S3 integration, add the following configuration to the array of plugins in the `backend/medusa-config.js` file:

```jsx
const plugins = [
  // ...
  {
     resolve: `medusa-file-s3`,
    options: {
      s3_url: process.env.S3_URL,
      bucket: process.env.S3_BUCKET,
      region: process.env.S3_REGION,
      access_key_id: process.env.S3_ACCESS_KEY_ID,
      secret_access_key: process.env.S3_SECRET_ACCESS_KEY,
    },
  },
]
```

Lastly, edit `storefront/next.config.js` file like this:

```jsx
images: {
    domains: ["<YOUR_BUCKET_NAME>.s3.amazonaws.com"],
  },
```

Add the domain from where you are uploading your images. <YOUR_BUCKET_NAME> corresponds to the name of your bucket. Once you have finished setting up S3, you can add electronic products to your store.

### Add Products with Medusa Admin

To add products to your store, head to the admin dashboard (`localhost:7000`). The default login credentials are `admin@medusa-test.com` and `supersecret`. The Medusa admin dashboard connects the Medusa server to help you to manage your store.

Once you logged in, you should have a similar interface as below. Here you can manage your [products](https://docs.medusajs.com/user-guide/products/), [orders](https://docs.medusajs.com/user-guide/orders/), [customer](https://docs.medusajs.com/user-guide/customers/manage) settings, and more.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/dash-1024x464.png

Head to the product page and delete all the default products by clicking on the three dots at the end and selecting `delete`.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/deleteprod-1024x176.png

After removing all the products, click on `add new product` button to add some electronic products to the ecommerce store.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store3-1024x464.png

If you go to `localhost:8000/store` you will see your newly-added products.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store2-1024x469.png

## Integration

Now is the time to integrate the two main services: Search and Payment.

### Algolia Integration

[Algolia](https://www.algolia.com/) is an open-source UI search JavaScript library. It allows you to add advanced search functionalities to your store. Adding this search functionality to your store will greatly improve the user experience and [optimize internal search](https://medusajs.com/blog/importance-of-optimizing-internal-search-in-ecommerce-websites/) in the electronic commerce store.

To add Algolia to your application, you need to possess an [Algolia account](https://www.algolia.com/users/sign_up). Upon creating your account, follow [this documentation](https://docs.medusajs.com/plugins/search/algolia#retrieve-api-keys) to create an [Algolia application](https://docs.medusajs.com/plugins/search/algolia#create-an-algolia-app) and then, get your Algolia Application ID, Admin API Key, and Search-Only API Key.

Next, install the Algolia plugin in your store with the following command:

```bash
yarn add medusa-plugin-algolia
```

Then add this environment variable to your Medusa backend:

```
ALGOLIA_APP_ID=<YOUR_APP_ID>
ALGOLIA_ADMIN_API_KEY=<YOUR_ADMIN_API_KEY>
```

`<YOUR_APP_ID>` and `<YOUR_ADMIN_API_KEY>` correspond to the Application ID and Admin API Key mentioned earlier. You can find them on the [API Keys page](https://www.algolia.com/account/api-keys/) under your Algolia account.

Add the following item into the `plugins` array in `medusa-config.js`:

```jsx
const plugins = [
  // ...
  {
    resolve: `medusa-plugin-algolia`,
    options: {
      application_id: process.env.ALGOLIA_APP_ID,
      admin_api_key: process.env.ALGOLIA_ADMIN_API_KEY,
      settings: {
        products: {
          searchableAttributes: ["title", "description"],
          attributesToRetrieve: [
            "id",
            "title",
            "description",
            "handle",
            "thumbnail",
            "variants",
            "variant_sku",
            "options",
            "collection_title",
            "collection_handle",
            "images",
          ],
        },
      },
    },
  },
]
```

`searchableAttributes` are attributes in a product that are searchable while `attributesToRetrieve` are attributes to retrieve for each product result.

Now, add the search UI to the storefront so that users can effectively perform product research. Fortunately, Next.js storefront Algolia integration is available out-of-the-box. To get everything ready, make sure the search feature is set to `true` in the `store.config.json`:

```json
 {
  "features": {
    "search": true
  }
}
```

Then add the environmental variables:

```
NEXT_PUBLIC_SEARCH_APP_ID=<YOUR_APP_ID>
NEXT_PUBLIC_SEARCH_API_KEY=<YOUR_SEARCH_API_KEY>
NEXT_PUBLIC_SEARCH_INDEX_NAME=products
```

- `<YOUR_APP_ID>` corresponds to the Application ID.
- `<YOUR_SEARCH_API_KEY>` corresponds to the Search-Only API Key. You can find this information in your Algolia [API Keys section](https://docs.medusajs.com/plugins/search/algolia#retrieve-api-keys).

To complete this integration, change the code in `src/lib/search-client.ts` to the following:

```tsx
import algoliasearch from "algoliasearch/lite"

const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || ""

const apiKey =
  process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"

export const searchClient = algoliasearch(appId, apiKey)

export const SEARCH_INDEX_NAME =
  process.env.NEXT_PUBLIC_INDEX_NAME || "products"
```

If you run your storefront and backend, you will notice that the search feature is available.

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/search-1024x553.png

### **Payment Integration with** Stripe

This section will guide you through how to set up Stripe payment methods in your Medusa backend, admin, and storefront. [Stripe](https://stripe.com/) is one of the simplest ways to accept online payments. It gives you the technical components needed to manage transactions safely. Other payment methods you can use with Medua are [Paystack](https://medusajs.com/blog/how-we-won-medusa-hackathon-paystack-plugin/), [Klarna](https://docs.medusajs.com/plugins/payment/klarna), and [Paypal](https://docs.medusajs.com/plugins/payment/paypal). 

To add Stripe to your store, you must possess a [Stripe account](https://dashboard.stripe.com/register). Like Algolia, you must [retrieve your account's API Keys and secrets](https://docs.medusajs.com/plugins/payment/stripe#retrieve-stripes-keys) to connect Medusa to your Stripe account.

In the root directory of the Medusa backend, use the following command to install the Stripe plugin:

```
yarn add medusa-payment-stripe
```

Next, you need to add configurations to your stripe plugin. In `medusa-config.js`, add the following at the end of the `plugins` array:

```jsx
const plugins = [
  // ...
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
      webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
    },
  },
]
```

Head to the dashboard of your Stripe account to retrieve the API Key and secret key. Then, in your Medusa backend, create `.env` if it does not exist and add the Stripe key:

```
STRIPE_API_KEY=sk_...
```

Next, add Stripe’s webhook in the `.env` file. You can get it by heading to the Stripe dashboard and clicking Add an Endpoint. Medusa backend's endpoint, Stripe webhook, is `{BACKEND_URL}/stripe/hooks`.

> Note: Add this endpoint to its field if you are in production, and replace {BACKEND_URL} with the URL of your backend. Add a description, select at least one action, and then click Add Endpoint. Once the Webhook is created, you’ll see "Signing secret" in the Webhook details. Reveals the secret key by clicking `reveal` it and copying it into your Medusa backend.
> 

```
STRIPE_WEBHOOK_SECRET=whsec_...
```

The last part of Stripe integration consists of setting it up in the Medusa admin by adding a payment provider.

1. Go to Settings → [Regions](https://docs.medusajs.com/user-guide/regions/manage).
2. Select a region to edit.
3. Click on the icon at the top right of the first section on the right.
4. Click on Edit Region Details from the dropdown.
5. Under the provider's section, select the payment providers you want to add to the region. Here it's Stripe.
6. Unselect the payment providers you want to remove from the region.
7. Click Save.

Finally, in your storefront, add the following environment variable: 

```
NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
```

Where `<YOUR_PUBLISHABLE_KEY>` corresponds to your Stripe Publishable Key.

If you run your Medusa storefront and backend, add products to your cart, and then proceed to checkout, you can now use Stripe as a payment method. Here is what the final result looks like: 

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store4-1024x558.png

You could also check out this [Stripe guide](https://medusajs.com/blog/stripe-ecommerce/) for more information regarding its integration

## Testing the Store

The final step of this tutorial consists of testing the whole store. While the Medusa server is still running, restart your storefront.

Navigate to `localhost:8000` to see the final electronic commerce store: 

![store5.PNG](https://prod-files-secure.s3.us-west-2.amazonaws.com/e27708d9-808e-4b35-b986-9f26951398de/57ce858b-cdcc-4881-ba6c-695d34345578/store5.png)

Click on the store item in the navigation bar to open the store:

![store7.PNG](https://prod-files-secure.s3.us-west-2.amazonaws.com/e27708d9-808e-4b35-b986-9f26951398de/86216436-9ea9-48ee-902c-34018524ce26/store7.png)



Add some products to your cart:

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store8-1024x467.png

Checkout:

![store9.PNG](https://prod-files-secure.s3.us-west-2.amazonaws.com/e27708d9-808e-4b35-b986-9f26951398de/34252a44-9c70-4bdb-a9e9-31a3f04b319c/store9.png)

View your order:

!https://www.learn-dev-tools.blog/wp-content/uploads/2023/03/store10-1024x465.png

## Conclusion

In this tutorial, you learned how to build a headless electronic commerce platform with the Medusa engine, using the Next.js Storefront and integrating services like search and payment using Algolia and Stripe.

However, you can add many other functionalities to this electronic commerce store. Some include gift cards, tax management, [custom shipping methods](https://docs.medusajs.com/modules/carts-and-checkout/backend/add-fulfillment-provider), and [Notifications](https://docs.medusajs.com/plugins/notifications/).

Go to the [Medusa documentation](https://docs.medusajs.com/quickstart/quick-start) for more details regarding these functionalities and services.

This article was originally published on the [Learn Dev Tools Blog](https://www.learn-dev-tools.blog/how-to-build-an-electronic-commerce-store-with-medusa-and-nextjs/)