Creating an e-commerce store with React and Medusa is a great way to build a fast and user-friendly online store. Medusa is an open-source e-commerce platform built on top of Node.js, MongoDB, and React. In this tutorial, we will walk through the process of building an e-commerce store with Medusa and React. They often refer to themselves as the open-source alternative to Shopify. So we're going to use Medusa to set up an e-commerce store. Let's dive right in.
Install Medusa
To get started, you'll need to install Medusa on your computer. This can be done by running the following command in your terminal:
npm install -g medusa-cli
Create a new Medusa project
Once Medusa is installed, you can use it to create or generate a new project by running the following command:
medusa create my-store
This will create a new directory named "my-store" in your current location, containing the basic structure of a Medusa project.
Install dependencies
Next, navigate to the "my-store" directory and install the necessary dependencies by running the following command:
npm install
Run the development server
With the dependencies installed, you can now run the development server by running the following command:
medusa start
This will start a development server and open your app in a browser window. You should now be able to see the default Medusa app running.
Create a product catalog
To create a product catalog for your store, you'll need to create a new MongoDB collection. This can be done by running the following command:
db.createCollection("products")
Add products to your catalog
Once you have a product catalog, you can add products to it by running the following command:
db.products.insertMany([
{name: "Product 1", price: 9.99},
{name: "Product 2", price: 19.99},
{name: "Product 3", price: 29.99}
])
Display products in your store
To display the products in your store, you'll need to create a new React component to render the product catalog. This can be done by creating a new file named "ProductList.js" in the "src" directory and adding the following code:
import React from 'react';
import { useEffect, useState } from 'react';
import { useMongo } from 'medusa-core-data';
export default function ProductList() {
const [products, setProducts] = useState([]);
const { find } = useMongo();
useEffect(() => {
find('products').then(setProducts);
}, []);
return (
<div>
{products.map((product) => (
<div key={product._id}>
<h2>{product.name}</h2>
<p>{product.price}</p>
</div>
))}
</div>
);
}
Add the product list component to your store
To add the product list component to your store, you'll need to import it into the "src/App.js" file and render it. This can be done by adding the following code to the "src/App.js
App.js" file:
import ProductList from './ProductList';
function App() {
return (
<div className="App">
<header className="App-header">
<ProductList />
</header>
</div>
);
}
Add a shopping cart
To add a shopping cart to your store, you'll need to create a new MongoDB collection for the cart. This can be done by running the following command:
db.createCollection("cart")
Once you have a cart collection, you can add products to it by running the following command:
db.cart.insertOne({productId: "product1", quantity: 2})
Display the cart
To display the cart in your store, you'll need to create a new React component to render the cart. This can be done by creating a new file named "Cart.js" in the "src" directory and adding the following code:
import React from 'react';
import { useEffect, useState } from 'react';
import { useMongo } from 'medusa-core-data';
export default function Cart() {
const [cart, setCart] = useState([]);
const { find } = useMongo();
useEffect(() => {
find('cart').then(setCart);
}, []);
return (
<div>
{cart.map((item) => (
<div key={item._id}>
<p>Product: {item.productId}</p>
<p>Quantity: {item.quantity}</p>
</div>
))}
</div>
);
}
Add the cart component to your store
To add the cart component to your store, you'll need to import it into the "src/App.js" file and render it. This can be done by adding the following code to the "src/App.js" file:
import Cart from './Cart';
function App() {
return (
<div className="App">
<header className="App-header">
<ProductList />
<Cart />
</header>
</div>
);
}
With these steps, you have successfully created the basic e-commerce store and now need to add a checkout for customers.
Add a checkout process
To add a checkout process to your store, you'll need to create a new route and component to handle the checkout process. This can be done by creating a new file named "Checkout.js" in the "src/components" directory and adding the following code:
import React, { useState } from 'react';
import { useMongo } from 'medusa-core-data';
export default function Checkout() {
const [email, setEmail] = useState('');
const [name, setName] = useState('');
const [address, setAddress] = useState('');
const [phone, setPhone] = useState('');
const { insertOne } = useMongo();
const handleSubmit = async (e) => {
e.preventDefault();
const order = {
email,
name,
address,
phone,
cart: cart,
};
await insertOne('orders', order);
alert('Order placed!');
};
return (
<form onSubmit={handleSubmit}>
<label>
Email:
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</label>
<br />
<label>
Name:
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</label>
<br />
<label>
Address:
<input type="text" value={address} onChange={(e) => setAddress(e.target.value)} />
</label>
<br />
<label>
Phone:
<input type="text" value={phone} onChange={(e) => setPhone(e.target.value)} />
</label>
<br />
<input type="submit" value="Place order" />
</form>
);
}
Add the checkout component to your store
To add the checkout component to your store, you'll need to import it into the "src/App.js" file and render it. This can be done by adding the following code to the "src/App.js" file:
import Checkout from './components/Checkout';
function App() {
return (
<div className="App">
<header className="App-header">
<ProductList />
<Cart />
<Checkout />
</header>
</div>
);
}
Conclusion:
With these steps, you have successfully created a basic React e-commerce store with Medusa. However, this is just a starting point, and there are many ways to further customize and improve your store. Some suggestions include adding a payment gateway, implementing user authentication, and incorporating a search function into your store. Additionally, you can further customize the look and feel of your store by editing the styles in the "src/css" directory.
you can also create a professional and user-friendly online store that you can use to sell merchandise to your clients.
Sharing my understanding of concepts and approaches to problem-solving gives me happiness and it also helps me further my career. If you have any questions, feel free to reach out!
Connect with me on Twitter, LinkedIn, and GitHub!
Also, reach out to me, if you love to discuss startup building and building open-source software directly through my email📧 .