DEV Community: Nazim Boudeffa

How to Display Products with Medusa

Nazim Boudeffa — Mon, 19 Jun 2023 16:26:46 +0000

Everyone knows Medusa, the open source Shopify alternative and Product Hunt award winner as the e-commerce solution of 2022

In this little post we are going to see how to list products with Medusa

Development

Deploy you Medusa backend on a fresh local Ubuntu Server with VirtualBox

Create a latest Nextjs App (talking about /app)

Create a file in the Nextjs App called medusa-client.js (in utils folder for example)

For info: We are just coding what is explained on the API documentation here https://docs.medusajs.com/api/store#tag/Products

import Medusa from "@medusajs/medusa-js"

//Create a Medusa instance
const medusaClient = new Medusa({ baseUrl: process.env.BACKEND_URL })

export { medusaClient }

Create the Products page.tsx

const [products, setProducts] = useState<any[]>([])

const getProducts = async () => {
  try {
    const results = await medusaClient.products.list();
    console.log(results)
    setProducts(results.products)
  } catch (error) {
    console.log(error)
  }
}

useEffect(() => {
 getProducts()
}, []);

We will discuss that <any[]> type in other posts, and how to display the prices and other fields, also why I use results and not data, but why not ...

Now you can just display the products in a TailWind CSS grid

<div className="grid grid-cols-1 gap-1">
  {products.map((product) => (
    <ProductCard product={product} key={product.id} />
  ))}
</div>

You can pick a ProductCard in hyperui.dev or use the code available on https://github.com/nazimboudeffa/medusa-storefront-coffee-nextjs

Look in next.config.js for more infos on the BACKEND_URL with the latest Nextjs version

Production

For the backend (demo) I use railway.app $8/Month check this video but basically a little OVHCloud VPS is Okey for one store
For the storefront (demo) I use vercel.com $20/Month
For the domain name you can choose what you want, OVH, namecheap, ... ~$15/Year

It's still cheaper then Shopify, actually $36 and you can make many many ... many deployments

🎉

Testing Features of Medusa

Nazim Boudeffa — Fri, 13 Jan 2023 21:39:34 +0000

I've started to code a marketplace with Next and I have started to learn some of the plugins of medusajs on my way to that objective

BTW I wish I can succeed because sometimes I just want to giveup, it's not easy but as an old gamedev I can make things be fun

So I've created a repository called nextjs-marketplace-medusa

Then npx create-next-app@latest --typescript

Then just install and configure TailWind

After that actually I use to tests some code about fetching the products

I use to code on Windows

So I have created a medusa server on an Ubuntu Desktop (actually 22.04) with VirtualBox

Installed Redis and Postgres like explained on the medusajs documentation site https://docs.medusajs.com

This server has an URL that I access from the Next app by changing the server's CORS to http://localhost:3000 even if I can just launch the Next app with changing the port to 8000, why? It's just to understand the CORS feature and let port 8000 as is for the Next Starter

I add a .env file to the app with the URL to the Ubuntu medusa server NEXT_PUBLIC_MEDUSA_BACKEND_URL="http://192.168.0.45:9000" and that's it

It works !

Next step is to separate the test that I do on the endpoint from the marketplace to a repository called nextjs-tests-medusa

This approach allows to separate the medusa server from Windows in a VirtualBox and let to install multiple ones to work on the marketplace

What are the Technologies Used in Medusa

Nazim Boudeffa — Mon, 14 Nov 2022 17:16:35 +0000

I have joined the project and I have seen many things, so I need to organise myself and my thoughts to master them :

Node/NPM
Yarn
TypeScript
TypeORM
SQLite
PostGresSQL
Redis
Docker
Next
React
TailWind
Ubuntu
Git/GitHub
...

If you don't know them let's make a little sort

FrontEnd

Next
React
TailWind

BackEnd

Redis
TypeORM
SQLite
PostGresSQL

DevOps

Git/GitHub
Node,NPM/Yarn
Ubuntu
Docker

A lot around JavaScript and node/yarn, also JSX all surrounded by TypeScript

For the moment I don't say which part of the project uses which technology because I think like a FullStack and also I don't know all the technologies that are used in the project but I am writing again/still my CookBooks to let you know where I am in this knowledge

The docs are quite understandable and it's a pleasure to just clone a repository and type npm install or yarn add and see your shop just going live on localhost in few commands

At the starting point I have used my little PC with Windows to start contributing but after that I have tested on a fresh Ubuntu and it's really fine

Before working on the project that I want to develop wich is instant-market.com a domain name that without the dash it actually costs 20.000$, I want to develop a marketplace, multivendor, dropshippong and so

Yes, beacause don't miss that medusa is the Open Source alternative on Shopify

But Shopify needs you only to click on a button and pay 29 bucks/month

So what about medusa, will it be cheaper ? I hope so

Will it be deployable in few clicks on Netlify or Railways, I really hope that

So, what the technology stack we need to be expert at deploying a medusa solution

What is the future business plan of someone that specialise in medusa deployments

Do we need to be experts in the technology stack that we've seen at the beggining of this short article

We'll see all this in detail in some articles that I will write and will explain what is the stack we need to know

How do you contribute to opensource on GitHub ?

Nazim Boudeffa — Mon, 17 Sep 2018 16:05:28 +0000

This is my third post and I want to thank you all for the motivational discussions we are haveing here in dev.to

"How do you commit" was just an amazing post for ma that have let me know how everyone is using git in GitHub, so now it's time to go ahead

In fact, I like to discuss on slack and discord in some projects like phaserjs or atom and as I have discovered gitkraken it is a chance to just watch the devs and continue until I find a way to write an article on a general method to contribute to opensource on GitHub

What I can say for the moment is that watching the commits on gitkraken is really cool because we have a general view of what is going on every time a commit is made

It is about to FORK and PR not just to CLONE

In the image bellow I have just cloned from the origin to a folder in a second drive, that I have just called GitHub and I don't touch the code, just watching the commits

To contribute I have to FORK and CLONE then PR, and before that I have to play a bit with the code, so, How do you contribute to opensource on GitHub ?

How do you commit in GitHub ?

Nazim Boudeffa — Sun, 09 Sep 2018 20:45:32 +0000

I don't know if it's me or my dudeist attitude but when I start a project on GitHub, the first thing I do is to create a project on my profile on the site

After that I clone the repo then I code for example a Phaser game to participate in a gamejam on itch.io/jams with one of my fake accounts

Then :

git add .
I use precisely the dot nothing else
git commit -m "First Commit"
I don't know the diffrence with "Initial Commit"
git push origin main
OFC I use git config user.name/user.email before all this to use my fake accounts

I repeat these steps ... and never finish a project

How to start coding in GitHub ?

Nazim Boudeffa — Sat, 08 Sep 2018 22:13:42 +0000

I have written an article on Medium (in french) to explain what is the way to start coding on GitHub when someone just connect to the site, so I have proposed three diffrent strategies :

My Star of all repos,
it means, choose the most starred repo on github.com/k0kubun/gitstar-ranking
Who answers my needs
it means, take a look at the awsome badge on github.com/sindresorhus
My preferred company
it means, go ahead and type the name of your preferred company after the slash in github.com

Then I've proposed to discuss other strategies.