How to Build an Ecommerce Application using React, MongoDB, Strapi &

There are many ways to build e-commerce applications. This article will look at how to build an e-commerce application using React, MongoDB, Strapi, and

This is a companion discussion topic for the original entry at
1 Like

Hey Yves theres a quite problem when fetching the data,
on the Home.js file while rendering the Image on the Link

<img src={`http://localhost:1337${product.images[0].url}`}

must be replaced with

<img src={`http://localhost:1337${product.image[0].url}`}

Hi @Manav_Khadka ,

Thanks for the heads-up!

But i think its correct, I found out i had the name of media to image in the strapi collection

Hi Manav, this applies if you named the image field image. In the tutorial, I named the field images and that’s why I had to do product.images

Hopefully this clarifies things for you : )

Thanks you for a great tutorial! :partying_face:

For people rocking the latest version of Strapi, here’s a things to note.

bootstrap.js should be implemented like this:

  // Socket io for live refresh
  process.nextTick(() => {
    var io = require("")(strapi.server, {
      cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"],
    console.log(strapi.server); //workss

    io.on("connection", async function (socket) {
      console.log(`a user connected`);
      // send message on user connection
        { message: "Welcome to my website" }

      // listen for user diconnect
      socket.on("disconnect", () => {
        console.log("a user disconnected");
    }); = io; // register socket io inside strapi main object to use it globally anywhere

Also if you’re rocking Strapi in docker (the default example stack), modules can be installed with.

  1. docker container exec -it strapiexample /bin/bash
  2. npm install

Also… In React 6 Switches are now Routes, so you should do a implementation like this.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import ProductDetail from "./components/ProductDetail";

// other imports
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default function App() {
  return (
      <ToastContainer />
        <Route exact path="/" element={<Home />} />
        <Route exact path="/:product_id" element={<ProductDetail />} />

It’s also a good practice to use key values for every looped elements like this in Home.js. Fell free to fix it in other files, too.


export default function Home() {
  const [products, setProducts] = useState([]);

  return (
    <div className="container">
      <div className="products-container">
        { => (
            <img src={`http://localhost:1337${product.images[0].url}`} />
            <h2 className="product-name">{}</h2>
            <p className="product-desc">{product.description}</p>

I also mistypes it and created it as image instead of images :upside_down_face: :laughing: … Spotted the mistake by looking at the response from the backend.

And oh, “client” is empty in: