DEV Community: Reuben09

Simpler Async State Management in React Apps with Hyperfetch

Reuben09 — Sat, 22 Apr 2023 10:16:46 +0000

Introduction

Reactjs, a Javascript library that has no specific pattern for data fetching, the most basic approach it uses is the useEffect hook for data fetching and the useState hook to handle the state of the component, including any loading errors or gathered information.

But then, when it comes to managing caching, getting rid of duplicate requests for the same information, changing state data in the background, and improving performance, it can be a difficult task. Believe me, it takes a lot of time and energy to take care of all these elements in an application if you do it on your own.

Rather than attempting to manage all of these tasks yourself, you can make use of a library like Hyperfetch, which will make managing these tasks much easier.

What is Hyperfetch

Hyperfetch is a library designed to make it easier for developers to manage and manipulate data.

Are you familiar with Axios and React Query? Hyperfetch is a combination of both of these, with the bonus of more persistence options. It is suitable for any Javascript or Typescript environment, such as Nodejs, Reactjs, Angular, Svelte, Vue, and more.

Getting Started with Hyperfetch

In this portion of this article, I'm going to demonstrate how to integrate Hyperfetch into a Reactjs application. Before we start, let us configure our development environment.

Setting up Our Development Environment

In this guide, we are going to build a new React project with the help of Vite.

Launch any terminal you would like to use and type in the following command:

npm create vite@latest

After that, Vite will request the name of your project, for this lesson I will name mine react-hyperfetch-tutorial:

Next, Vite will want to know if you are using React or another library, choose React.

Once the command has finished running, navigate into the app and run the following in the terminal:

npm install
npm run dev

Installing Hyperfetch and Setup Instructions

Install Hyperfetch in your React app by running this command:

npm install --save @hyper-fetch/core @hyper-fetch/react

Now, this is where it gets interesting, to use Hyperfetch in our application we need to initialize two instances:

Client Instance.
Request Instance.

Initialize the client instance: The client instance will set up our connection to the server, all you have to do on your path is to determine the base URL of the server you want to work with.

Now let's write some code:

I’ll be working with a public API JSON placeholder, and the base URL of this API is https://jsonplaceholder.typicode.com.
Now inside the src directory make a new folder, and call it server. Then within the server folder, make a new client.js file and add the snippet below:

// client.js
import { Client } from "@hyper-fetch/core";

export const client = new Client({ url: "https://jsonplaceholder.typicode.com" });

Initialize the request instance: Hyperfetch allows us to create multiple reusable requests, and in addition to this, we can set up how these requests will work. While the majority of the settings are not compulsory, the only two that are required are the method and endpoint configurations.

The method configuration is where we put in whatever HTTP request method we want to use, for example, the GET or POST HTTP methods.

The endpoint configuration is where we put in whatever path we want to request.

Enough of the talks, let’s get to work, create a new folder in your server directory and call it auth, and then make a new file titled auth.js within that folder and insert the provided code snippet:

// auth.js
import { client } from "../client.js";

export const getPosts = client.createRequest()({
  method: "GET",
  endpoint: "/posts"
});

Now let's see how to fetch data.

Fetching data with the UseFetch hook

The useFetch hook is created to retrieve data from servers, and the many helper hooks it has will help you handle various events in the request flow and life cycle.

Import the useFetch hook into your App.js file

// App.js
import { useFetch } from "@hyper-fetch/react";

Import the getPosts request and pass it as an argument to the useFetch hook:

import { useFetch } from "@hyper-fetch/react";
import { getPosts } from "./server/auth/auth";

const App = () => {
  const { data, error, loading, onSuccess, onError, onFinished } =
    useFetch(getPosts);

  onSuccess(({ response }) => {
    console.log(response); // [ User, User, User ]
  });

  onError(({ response }) => {
    console.log(response); // { message: string }
  });

  onFinished(({ response }) => {
    const [payload, error, status] = response;
    console.log(payload); // [ User, User, User ] | null
    console.log(error); // { message: string } | null
    console.log(status); // 200 / 400 / 404 / 500
  });

  return (
    <div>
      <h1> Hi</h1>
    </div>
  );
};
export default App;

From the above snippet the useFetch hook returns an object that contains the following properties: data: The response returned by the server.

error: Contains information about any errors that occurred during the request.

loading: A boolean value that indicates whether the request is still in progress or has been completed.

onSucess: A callback function that is called when the request succeeds.

onError: A callback function that is called when the request fails.

onFinished: A callback function that is called when the request completes whether it succeeded or failed.

Inside the JSX, return a list of post titles by mapping through data

import { useFetch } from "@hyper-fetch/react";
import { getPosts } from "./server/auth/auth";

const App = () => {
  const { data, error, loading, onSuccess, onError, onFinished } = useFetch(
    getPosts
  );

  onSuccess(({ response }) => {
    console.log(response); // [ User, User, User ]
  });

  onError(({ response }) => {
    console.log(response); // { message: string }
  });

  onFinished(({ response }) => {
    const [payload, error, status] = response;
    console.log(payload); // [ User, User, User ] | null
    console.log(error); // { message: string } | null
    console.log(status); // 200 / 400 / 404 / 500 ...
  });

    if(loading){
      return <div>loading...</div>
    } else {
      return(
      <div>
        <h1>POST TITLES</h1>
        {data?.map((post) => {
          return <li>{post.title}</li>;
        })}
      </div>
    )
}
}

export default App;

This is what we should have after fetching:

Conclusion

In this article, I've introduced Hyperfetch while also stating the problems it solves. I also demonstrated how to install Hyperfetch into a Reactjs program and the steps needed to get it working. Lastly, I described how to make use of Hyperfetch to fetch data from any API endpoint.

Reference

Hyperfetch docs- https://hyperfetch.bettertyped.com/

Json placeholder- https://jsonplaceholder.typicode.com/

Why Medusa is the Top Choice for E-commerce Businesses: A Deep Dive into Its Key Features

Reuben09 — Tue, 11 Apr 2023 03:52:22 +0000

The program that keeps an e-commerce website running is known as a backend engine. In this article, I'll go over some of the key features of Medusa that make it a top choice for businesses. I'll also provide examples so you can see how crucial these features are.

About Medusa

For developers who want to take control of their e-commerce stack, Medusa is an open-source, modular e-commerce engine. With Medusa, you can quickly build complex e-commerce applications without needing to learn a difficult language.

Flexibility

Flexibility. By using the word flexibility, I mean that the Medusa backend engine is adaptable enough to allow developers to completely customize their e-commerce platform. This includes the capability of integration with tools from outside sources.

Let us take a look at this scenario, let's say you're starting an e-commerce business where you want to sell personalized gift items online, and you want to create unique designs and functionality for your website. Here you will need an e-commerce backend engine that gives you complete control over customization, and some of the examples of customization that you might require in this scenario include:

Customizable product pages:

You will need the ability to create and customize product pages that uniquely showcase your products.

Customizable payment options:

You may want to offer payment options that are specific to your business or region.

Customizable shipping options:

You'll need the ability to offer a variety of shipping options to your customers, such as express shipping or free shipping for certain orders.

Customizable Analytics:

You'll need to track and analyze your website performance to make data-driven decisions, this means you'll need an e-commerce backend engine to customize your analytics and reporting.

To achieve all these, you may want to consider using an open-source e-commerce backend engine like Medusa. Medusa is built with customization in mind and will allow you to customize the codebase and create unique functionality that is tailored to your business needs.

Overall, because of its flexibility, Medusa gives you complete control over customization, allowing you to give your customers a one-of-a-kind and personalized shopping experience while also having the freedom to change and expand your company over time.

Scalability

The ability of an e-commerce backend engine to handle rising traffic and transaction volumes without sacrificing performance or stability is referred to as scalability in this context.

This means that the backend engine can handle more customers, more products, more transactions, and more data as the business grows without experiencing any significant slowdowns or downtime.

As an example, let's look at the busiest shopping days like Black Friday and Cyber Monday. We are all aware of the sudden increase in traffic that these seasons bring to online businesses. Such a sudden increase in traffic can be handled by a scalable e-commerce backend engine like Medusa without crashing or going unresponsive.

An e-commerce backend engine like Medusa is what you'll need if you're starting an online store that sells niche products, you have ambitious plans to grow your business quickly, and you expect to significantly increase the number of products and customers on your platform within the next few years.

Medusa is capable of scaling with your business's growth and it makes sure that your website can handle more users and products at lower-cost

Security

Securing your e-commerce store is crucial for several reasons

Protecting customer data:

As an e-commerce store owner, you collect and store sensitive information such as names, addresses, credit and debit card details and so on. If this information falls into the wrong hands, it can be used for fraudulent activities which might lead to legal and financial troubles. By securing your store you can protect your customer's data and gain their trust.

Building customer trust:

When customers visit your e-commerce store, they want to feel safe and secure while making their purchases.

Compliance:

Many countries have data protection laws that require e-commerce store owners to take appropriate measures to protect customer data. By securing your store you can ensure compliance with these regularities and avoid legal troubles.

Although Medusa requires additional security measures to be implemented by the developer. It has strong security features built in to achieve the above security needs and more.

Community

Medusa has a community of over 5000 members on their discord server where developers can join to receive help from the rest of the community and the core Medusa team. Here are some of the benefits you get when you use a top e-commerce backend engine like Medusa that has a large community:

Better support and documentation:

With the large community it has, you can expect better support and documentation for the Medusa backend engine. Meaning you are more likely to find answers to your questions and solutions to any issues you encounter.

Increased stability and reliability:

Large communities typically mean that Medusa is stable and reliable. Developers are more likely to report and fix bugs which can make Medusa more robust and less prone to crashes or other issues.

More plugins and tools:

This means that there are more plugins and tools available for Medusa, which can make it easier to extend and customize the functionality of your e-commerce store. and examples

Increased adoption and popularity:

Medusa is likely to be more popular and widely adopted. This means that there are more resources available, including tutorials, courses, and examples making it easier to learn and use Medusa.

Better job opportunities:

Yes. Medusa can improve your job prospects. E-commerce startups are more likely to use Medusa and having experience with this backend engine can make you a more attractive job candidate.

Conclusion

I've described what an e-commerce backend engine is in this article and provided an overview of Medusa. I then listed the four key characteristics of Medusa that make it a top choice for your business and how crucial these features are to the growth of your business.

How to Install and Configure the Console ninja Vscode Extension

Reuben09 — Sat, 11 Mar 2023 08:51:36 +0000

Introduction

Console.log is an effective way to comprehend your JavaScript code, and one of the most frequently used methods to see the output it gives is through the browser's developer tools.

But, do you know? console.log can be much easier to use and you can now debug with console.log like a ninja.

Ever seen anything like this? 👀

Where you get your message right next to the console.log method? We were able to achieve this thanks to a Vs code extension called Console Ninja.

Now, in the following sections, I will be showing how to Install and configure the Console Ninja VsCode Extension.

How To Set It Up

To set up console ninja, navigate to the extensions tab:

Next, search for console ninja and click on the result with Wallaby.js as the author:

Click the install button to install the extension:

Settings

Now that we are done with installing the console ninja extension, if you use extensions like live server there are some settings to do for the proper functioning of the console ninja extension but if you don't use live server, you can go straight to the section where we test console ninja out.

Navigate to the settings tab at the bottom left corner of your vs code:

Afterwards, click the next settings button:

In the next step, search for console ninja:

Scroll down to the bottom and tick these two boxes:

Test it Out

In this section of this article, we are going to be testing out console ninja to see if we have successfully installed and configured it correctly.

But before we test it out, we have to be sure to start console ninja. At the bottom of your Vscode editor, you're going to see a ninja section with an icon of pause.

Click on that to be provided a dropdown of a few actions you can select from:

To start the console ninja extension, select start console ninja:

Now, the final step is for those that use the live server extension. At the bottom of your Vs code editor, click the Go live section to go live.

Console ninja is now ready for use,, below is a gif of me testing out console ninja, please watch closely.

There, it is working perfectly🎉, but I want us to note something, before console ninja will work as it should there have to be an interaction of your code with the browser.

For example, Take a look at the gif above of me testing out console ninja, notice I had to click a "click me" button on the browser before I could get my console message right next to its method.

If I had something like this:

A console.log method standing alone and which will get to have no interaction with the browser, my console message will not show.

Conclusion

In this article, I have discussed the console ninja Vscode extension, how to install and configure it, and we have tested it out.

Did you find this article useful?

Follow me for more posts like this so we don't lose sight of each other.💯
Leave a lot of reactions to show your support.🥳
Share it to spread the knowledge.🤗

How to Lazy Load Html Videos

Reuben09 — Sat, 11 Mar 2023 08:46:20 +0000

Introduction

In this article, we are going to look at how to lazy load Html videos.

Steps we'll cover:

What Does Lazy Loading Mean?
Examples Of Lazy Loading.
Code To Prevent Preloading.
How To Customize Video Thumbnail Until The User Begins Playback.
Free Lazy Loading Javascript Libraries You Should Try Out.

What Does Lazy Loading Mean?

lazy loading (also known as asynchronous or on-demand loading) is an optimization technique mostly used in web design and web development whereby the browser does not request certain resources until the user interacts in such a way that the resources are needed.

You might be wondering, "How will this lazy loading improve my website?"🤔 or "why do I have to implement lazy loading into my website at all?"🤔. The following are the answers to these questions about the advantages of lazy loading:

Lazy loading improves performance:

Lazy loading improves performance, and I'll explain why website performance is so important. The speed with which a browser can load a fully functional webpage from a given site is referred to as performance or website performance.

The success of any online venture is heavily reliant on performance. Poor-performing sites drive away users, whereas high-performing sites engage and retain them. You can see why you might have to lazy load your site now.
Improved SEO:

Search engines cannot crawl the entire webpage if there is a delay in page loading. This simply means that there will be a delay and that rankings will not appear at the top. This is where lazy loading comes in handy, ensuring that the most important content is displayed first, thereby improving your website's ranking.

You can also provide links to the lazy loaded content so that even if the entire content is not loaded, with the links provided, the user can still access the data that they want.

Remember how we defined lazy loading? "The browser will not request specific resources until the user interacts in such a way that the resources are required", I explained. This definition of lazy loading is perfectly illustrated by the scenario above.

Example Of Lazy Loading

This section of the article will look at examples of lazy loading, but because the focus of this article is video lazy loading, I'll limit this example to video lazy loading only. If you want to learn how to lazy load other types of content, such as images, check out the resource below:

Lazy loading images complete guide

Have you ever seen something like this on a website? 👀 where you must manually click the playback button before the browser begins downloading the video. Look at the gif below:

If so, I'm pleased to inform you that video lazy loading has been implemented on that page. Why do you have to click the playback button yourself? Why not just let the videos play automatically? These questions will be addressed in the following paragraph.

Although the HTML <video> tag by default allows the browser to preload and auto-play your video, auto-playing your video causes your webpage to load slower. That is why, to lazy load your videos, we must prevent preloading.

Code To Prevent Preloading

The preload attribute of the video element can be used to prevent the preloading of HTML videos. To lazy load your videos, follow these two steps:

Step 1: Set preload to "none".

Step 2: Make sure that the auto-play attribute is not set otherwise the browser will need to start loading the video and preload = "none" will not work.

Here's an example of the code:

<!-- disable preloading -->
<video controls preload="none" width="300">
    <source src="files/sample.mp4" type="video/mp4">
</video>

Here's an example of what your browser should display:

Depending on your browser, the video will display a white or black area. In my case, it displays a black area, as seen in the image above; additionally, it is not visually appealing, which may lead to low user engagement. So, how do we address this? Html allows us to customize our thumbnails and use them as video previews (leading to better user engagement).

How To Customize Video Thumbnail Until The User Begins Playback

To customize video thumbnails the poster attribute gives the video element a placeholder that will occupy the space until the user begins playback. In any case, don't be concerned about what happens to the "play" icon; the browser itself will insert the "play" icon in the center of the image.

Show the poster as a thumbnail

To show the poster as the thumbnail check out the code snippet and result below:
```
<video controls preload="none" poster="img/cover.jpg" width="300">
    <source src="files/sample.mp4" type="video/mp4">
</video>
```
To achieve the same result as the image above, I recommend using a thumbnail image the size of the video.

Free Lazy Loading Javascript Libraries You Should Try Out

JS libraries contain various functions (or lines of code) for performing specific tasks on a web page.

You can use these free lazy loading javascript libraries to save time and ease your programming workload.

Vanilla-lazyload :
- Written in plain "vanilla" javascript.
- leverages Intersectionbserver.
- Optimizes your website for slower connection and can enable native lazy loading.
Lozad.js :
- Lazy loads elements performantly using pure javascript.
- It's a lightweight library.
- Allows lazy loading of dynamically added elements as well.
- has no dependencies.
- is completely free and open source.
Yall.js(Yet Another Lazy Loader) :
- an SEO-friendly lazy loader for <video elements as well as CSS background images.
- work in all modern browsers.
- uses intersection observer where available.
- can also lazy load video poster images.
React-lazyload :
- lazy load your components, images or anything that matters the performance.
- Supports one-time lazy load and continuous lazy load mode.
- Server-side rendering friendly.
- Thoroughly tested.

Conclusion

In this article, I began by explaining what lazy loading is, followed by a quick walkthrough of examples of lazy loading, limiting it to video lazy loading and providing a resource for those who may want to learn how to lazy load other types of content. Then we talked about the code to prevent preloading and how to customize video thumbnails until the user starts playing. Finally, we examined some free lazy loading javascript libraries that you should try.

Building an E-commerce Store: A Step-by-Step Guide with Solidjs and Medusa

Reuben09 — Thu, 09 Mar 2023 05:38:02 +0000

Introduction

The term “e-commerce” simply refers to the online sale of goods and services.

People can use an e-commerce store to buy and sell tangible (physical) goods, digital products, or services online. You will build an e-commerce store using Solid(as the storefront) and Medusa(as the backend).

By creating this app, you will learn:

How to set up the Medusa server and Medusa admin.
How to Create an e-commerce storefront using Solid.
How to Integrate Solid with Medusa
How to loop over an array of objects using the <For> component.
How to create client-side routing using Solid Router.
How to create beautiful UIs using Material UI

and much more...

What is Medusa?

Medusa is an open-source composable e-commerce engine for developers who want to take ownership of their e-commerce stack. Medusa is made up of three parts:

The headless backend.
Admin dashboard.
Storefront.

Medusa is a versatile Javascript e-commerce platform that enables developers to take advantage of its features and capabilities regardless of the framework they use to build their web applications.

What is Solid?

Solid is a blazing-fast javascript framework that dodges virtual dom manipulation. Solid is a JavaScript framework for making interactive web applications.

With Solid, you can use your existing HTML and JavaScript knowledge to build components that can be reused throughout your app. Solid provides the tools to enhance your components with reactivity: declarative JavaScript code that links the user interface with the data that it uses and creates.

Let's create a cool e-commerce website using Solid.

Getting Started with Medusa

In this portion of this article, I am going to show you how to set up the Medusa server on your local machine.

Step 1: Install the Medusa CLI Tool

Medusa CLI is a tool that lets you run important commands while working with Medusa.

To use Medusa, you must first install the CLI tool, which is used to create a new Medusa server.

Using either npm or yarn, we can install Medusa CLI, but this tutorial will use npm. Open any terminal of your choice and run the following command:

npm install @medusajs/medusa-cli -g

Step 2: Create a new Medusa Store Server

The store server is the main component that houses all of the store's logic and data.

This server will include all the functionalities related to your store's checkout workflow. Cart management, shipping, shipping, payment providers, user management, and other features are included.

Run the command below to create your new Medusa store server:

medusa new my-medusa-store --seed

Things to note from the preceding command:

my-medusa-store represents the project's name, which you can change to whatever you want.
The --seed command seeds your database with some sample data to get you started. Including a store, an administrator account, a region and products with variants.

Step 3: Test the Medusa Store Server

To test the Medusa store server, cd into my-medusa-store, and run the command below:

medusa develop

Navigate to localhost:9000/store/products/ in your browser, and the following should appear:

Step 4: Set up Medusa Admin

The Medusa admin dashboard allows us to perform all kinds of actions on our system data. It provides a way for you to create new products, edit your products, delete your products, view orders and so on.

The Medusa admin is connected to the Medusa store server, so make sure that you have successfully installed and tested the Medusa store server first before proceeding with the admin.

To install the admin, start by cloning the admin Github repository:

git clone https://github.com/medusajs/admin medusa-admin

Next, cd into the medusa-admin directory and install the dependencies using npm:

npm install

Step 5: Test the Medusa Admin

To run the Medusa admin, type in the following command:

npm start

Now navigate to localhost:7000 on your browser to view the admin page:

The email is admin@medusa-test.com and the password is supersecret.

Note: Before you can test the Medusa admin, you need to make sure the Medusa server is running.

Building the Storefront with Solid

In this section of the article, I'll demonstrate how to use Solidjs to build the storefront for your e-commerce application.

Step 1: Create a new Solid App

Run the following command in your terminal to create a new Solid app:

npx degit solidjs/templates/js solid-app

Next, cd into solid-app and install its dependencies:

cd solid-app
npm install

Once the installation is complete, start your local development server:

npm run dev

Step 2: Install all Necessary Dependencies

To build the e-commerce app more quickly, you will need some dependencies.

We will be able to easily create stunning UIs with the help of Material UI. Run the following command to install Material UI for Solid:

npm install @suid/material @suid/icons-material

Solid Router is a universal router for Solidjs that works whether you are rendering on the client or on the server. To install Solid Router run the command below:

npm i @solidjs/router

Medusa JS Client is an SDK that provides easy an way to access the Medusa API. Run the following command to install the Medusa JS Client:

npm install @medusajs/medusa-js

Step 3: Integrate Solid with Medusa

At the root of your solid-app project, create a .env file and add the following content to it:

VITE_baseUrl=http://localhost:9000

baseUrl environment variable is the URL of your Medusa server.

Medusa uses Cross-Origin Resource Sharing(CORS) to only allow specific origins to access the server.

You must configure Vite because Medusa by default only accepts access to storefronts on port 8000, while Vite's default port is 5173.

Navigate into vite.config.json and replace the content with the following:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

//https://vitejs.dev/config/
export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 8000,
  },
  build: {
    target: 'esnext',
  },
});

Open a new browser tab and navigate to http://localhost:8000 after restarting your development server.

Note: Any request your storefront makes to the server will be denied by Medusa if Vite is not configured to use the required port number, 8000.

Next, create a utility that will enable the reuse of the Medusa JS Client instance throughout your application.

Create a new file src/utils/client.js and add the following content:

import Medusa from "@medusajs/medusa-js"

const medusaClient = new Medusa({ baseUrl: import.meta.env.VITE_baseUrl })

export { medusaClient }

Step 4: Building the Storefront Components

In this section of this article, we will build the storefront component for our app. One of the components we are going to create is the:

Header Component: Make a new folder in the src directory and call it component. Then within the component folder, make a new Header.jsx file and add the following content:

//Header.jsx
import { A } from "@solidjs/router";
import { Box } from "@suid/material";
import { Typography, IconButton, AppBar, Toolbar } from "@suid/material";
import ShoppingCartIcon from "@suid/icons-material/ShoppingCart";

const Header = () => {
  const cartCount = localStorage.getItem("cartCount") ?? 0;

  return (
    <Box>
      <AppBar position="fixed" color="primary">
        <Toolbar>
          <Box
            sx={{
              display: "flex",
              width: "100%",
              alignItems: "center",
              flexDirection: {
                lg: "row",
                md: "column",
                sm: "column",
                xs: "row",
              },
              justifyContent: "space-between",
            }}
          >
            <Typography
              variant="h6"
              component="h6"
              sx={{
                marginBottom: { lg: "0", md: "0.7rem", sm: "0.7rem", xs: "0" },
              }}
            >
              Reuben09
            </Typography>
          </Box>

          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              marginBottom: { lg: "0", md: "0.7rem", sm: "0.7rem", xs: "0" },
            }}
          >
            <A href="/">
              <Typography
                sx={{
                  marginRight: "1rem",
                  fontSize: "1.1rem",
                  cursor: "pointer",
                }}
              >
                Home
              </Typography>
            </A>
            <A href="/products">
              <Typography
                sx={{
                  marginRight: "1rem",
                  fontSize: "1.1rem",
                  cursor: "pointer",
                }}
              >
                Products
              </Typography>
            </A>
            <IconButton>
              <ShoppingCartIcon sx={{ color: "#fff" }} />
            </IconButton>
            <p>{cartCount}</p>
          </Box>
        </Toolbar>
      </AppBar>
    </Box>
  );
};

export default Header;

ProductList Component: This component will display lists of products fetched from the Medusa server using the medusaClient utility function, using Solid Router, the component will also create links to individual products.

Inside the component folder, make a new file and call it ProductList.jsx. Open the newly created ProductList.jsx file and add the following content:

//ProductList.jsx
import { createEffect, createSignal, For } from 'solid-js'
import { A } from "@solidjs/router"
import { Box, Typography, Link, Grid } from "@suid/material";
import { medusaClient } from '../utils/client.js'


function ProductList () {
  const [products, setProducts] = createSignal([]);
  createEffect(()=> {
    const fetchProducts = async () => {
      const res = await medusaClient.products.list();
      setProducts(res.products)
  }
  fetchProducts()
  })
  return(
    <>
    <Box
      sx={{
        marginTop: "2rem",
        paddingLeft: {lg: "4rem", xs: "1.5rem" },
        paddingRight: {lg: "4rem", xs: "1.5rem" }
      }}
      component="section"
    >
      <Typography
        sx={{
          textAlign: "center",
          fontSize: "1.5rem",
          marginBottom: "2rem"
        }}
      >
        Featured Products
      </Typography>

      <Box sx={{margin: "0 2rem"}}>
      <Grid container spacing={1}>
        <For each={products()}>
                {(product) => 
                 <Grid item lg={3} xs={6} sm={6} sx={{ backgroundColor: "#fff" }}>
                <Box
                  component="div"
                  sx={{
                    backgroundColor: "rgb(231, 231, 231)",
                    height: "350px",
                    padding: "0.5rem"
                  }}
                >
                  <Box component="div" sx={{ height: "12rem" }}>
                    <Box
                      component="img"
                      src={product?.thumbnail}
                      sx={{
                        height: "12rem",
                        width: "100%",
                        objectFit: "cover"
                      }}
                    />
                  </Box>
                  <Typography sx={{ padding: "1rem 0", textAlign: "center", fontWeight: "600" }}>
                    {product?.title}
                  </Typography>
                  <Typography sx={{ textAlign: "center" }}>
                  &euro; {product?.variants[0].prices[0].amount / 100 }
                  </Typography>
                  <Box sx={{ textAlign: "center" }}>
                  <Link underline="always">
                  <A href={`/products/${product.id}`}>
                  See product
                    </A>
                    </Link>
                  </Box>
                </Box>
                </Grid>
                }</For>
              </Grid>
                     </Box>
    </Box>
    </>
  ) 
}

