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

1

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 Socket.io.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-build-an-ecommerce-application-using-react-mongo-db-strapi-and-socket-io
1 Like
2

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}`}
3
4

Hi @Manav_Khadka ,

Thanks for the heads-up!

5

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

6

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 : )

8

Thanks you for a great tutorial! :partying_face:

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

bootstrap.js socket.io should be implemented like this:

  // Socket io for live refresh
  process.nextTick(() => {
    var io = require("socket.io")(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
      socket.emit(
        "hello",
        { message: "Welcome to my website" }
      );

      // listen for user diconnect
      socket.on("disconnect", () => {
        console.log("a user disconnected");
      });
    });
    strapi.io = 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 socket.io

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 (
    <Router>
      <ToastContainer />
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/:product_id" element={<ProductDetail />} />
...
      </Routes>
    </Router>
  );
}

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">
      <h1>Products</h1>
      <div className="products-container">
        {products.map((product) => (
          <Link
            className="product"
            to={`/${product.id}`}
            key={`/${product.id}`}
          >
            <img src={`http://localhost:1337${product.images[0].url}`} />
            <h2 className="product-name">{product.name}</h2>
            <p className="product-desc">{product.description}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}

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.

9

And oh, “client” is empty in: