Universal Medusa is a monorepo starter kit that allows you to build Expo universal native apps for e-commerce that run on iOS, Android, and the web (as a Next.js app). It provides React Native components that seamlessly function on all platforms and that integrate fully with the e-commerce headless modules of Medusa.js.
On this post we will take a look into explaining why you may want to use it in your next or current e-commerce app, on which cases it makes sense to build on top of a universal arquitecture like this one and finally details as to how the project is configured.
If you want to own your e-commerce stack and have it fit your needs perfectly as your project keeps growing, a great way to do so is to use Medusa.js. An OSS project, MIT licensed, robust headless solution. It's the most popular e-commerce project in the JS ecosystem (20k stars on Github), with an amazing roadmap, awards in between, and a great team behind it.
Out of the box you get all the core e-commerce building blocks you need, both backend and frontend-wise, with unlimited flexibility to build it according to your own business requirements, features, pipelines, and tools on top.
Medusa modules are integrated to the frontend to bring you a full-fledged e-commerce app that has a flexible frontend architecture which enables you to target multiple platforms, such as native mobile (IOS/Android) and web. We take this for granted on the React Native world but now add on top that you get a web app too. How many engineering hours will you save on the lifespan of the project? The scale of efficiency this brings has no comparison when building just for one platform or when buildings many apps separately, each on it’s own stack. Universal means pushing the efficiency limits even further when we add web compatibility on top. That's why Universal Medusa is built with React Native/Expo. Because it’s built to be multi-platform and cross-platform too with this extra setup.
There are many benefits of building e-commerce apps with Universal Medusa but for the purposes of brevity let’s focus on two important ones related to the the universal architecture:
The Expo team and the React Native community have been steadily growing an ecosystem that allows you to build the most powerful type of universal apps available in the market.
All the Expo core packages have universal compatibility, you have React Native Web to convert native views to web views (used on production at Meta and X/Twitter), as well as the instant compatibility of React components that work out of the box on all platforms. There is also a huge amount of universal compatible packages that you can find on the React Native Directory by filtering with the web tag. You can also develop components with custom implementations per platform when needed (We have used this feature a few times on the project, such as when using the country select component as a dropdown on the web and a bottom sheet on native).
You don't always need a universal app stack. It is specific to the needs of a project. So if your app doesn't require web or mobile functionality, and you're satisfied with a core platform that meets your users needs, then you can skip universal app development. However, note that often you initially focus on solving for one platform and later on realize the need for web or mobile capabilities further down the road.
That aside, my take is that for e-commerce, you need both platforms right away. That's because when you need to choose your platforms, it's about where your users are, and in e-commerce, they are buying on mobile and web independently - interchangeably.
We should not forget that having the web app bound to native also means you empower your app's discoverability cycle by enabling discovery through the web, which boosts your native installs and usage.
Focusing solely on Medusa.js for a second which will be your core e-commerce logic provider on this setup, I believe it is the right technology for you if you have an e-commerce project of any size where the most important requirement is that you want 100% control. That is in all senses: technically and financially. If you need/want to skip fees, such as Shopify's percentage on sales, require custom solutions that external providers (through plugins) have but don't apply 100% to your use case, or want, for many reasons, to have full control of the frontend, backend, and logistics layers, this setup is for you.
Universal Medusa is built on top of the Solito stack. It comes as a monorepo with all the logic and components placed in the packages/app workspace. The Expo and Next.js apps are each standalone apps in different workspaces. This enables easy sharing of all your logic and screens in a flexible and organized structure, allowing your e-commerce to continue growing. You get to share all your JavaScript and React logic, such as modules, hooks, types, providers, context, and components, as well as JS-only libraries and modules.