export default ProductList;

Newsletter component: In the component folder create a new NewsLetter.jsx file and add the following content:

import {
    Grid,
    Box,
    Typography,
    Input,
    IconButton,
    Button
  } from "@suid/material";
function NewsLetter() {
    return (
      <Box
        component="section"
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
          paddingLeft: { lg: "4rem", xs: "2rem" },
          paddingRight: { lg: "4rem", xs: "2rem" }
        }}
      >
        <Box component="form">
          <Typography
            variant="h2"
            mt={10}
            sx={{
              textAlign: "center",
              fontSize: "1.5rem",
              marginBottom: "0.3rem",
            }}
          >
            {" "}
            Subscribe to our newsletter
          </Typography>
          <Typography sx={{textAlign: "center", marginBottom: "1rem" }}>
            Get 10% off your first purchase and stay on top of the latest in
            Debutify, it's win-win-WIN!
          </Typography>
          <Box sx={{marginBottom: "2rem" }}>
            <Input
              placeholder="First Name"
              sx={{textAlign: "center", width: "100%" }}
            />
          </Box>
          <Box sx={{marginBottom: "2rem" }}>
            <Input
              placeholder="Your Email"
              sx={{textAlign: "center", width: "100%" }}
            />
          </Box>
          <Box sx={{textAlign: "center", width: "100%", marginBottom: "1rem" }}>
            <IconButton>
              <Button variant="contained" color="primary">
                Subscribe
              </Button>
            </IconButton>
          </Box>
        </Box>
      </Box>
    );
  }

  export default NewsLetter;

Footer component: Also in the component folder create a new Footer.jsx file and add this content:

import { Box, Typography } from "@suid/material";
import NewsLetter from "./NewsLetter";

function Footer (){
    return (
        <>
       <Box component="section" sx={{ marginBottom: "2rem" }}>
        <NewsLetter />
      </Box>
      <Box
      component="div"
      sx={{textAlign: "center", backgroundColor: "#1976D2", padding: "1rem" }}
      color="primary"
    >
      <Box
        component="a"
        sx={{textAlign: "center", color: "#fff" }}
        href="https://github.com/Reuben09"
      >
        created by Reuben09
      </Box>
    </Box>
        </>
    )
}

export default Footer;

Step 5: Create the Storefront Pages

From here it gets easy, all you need to do is import the components that you have created in the previous section into these pages:

Home page: Make a new folder in the src directory and call it pages. Then within the pages folder, create a new Home.jsx file and add the following content:

import { Box, Typography, IconButton, Button } from "@suid/material";
import ProductList from '../component/ProductList'
import Footer from '../component/Footer'

