---
id: homepage
title: Overview
description: 'What is Medusa?'
slug: /
hide_table_of_contents: true
---

import useBaseUrl from '@docusaurus/useBaseUrl'
import Link from '@docusaurus/Link'
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

Medusa is an open-source Shopify alternative.

It provides you with the primitives to create amazing digital commerce experiences. 

## Architecture overview

Medusa is composed of 3 components: The headless backend, the admin dashboard, and the storefront.

You can learn more about Medusa's architecture in [our introduction](/introduction).

![Medusa's Architecture](https://i.imgur.com/ZHvM2bu.png)

<div className="container" style={{ padding: 0 }}>
  <div className="row is-multiline">
    <div className="col col--6">
      <Link className="card box-link" to="/tutorial/set-up-your-development-environment" style={{ height: '100%' }}>
        <div className="card__body">
          <h4>Tutorial</h4>
          <p>Set up your local development environment</p>
        </div>
      </Link>
    </div>
    <div className="col col--6">
      <Link className="card box-link" to="/tutorial/adding-custom-functionality" style={{ height: '100%' }}>
        <div className="card__body">
          <h4>Make it your own</h4>
          <p>Create custom endpoints, services, or subscribers.</p>
        </div>
      </Link>
    </div>
    <div className="col col--6">
      <Link className="card box-link" to="/guides/plugins" style={{ height: '100%' }}>
        <div className="card__body">
          <h4>Plugins</h4>
          <p>Add or build a plugin to make your engine more powerful.</p>
        </div>
      </Link>
    </div>
    <div className="col col--6">
      <Link className="card box-link" to="/how-to/deploying-on-heroku" style={{ height: '100%' }}>
        <div className="card__body">
          <h4>Deploy in seconds</h4>
          <p>Use one of our guides to deploy your Medusa project in seconds.</p>
        </div>
      </Link>
    </div>
  </div>
</div>

## Quickstart

Visit our [Quickstart](https://github.com/medusajs/medusa#-quickstart) to get up and running in minutes with only a couple of commands.

## What you'll find here

<div className="container" style={{ padding: 0 }}>
  <div className="row is-multiline">
    <div className="col col--4">
      <Link className="card box-link" to="/quickstart/quick-start" style={{ height: '100%' }}>
        <div className="card__body">
          <h4>Quickstart</h4>
          <p>A short guide to get you quickly started.</p>
        </div>
      </Link>
    </div>
    <div className="col col--4">
      <Link className="card box-link" to="/how-to/notification-api" style={{ height: '100%' }}>
        <div className="card__body">
          <h4>How-to and guides</h4>
          <p>Guides and walkthroughs of concepts, tools, deployment and APIs.</p>
        </div>
      </Link>
    </div>
    {/* Ref */}
    <div className="col col--4">
      <a className="card box-link" href="https://docs.medusajs.com/api/store" target="_blank" style={{ height: '100%' }}>
        <div className="card__body">
          <h4>Reference</h4>
          <p>Technical documentation of the Medusa API.</p>
        </div>
      </a>
    </div>
  </div>
</div>