Building an open-source extendable ecommerce dashboard in Gatsby

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:

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.