DEV Community: Shadman Shakib

Getting products from Shopify Storefront API

Shadman Shakib — Wed, 30 Mar 2022 00:41:18 +0000

Set up a Next.js project

First of all let’s set up a next JS project. We can get started with the following command. I have used Typescript for my project but you can use JavaScript if you want.

yarn create next-app --typescript

Also install Mantine component library for styling and Apollo for data fetching.

yarn @mantine/core @mantine/hooks @appllo-graphql graphql

In the _app.tsx file import provider from both @appllo/client and @mantine/core . Then wrap the whole app with the providers.

//_app.tsx
import { MantineProvider } from "@mantine/core";
import { ApolloProvider } from "@apollo/client";
import "../styles/globals.css";
import Client from "../services/Apollo";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={Client}>
      <MantineProvider>
        <Component {...pageProps} />
      </MantineProvider>
    </ApolloProvider>
  );
}

export default MyApp;

ApplloProvider will receive a client prop. Need provider the credential on Client.ts file. This file will content API endpoint and API key which we get from Storefront dashboard.

Setting up the environment variable

I have placed my initial store name and API key in the .env file as a environment variable. The API key we need to get it from Shopify dashboard. To get an API key we need to add a private app to our Shopify store.

Storefront API provides all the functionalities of a Shopify store. To get access to Storefront API we need a API key. We need to create a private app to get the API key. First, go to Dashboard, go to Apps section, here you will find a option of creating a private app. Just create a Private app and get your API key.

Function to get products

Now lets setup the a getProducts() function which will get products form the backend.

For this step you must have product in your store. Now you can query for products from the Shopify API. For simplicity and code readability we will name the function getProducts() . We fill get first 5 products from our store.

For Static rendering of data call the API inside the getStaticProps() function. Use getStaticProps get products from that store.

import Client from "@services/Apollo";
import { gql } from "@apollo/client";

export default async function getProducts() {
  const { data, error, loading } = await Client.query({
    query: gql`
      query Products {
        products(first: 5) {
          edges {
            node {
              id
              handle
              title
              description
              variants(first: 10) {
                edges {
                  node {
                    id
                    image {
                      height
                      url
                      altText
                      width
                    }
                  }
                }
              }
            }
          }
        }
      }
    `,
  });
  return { data, error, loading };
}

Showing product list on UI

Now map the products array. We need to go through edges and node in the Storefront API in order get the actual data

{
  _.map(data.products.edges, (product: Product) => {
              const { id, title, description, variants } = product.node;
              const url = variants.edges[0].node.image.url;
              return (
                <Card key={id}>
                  <h3>{title}</h3>
                  <img alt={title} src={url} />
                  <p>{description}</p>
                  <Button>Add to cart</Button>
                </Card>
              );
            })}

More information on:
https://shopify.dev/api/storefront
https://nextjs.org

How I use Context and Hooks to manage State in React JS

Shadman Shakib — Mon, 10 Jan 2022 16:50:07 +0000

Managing state is a big part of front-end development in this age of JavaScript frameworks. There are a lot of options to manage state in React JS. May be most common using Redux. But using Redux for a small application may not be ideal. React has a built-in context API and hooks to manage state. In this article I will try to explain how I manage state with Context API and hooks.

Context Overview

According to official React documentation, Context provides a way to share values between components without having to explicitly pass a prop through the level of the tree. Basically, what Context does is make state available anywhere from the application without passing it through props.

Creating Context

You can create context simply by calling createContext() .

const UIContext=React.createContext(initialState)

This creates a context object. When React renders a component that subscribes to this Context object it will read the current context value form the closest matching Provider above it in the tree. The initial state is only used when a component dose not have a matching Provider above it in the tree. For example passing the toggle menu state as initial state.

import React from "react"
//setting up the initial state
const initialState={
isMenuOpen:false;
}
//creating a context
const UIContext=React.createContext(initialState)

Setting up the Provider function

Every context object comes with a Provider component that allows consuming components to subscribe to context changes. In order to get access to the state one component must be placed inside the provider. I have created a Provider function to accomplish this task.

export const UIProvider=(props)=>{
return <UIContext.Provider value={} {...props}/>
}

Using Hooks to change the state

Hooks are functions that let you “hook into” React state and life cycle features from functional components. Before introductions of hooks in React 16.8 class-based components were mandatory for any projects that require states, life-cycle methods, and many other important functionalities.
The useReducer hook is used to handle complex logic. The hook takes a reducer as an argument and can optionally take the initial state and an init function as arguments. The useReducer It’s return states and a function which you can call to dispatch action. Writing Reducer functions for your context

const [state, dispatch]=React.useReducer(reducer, initialState ,init)

Dispatching action to change state

We can dispatch functions by calling the dispatch function we get from the useReducer hook. Here we specify the type of action we wanna dispatch.
The useCallback hook will return a memorized version of the callback that only changes if one of the dependencies has changed. This is used to prevent unnecessary renders.