function Home (){
    return <div>
        <Box
        sx={{
          backgroundImage:
            "url(https://images.unsplash.com/photo-1552346154-21d32810aba3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80)",
          width: "100%",
          height: "80vh",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          marginBottom: "5rem"
        }}
      >
        <Box
          sx={{
            width: "100%",
            height: "80vh",
            backgroundColor: "rgba(25, 118, 210, 0.2)",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Typography
            sx={{
              fontSize: "3rem",
              color: "#ffffff",
            }}
          >
            Reuben09
          </Typography>
          <Typography
            sx={{
              fontSize: "3rem",
              color: "#ffffff",
            }}
          >
            WebShop
          </Typography>
          <Typography sx={{textAlign: "center", color: "#ffffff" }}>
            Users of the highest converting shopify theme deserve a lifestyle to
            match!
          </Typography>
          <Box sx={{marginTop: "1rem" }}>
            <IconButton>
              <Button
                variant="contained"
                color="primary"
                sx={{marginRight: "0.5rem" }}
              >
                Shop now
              </Button>
            </IconButton>
            <IconButton>
              <Button
                variant="contained"
                color="primary"
                sx={{marginLeft: "0.5rem" }}
              >
                Learn more
              </Button>
            </IconButton>
          </Box>
        </Box>
      </Box>
      <Box component="div" sx={{marginBottom: "2rem" }}>
      <ProductList />
      </Box>
      <Box section="footer">
        <Footer />
      </Box>
    </div>
}

export default Home;

Products page: Also in the pages folder, make a new Products.jsx file and add the following content:

import ProductList from '../component/ProductList'
import Footer from '../component/Footer'

function Products (){
  return <div>
    <ProductList />
    <Footer />
  </div>
}

export default Products;

SingleProduct page: This page is where we will fetch product items based on their ids and display their details. It will also allow users to add the product to their cart

Make a new SingleProduct.jsx file in the pages folder and paste in the following content:

import { useParams } from "@solidjs/router";
import { createEffect, createSignal } from 'solid-js'
import {Container, Box, Grid, IconButton, Button, Typography} from '@suid/material';
import Footer from '../component/Footer'
import { medusaClient } from '../utils/client.js'

const addProduct = async (cartId, product) => {
    const { cart } = await medusaClient.carts.lineItems.create(cartId, {
        variant_id: product()?.variants[0].id,
        quantity: 1
    })
    console.log(cart);
    localStorage.setItem('cartCount', cart.items.length)
    setTimeout(window.location.reload(), 5000)
}


function SingleProduct (){
    const [productItem, setProductItem] = createSignal();
    const [regionId, setRegionId] = createSignal("");
    const params = useParams();
    const productId = params.productId;

    createEffect(()=> {
        const fetchSingleProduct = async () => {
            const results = await medusaClient.products.retrieve(productId);
            setProductItem(results.product)
        }

        const fetchRegions = async () => {
            const results = await medusaClient.regions.list()
            setRegionId(results.regions[1].id)
        }

        fetchSingleProduct()
        fetchRegions()
      })

      const handleAddToCart = async () => {
        const cartId = localStorage.getItem('cartId');

        if (cartId) {
            addProduct(cartId, productItem)
        } else {
            const { cart } = await medusaClient.carts.create({ region_id: regionId })
            localStorage.setItem('cartId', cart.id);
            addProduct(cart.id, productItem)
        }
    }
        return <>
        <Box sx={{marginTop: "7rem"}}>
          <Container maxWidth="sm">
          <Grid container spacing={2}>
             <Grid item lg={6} xs={12} sm={6}>
             <Box>
                      <img sx={{width:"500px"}}
                          alt={productItem()?.title}
                          src={productItem()?.thumbnail} />
                  </Box>
                  </Grid>
                  <Grid item lg={6} xs={12} sm={6}>
                  <Box sx={{marginTop: "2rem", display: "flex", justifyContent: "flex-start", alignItems: "flex-start", flexDirection: "column"}}>
                      <Typography variant="h5" mb={2}>{productItem()?.title}</Typography>
                      <Typography mb={2}>&euro; {productItem()?.variants[0].prices[0].amount / 100 }</Typography>
                      <Typography mb={2}>{productItem()?.description}</Typography>
                      <IconButton>
                        <Button onClick={handleAddToCart} variant="contained" color="primary">
                          Add to cart
                        </Button>
                      </IconButton>
                  </Box>
                  </Grid>
          </Grid>
          </Container>
        </Box>
        <Footer />
        </>
}

export default SingleProduct;

Step 6: Register the Storefront Pages:

In this section of this article, we are going to enable client-side routing in our application using Solid Router.

index.jsx is our entry point, so we will import Router and wrap the App component within it.

Open index.jsx and replace it with the following content:

/* @refresh reload */
import { render } from 'solid-js/web';
import { Router } from "@solidjs/router";
import './index.css';
import App from './App';

const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got mispelled?',
  );
}

render(() => 
<Router>
<App />
</Router>, root);

That's it! you can now register the three pages. Open App.jsx and replace it with the following content:

import { Routes, Route } from "@solidjs/router"
import { lazy } from "solid-js";
import Header from './component/Header'
const Products = lazy(() => import("./pages/Products"));
const Home = lazy(() => import("./pages/Home"));
const SingleProduct = lazy(() => import("./pages/SingleProduct"));

function App() {
  return (
    <div>
      <Header />
      <Routes>
      <Route path="/" component={Home} />
      <Route path="/products" component={Products}  />
      <Route path="/products/:productId" component={SingleProduct}  />
      </Routes>
    </div>
  );
}

export default App;

Step 7: Test the Storefront

Restart your server and open a new browser tab at http://localhost:8000 and this is what your browser should display:

Home page:

Products page: On your navbar, click on products to get to the products page:

SingleProducts page: Click on any of the products to get to the single product page:

Conclusion

After introducing Medusa and Solid in this article, I showed how to create an e-commerce website using Medusa (as the backend) and Solid (as the storefront) from scratch.

Reference

Medusa docs - https://docs.medusajs.com/introduction

Solid Router - https://github.com/solidjs/solid-router

Material UI - https://suid.io/getting-started/usage