Wassup everyone, in this article we are going to create a headless e-commerce application using an open-source alternative to Shopify- Medusa.
What are we building?
https://www.loom.com/share/0b3dd851cb2d449f8c452369aa514017
What is Medusa?
Medusa is an open-source headless commerce platform which makes it super easy to build an e-commerce site quickly! It is an amazing tool so let's see why to choose Medusa-
- Easy to use
- Scalable
- Open-source
- Easily customizable
- Free to get started with!
- Large supporting community to help
- Many, easy to use integrations
Prerequisites
We are going to need some stuff installed on our machine so let's see what those are
Node.js
Our backend server is built with Node.js so we are gonna need it to run the server. Our frontend is also gonna be built with Next.js which requires npm so we are gonna need it for that too! So, go to the Node.js website and install recommended version.
PostgreSQL
For storing data of your e-commerce website Medusa uses Postgres. You can go to the site to install Postgres for your system!
Redis
Redis is another database commonly used for caching. You can download it from here.
Medusa CLI
Finally, we are going to need the Medusa CLI. Since we already have Node.js installed on our machine, we can easily install it from npm using this command-
npm i -g @medusajs/medusa-cli
Quickstep to step guide for beginners
Creating our backend server
We are going to need a backend for your e-commerce store so in this part let's see how to build it!
Create a starter server using Medusa
The Medusa CLI makes it super easy to create a new server. So, run this command-
medusa new my-medusa-server --seed
This is going to create a basic server for us to start with, a Postgres database, and the --seed flag is also going to add some test data to the database.
Starting the server
Navigate into the app-
cd my-medusa-server
Start the server, using Medusa-
medusa develop
This will start a server on http://localhost:9000
Creating frontend for the store
I am going to use Next.js for the front end of our store, Medusa also supports Gatsby and Create React app. I am going to use a starter template. So run this command-
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
This will create a new next js project for us. If you want to use tailwindCSS, you can try out this template that I created.
Rename .env.template to .env.local. You can also do it with one command-
mv .env.template .env.local
Run the app-
npm run dev
If you now go to localhost:8000, you will be able to see a simple frontend for our store.
This can be customized too! So, open it in your favorite code editor I am going to use VScode.
If you have worked with next.js before it is going to look like a normal Next.js app to you! Let's start by changing the logo of the app. Go to components/layout/nav-bar.jsx and change the src of the Image to your logo. For now, I am going to use a simple house image from icons8. You might need to change the width and height based on the dimensions of your image-
<a>
<Image
src="https://img.icons8.com/fluency/96/000000/shop.png"
height="50px"
width="50px"
alt="logo"
/>
</a>
Now, the logo has been changed!
Customizing the colors
Go to globals.css and inside :root you will see a bunch of colors, replace those with your brand colors. This will change the overall theme of the site, if you want to change more CSS then you can just go to that component and customize it 😉. After some tweaks and changes, you will have a completely custom functional store!
By doing only this much, our app is up and running!
https://www.loom.com/share/0b3dd851cb2d449f8c452369aa514017
Contributing to Medusa as a beginner
If you are fascinated by open-source projects and contributing to amazing projects then you should try to contribute to Medusa. The first question would be how? If you find an issue in a package, or the site then creates a Pull Request fixing it. If you don't know how to create a pull request check out this article and it is super easy! Medusa has many repositories under its organization. The most popular one is the main repository. You can contribute to it through documentation, issues, and many more!
Conclusion
I hope you could set up your e-commerce site using medusa easily. If you have any questions let me know in the comments 👇😉.
Top comments (0)