Medusa won the Golden Kitty Award for Best Ecommerce Product ✨  Learn More

Medusa Logo
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
Company

Building an open-source extendable ecommerce dashboard in Gatsby

We have started a complete revamp of our admin ecommerce dashboard.

ecommerce dashboard

Share

Oliver Juhl
Oliver JuhlDec. 20, 2021• 2 min.

Introduction

At Medusa, we’ve recently started rethinking our admin ecommerce dashboard. We strive to create the best possible developer experience, but when it comes to the admin system, user experience is just as important - and we’ve been slightly neglective of that. This is about to change.

The first cut of the sod towards a better and more user-friendly admin system is a complete design revamp. The revamp will not only include a better and visually enhanced user interface, but also a new styling framework. We’ve started the work last week and expect to release a new and improved Medusa Admin in late January. Let’s have a look at what’s in store.

Facelift

The biggest item on the agenda is undoubtedly a complete makeover of the user interface of our ecommerce dashboard. We’ve recently onboarded our new Head of Design, Ludvig, who’s gonna rebuild the design from scratch. We are gonna keep all current workflows and domain structures intact and only focus on improving the look and feel.

Here’s a small sneak peek:

ecommerce dashboard

TailwindCSS

Up until now, we’ve been using the combination of Rebass and Emotion to build and style our components, but this is also about to change.

We’ve spent quite some time investigating the many different options out there and have chosen to go with TailwindCSS. This is due to the fact, that Tailwind is a highly adapted framework with a huge community behind it, guaranteeing us future support and opening up for potentially more community contributions to Medusa Admin.

React hooks

As part of the latest release, we introduced medusa-react; a new React library providing a set of hooks (among other things) for interacting seamlessly with a Medusa backend.

The hooks currently support our Store API but will very soon include the Admin API as well. We will integrate this set of hooks into the revamped version of Medusa Admin, which will fix a lot of smaller issues in our current API consumption and improve the developer experience by being more intuitive and easy to use.

See WIP here.

Versioning

The current process for having an up-to-date admin system is quite cumbersome. It requires you to pull the upstream changes from our project into your cloned repository.

To allow for a more seamless workflow, we will add a new way of versioning your admin system. Going forward, we will ship Medusa Admin as a Gatsby theme, and the ecommerce dashboard project that is created for you (unless you choose to clone) will be a barebones Gatsby project with said theme installed. This allows you to incorporate new changes by simply upgrading your Medusa Admin Gatsby theme.

Extendability

As part of shipping Medusa Admin as a Gatsby theme, we are able to provide you with a range of new theming tools to customize and improve your own admin project.

One of the more important concepts in the toolbox is Component Shadowing, which allows you to override components in the core admin project thereby making it possible to extend pages and components with custom logic and UI.

See the example here.

Conclusion

We are very excited about this new and improved Medusa Admin and are looking forward to presenting it to you all in January - you can sign up for the PH launch of it here. If you have questions or suggestions, you are more than welcome to reach out to us in our community.

Share

Medusa Newsletter

Stay up to date

In our Newsletter you get the most important Medusa news directly in your inbox

Up Next

Use ChatGPT to Automate Product Description Writing

Use ChatGPT to Automate Product Description Writing

Never think about product descriptions. Automate product description creation with ChatGPT and Medusa

Person photo
Ashutosh KrishnaJan. 19, 2023• 7 min.

You may also like

Ecommerce APIs: What they are and how they work

Ecommerce APIs: What they are and how they work

This article first discusses the basics of ecommerce APIs and an in-depth evaluation of an open source ecommerce API-first solution —Medusa.

Person photo
Esther ChristopherJan. 23, 2023• 7 min.
Multi-currency Ecommerce: How to Take Multiple Currencies in Your Storefront

Multi-currency Ecommerce: How to Take Multiple Currencies in Your Storefront

In this article, you’ll learn about the benefits of multi-currency support and how to use Medusa's multi-currency feature.

Person photo
Sani AminaJan. 23, 2023• 7 min.
Composable Ecommerce platform explained

Composable Ecommerce platform explained

This article explains what composable ecommerce is, its features, and what the leading open source composable ecommerce platform is.

Person photo
Shilpa NadkarniJan. 30, 2023• 8 min.
Inspired by Git: How we Designed our Order-Editing Feature

Inspired by Git: How we Designed our Order-Editing Feature

This article covers how we adopted principles from the Git version control system and GitHub in our Order Editing API design.

Oliver Juhl
Oliver JuhlJan. 25, 2023• 4 min.
Order Edits and Payment Collections are now available

Order Edits and Payment Collections are now available

Learn more about Medusa’s new order-editing feature and how it works

Person photo
Sebastian RindomJan. 25, 2023• 2 min.
Ecommerce APIs: What they are and how they work

Ecommerce APIs: What they are and how they work

This article first discusses the basics of ecommerce APIs and an in-depth evaluation of an open source ecommerce API-first solution —Medusa.

Person photo
Esther ChristopherJan. 23, 2023• 7 min.
Multi-currency Ecommerce: How to Take Multiple Currencies in Your Storefront

Multi-currency Ecommerce: How to Take Multiple Currencies in Your Storefront

In this article, you’ll learn about the benefits of multi-currency support and how to use Medusa's multi-currency feature.

Person photo
Sani AminaJan. 23, 2023• 7 min.
Composable Ecommerce platform explained

Composable Ecommerce platform explained

This article explains what composable ecommerce is, its features, and what the leading open source composable ecommerce platform is.

Person photo
Shilpa NadkarniJan. 30, 2023• 8 min.
Inspired by Git: How we Designed our Order-Editing Feature

Inspired by Git: How we Designed our Order-Editing Feature

This article covers how we adopted principles from the Git version control system and GitHub in our Order Editing API design.

Oliver Juhl
Oliver JuhlJan. 25, 2023• 4 min.
Medusa Logo

Product

Medusa for B2BIntegrationsGet StartedCareers
We're hiring

Developers

DocsAPI ReferencesCommunityDiscussions

Medusa

BlogPricingAboutContact Us

Newsletter

Get a summary of what we’ve shipped during the last month, behind the scenes updates, and team picks. Unsubscribe any time.

© 2023 MedusaJS, Inc.