//useReducer Hook
const [state,dispatch]=React.useReducer(uiReducer,initialState)
//dispatching action
const toggleMenu=React.useCallback(()=>dispatch({type:"TOGGLE_MENU"}),[dispatch])

Passing the value to Context Provider

Now we need to pass our state and actions in the UIContext provider. Here, I have used the useMemo hook to memorize the value.

import React from "react"

export const UIProvider=(props)=>{
const [state,dispatch]=React.useReducer(uiReducer,initialState)
//dispatching action
const toggleMenu=React.useCallback(()=>dispatch({type:"TOGGLE_MENU"}),[dispatch])

const value=useMemo(()=>({...state,}),[state])
return <UIContext.Provider value={value} {...props}/>
}

Putting the App inside provider function

This will make the state available to all the components of the app. For this we need to pass the entire app component inside the UIProvider.

//index.js
import {UIProvider} from "./UIContext"
export default function Index (){
return (
<UIProvider>
    <App/>
</UIProvider>
  )
}

Building a custom hook to consume the context

Most of the time I create a custom hook to consume context.
HereuseContext hook is used to consume Context. We need to pass the name of the Context which we wanna use in order to consume the context.

//useUI.tsx
import React from "react"
import UIContext from "./UIContext"
const useUI=()=>{
const context=React.useContext(UIContext)
return context;
}

Using useUI hook

Now it’s time to use the useUI hook. Simply, import it and call it inside the functional component you want to use. Here we will get the value isMenuOpen and toggleMenu function.

import useUI from "./hooks/useUI"
const {isMenuOpen, toggleMenu}=useUI()
export const App=()=>{
return (
<div>
<button onClick={toggleMenu}>Click </button>
<p>{isMenuOpen? "Open" : "Close"} </p>
</div>
)
}

Thank you for reading the article. If I can help you some way let me know. I will do my best.

Building a NFT marketplace frontend (Typescript + Next JS + Tailwind CSS)

Shadman Shakib — Sun, 02 Jan 2022 14:16:06 +0000

Warning: I don’t want to waste you time here is nothing very important. It’s just few of my thoughts what I’m using to build a NFT market place theme.

For a long time really wanted to build something with Next JS. But didn’t really get the time or patience to build it. First thought I would build a e-commerce website and Shopify API with it. As WEB 3.0 and NFT’s is taking over the internet I thought why not build a NFT marketplace. Design mainly taken from opensea. I’m using Typescript instead of using JavaScript. And for styling I’m using Tailwind CSS.

Typescript

TypeScript is a superset of the JavaScript language that has a single open-source compiler and is developed mainly by a single vendor: Microsoft. The goal of TypeScript is to help catch mistakes early through a type system and to make JavaScript development more efficient.

Actually, speaking truth I have never used JavaScript that much. After reading some article and watching YouTube video it was clear to me Typescript is a better option.

React JS

React is best for building complex UI. Where every single day there is development of JavaScript framework or library, React is by far the most used JavaScript library/framework to build UI. React component principle is great to write clean code and maintaining your code base.

Next JS 12

Next JS is a JavaScript framework build on the top of React which is really great to build complete website. React is mostly used to build Single page application(SPA) which not that great for SEO. In next js you have option for server side rendering(SSR) or Static Generation (SSG) which is great for SEO. Also it’s much easier to build website like this with Next Js as it has many of things like routing, image processing build in.

Tailwind CSS 3

Tailwind CSS basically is a CSS framework. It is base on utility principle. You need to add some class names in your html tags for styling. Tailwind really makes life really easy. It’s really easy to make responsive design with it. Tailwind prioritize mobile first designing. Where you first write code for mobile screen.

Why cloning can help you become a better Programmer

Shadman Shakib — Mon, 20 Sep 2021 13:54:37 +0000

If you are a self taught developer like me may face the challenge of not going beyond the basic level of programming. Watching YouTube tutorials and courses are good for understanding the basics which are really important in the beginning. But once you pass the basic level YouTube tutorials and courses are not that much helpful.

Now every developer has two options from here: either become a mediocre developer or become a pro. The only way to become a pro is by practicing real world problems. If you wanna build something of your own that’s great. But it’s not easy to come out with an idea and implement that idea. You need to learn a lot more than just coding to be able to build something that looks great. Here I believe cloning is the best strategy.

What you need to get a job is showing your work to the employer. By cloning you not only improve your development skill but also create projects that you can show to the employer. These projects also have real life use cases with beautiful UI. Building these definitely help you to become a better programmer.

There are some important things to remember when you are cloning though. Your clone may not work perfectly or look perfect and that’s fine. Just try to get as close as possible. Don’t try to make one pixel perfect design, rather try to build as many apps as possible. The more you try the better you get. Another important thing you can do is document your journey and share it on social media. It will help you build connections and meet with great people online. Let others know what you're doing and what kinds of problems you are facing. This will open many opportunities to you.