DEV Community: iskurbanov

Shopify App - Theme Extension with React + Tailwind CSS

iskurbanov — Thu, 03 Aug 2023 00:07:23 +0000

Full course available now! 👉 Shopify App Development Crash Course

In the last few years Shopify has been revamping their App CLI and all the tooling.

We now have the App Theme Extensions here to replace the Script Tag API and make it an improved experience for merchants and their customers.

Since these upgrades are so new, there is hardly any tutorials on it!

I am currently building a theme extension app for Shopify. I initially started with Vanilla JS and regular CSS but soon realized that I wouldn't be able to build the customer experience that I wanted to with those tools. Plus it would be a bad developer experience for me also.

So about 25% way through the project I decided to switch to React and Tailwind CSS for the Theme Extension. However, this wasn't so easy to setup. So I want to share the process with you in this walkthrough!

Full Tech Stack:

Shopify App CLI
Vite
Theme Extension
React + Tailwind CSS

Step 1: Clone Template Extension App

Extension Template Github Repo

Step 2: Create a test store

In your Shopify Partner Account (it's free), create a test store.

Step 3: Run the app and install it



cd your-app-name && npm install

Go through all the installation instructions

Step 4: Deploy the extension



npm run deploy

Step 5: Check the Deployment

Go to the Shopify Partner Dashboard -> Apps -> Versions

And check that the Shopify app was deployed with the extension.

Step 6: Enable Extension on Store

Run



npm run dev

Install the app by clicking on the link in #1. Then go to link in #2 and navigate to the contact page in the theme. Then select the app from the

Add the Extension in the Sections

See the text "Hello From React!" on your page!

Great! You now should have a working Shopify App Theme Extension that you can work on! 🎉 🎉 🎉

Building OpenWorldAI.com

iskurbanov — Wed, 03 May 2023 10:34:54 +0000

I just have finishing putting together the beta version of openworldai.com which right now is just a directory for AI projects.

My goal with the website is to build it out to be a hub for all things AI. That includes interesting projects, community, news, and aggregating newsletters.

This post is to share my process of building it and the tech stack that I used. I want to eventually open source the frontend.

The Stack

To build out the MVP of this project I went with the following stack:

Next.js for the React Framework
Next-Auth for authentication
Prisma for the ORM for my database
PlanetScale for my database
Tailwind CSS for styling
Preline.co for Tailwind components
ScreenshotOne for taking bulk screenshots
ChatGPT for debugging and prototyping

Future additions:

Algolia for semantic search (this is a huge addition that I believe will be seen on all websites in the near future)
Better project adding flow (the flow is too manual at the moment)
Blog (to improve SEO)

Deeper dive on how it works

Next.js
The project is currently all serverless, built with the Next.js API routes whenever they are needed.

To add projects I currently just seed the database using Prisma. Which is working quite well. I also have a seed file where I call the OpenAI API to generate the description for each project and categorize it. Doing this at scale would take way too much time so I decided to automate that process from the beginning. It is working quite well!

I also use a puppeteer scrapper to get the website text and feed it into OpenAI:

// Puppeteer Scrapper + OpenAI
const puppeteer = require('puppeteer');
const { Configuration, OpenAIApi } = require('openai');
const fs = require('fs');

const configuration = new Configuration({
  apiKey: 'sk-******',
});
const openai = new OpenAIApi(configuration);

async function generateSEOContent(prompt) {
  try {
    const response = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
    });

    return response.data.choices[0].message.content.trim();
  } catch (error) {
    console.error('Error generating SEO content:', error);
    return '';
  }
}


async function generateProjectName(prompt) {
  try {
    const response = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
    });

    return response.data.choices[0].message.content.trim();
  } catch (error) {
    console.error('Error generating project name:', error);
    return '';
  }
}

async function generateCategoriesAndSubcategories(prompt) {
  try {
    const response = await openai.createChatCompletion({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
    });

    const categoriesAndSubcategories = response.data.choices[0].message.content.trim();
    console.log('categoriesAndSubcategories:', categoriesAndSubcategories);

    const categoryMatch = categoriesAndSubcategories.match(/categories: (\[[^\]]+\])/);
    const subcategoryMatch = categoriesAndSubcategories.match(/subcategories: (\[[^\]]+\])/);

    const categories = categoryMatch ? JSON.parse(categoryMatch[1]) : [];
    const subcategories = subcategoryMatch ? JSON.parse(subcategoryMatch[1]) : [];

    return { categories, subcategories };
  } catch (error) {
    console.error('Error generating categories and subcategories:', error);
    return { categories: [], subcategories: [] };
  }
}


async function getTextFromURL(url) {
  const browser = await puppeteer.launch({ headless: "new" });
  const page = await browser.newPage();

  try {
    await page.goto(url, { waitUntil: 'networkidle2' });

    const text = await page.evaluate(() => {
      return document.body.innerText;
    });

    await browser.close();
    return text;
  } catch (error) {
    console.error(`Error fetching text from URL: ${url}`, error);
    await browser.close();
    return '';
  }
}



async function main(url) {
  const text = await getTextFromURL(url);

  const projectNamePrompt = `Get the project name for the following website content, only output the name:\n\n${text}\n\n`;
  const projectName = await generateProjectName(projectNamePrompt);


  const seoTitlePrompt = `Generate an SEO optimized title for the following website content:\n\n${text}\n\n`;
  const seoTitle = await generateSEOContent(seoTitlePrompt);
  console.log('SEO Title:', seoTitle);

  const seoShortDescPrompt = `Generate an SEO optimized short description for the following website content:\n\n${text}\n\n`;
  const seoShortDesc = await generateSEOContent(seoShortDescPrompt);
  console.log('SEO Short Description:', seoShortDesc);

  const seoLongDescPrompt = `Generate an SEO optimized long description between 1000-1500 characters for the following website content:\n\n${text}\n\n`;
  const seoLongDesc = await generateSEOContent(seoLongDescPrompt);
  console.log('SEO Long Description:', seoLongDesc);

  const categoryPrompt = `Here is a list of categories and their subcategories, only use these options: 
  text:[copywriting,email assistant,general writing,prompts,seo,social media assistant,summarizer]
  image:[art,avatars,design assistant,image editing,image generation,logo generation]
  code:[code assistant,low-code,no-code]
  audio:[audio editing,music,text to speech,transcriber]
  video:[personalized videos,video editing,video generation]
  business:[customer support,e-commerce,education assistant,finance,human resources,legal,presentations,productivity,real estate,sales,marketing]
  other:[dating,experimental,fitness,gaming,healthcare,life assistant,research,resources,search engine,travel]

  Analyze the following website content and assign it to categories and subcategories: ${seoLongDesc}
  Return output in this format:
  categories: ["categories", "categories"]
  subcategories: ["subcategories", "subcategories","subcategories"]`;
  const categoriesAndSubcategories = await generateCategoriesAndSubcategories(categoryPrompt);


  const output = {
    projectName: removeOuterQuotes(projectName),
    url: removeOuterQuotes(url),
    seoTitle: removeOuterQuotes(seoTitle),
    seoShortDesc: removeOuterQuotes(seoShortDesc),
    seoLongDesc: removeOuterQuotes(seoLongDesc),
    categories: categoriesAndSubcategories.categories,
    subcategories: categoriesAndSubcategories.subcategories,
  };

  console.log('output', output);

  fs.readFile('output.json', 'utf8', (err, data) => {
    if (err) {
      console.error('Error reading output.json:', err);
      return;
    }

    // Parse the content of the file as a JSON array
    const projects = JSON.parse(data);

    // Add the new output to the array
    projects.push(output);

    // Write the updated array back to the file
    fs.writeFile('output.json', JSON.stringify(projects, null, 2), 'utf8', (err) => {
      if (err) {
        console.error('Error writing to output.json:', err);
      } else {
        console.log('Project output added to output.json.');
      }
    });
  });
}

async function processURLs() {
  const outputArray = [];
  const urls = readURLsFromFile('urls2.json');

  for (const url of urls) {
    const output = await main(url);
    outputArray.push(output);
  }

  // You can also write the outputArray to a JSON file if needed.
  fs.writeFileSync('output2.json', JSON.stringify(outputArray, null, 2));
}

processURLs();

function removeOuterQuotes(str) {
  if (!str) return str;
  if (str.startsWith('"') && str.endsWith('"')) {
    return str.slice(1, -1);
  }
  return str;
}


function readURLsFromFile(filename) {
  const data = fs.readFileSync(filename, 'utf8');
  return JSON.parse(data);
}

This allows me to feed it an array of URLs and it returns an json object with all the data I need for the website. I then run another seed that takes a screenshot for all the websites.

Tailwind CSS

I'm not a huge fan of styling and css so I use Tailwind and component libraries where I can. I have recently stumbled upon Preline.co and loved it so I used some of their components and modified them to fit my style.

Prisma + PlanetScale

These 2 go really well together and I haven't done much configuration to it since I have set up initially. Which is what I expect from a good ORM and a database. Less time managing it and more time building.

Conclusion

That is pretty much it for the MVP. I will try to add updates as I add more features to the site. I'm really looking forward to growing it and open sourcing the frontend when it's ready.

You can checkout the website in its current form at OpenWorldAI.com

Let me know your thoughts and what you would like to see on the project!

What is the internet again?

iskurbanov — Tue, 28 Mar 2023 22:17:40 +0000

I have been in the tech scene since about 2017. Since then I have had the pleasure of learning programming, using social media, dabbling in crypto and AI, and all the other aspects of the internet that we all love and cherish. But what really is the internet? And why has it consumed our lives on such a massive level?

It is easy to get consumed by the internet and forget what it really is. When I asked myself what is the internet on the first principles level, it came down to 'information'.

There is a reason why, afterall, it is called Information Technology (IT). At the end of the day, the internet is simply a way for information to travel from one person to another.

So what does that mean?

Well it means that the underlying purpose of the this thing we call the internet is to get and send (exchange) information.

For example, you want to buy a toothbrush from a company. What are you options to communicate with them?

Walk to their store for an in-person purchase.
Call them on the telephone to place your order.
Send them a letter with your order.
Go online!

Going Online

So what is 'Going Online'? Well, it's kind of like a really advanced newspaper. Like the one from Harry Potter with the moving images. Or as we call them on the internet, GIFs. Except it doesn't just contain GIFs, but all kinds of content. AND we can interact with the content.

The internet is simply a way for us to communicate information in a convenient way to make our physical lives easier and better for each other.

Internet 1.0

Internet 1.0 was exactly that. It was a newspaper ONLINE. Companies were using the internet to replicate what they were already doing in the physical world onto the internet and allow for their information to be more easily distributed. Because the main purpose of the newspaper was to convey information. There is no other purpose for the newspaper. No, not even to start your backyard fire.

Internet 2.0

I am not sure about the exact version definitions but the next version of the internet was something like Amazon. Where the next phase of the information entered the internet. This was the purchase phase. None of this factually correct, by the way.

The purchase phase contained much more complicated information that needed to be conveyed from our person to another and involved additional technological advancements. Things like security, complicated databases, and payment processing entered the scene.

Companies started to hire more talent to be able to facilitate all of this information. And the convenience of buying books and other things online started to draw in more people.

Let's take the example of buying a book online. This simple process involved multiple exchanges of information from multiple people.

Amazon creates a website that is able to host information and process payments.
Businesses list the information about their books on Amazon.
Person logs onto Amazon and inputs their information and sends their order details to Amazon.
Amazon then digests that information and sends the relevant details to the book merchant.

All of this information exchange would be nearly impossible to facilitate within seconds without the use of the internet.

That. That is the value proposition of the internet.

Internet 3.0 (again I could be wrong with the version here)

Social. More and more information started to migrate online. People started spending more time online and consuming more information. There goes that word again, 'information'.

Now the structure of the information is incredibly complex. Hundreds of layers of technology is lubricating the exchange of information. Dozens of new industries are born and billions of lives are impacted by this new way of sending and receiving information.

Internet 4.0 and Beyond: The Future of the Internet:

As we look towards the future of the internet, we can expect a continued evolution of the ways in which we exchange information. The next phase, often referred to as Internet 4.0, will likely be characterized by the integration of advanced technologies, such as Artificial Intelligence (AI), the Internet of Things (IoT), and blockchain, among others. These technologies have the potential to further revolutionize the ways we interact, both with each other and with the devices that surround us.

Furthermore, AI will become increasingly integrated into the fabric of the internet, offering personalized experiences and streamlining our interactions with technology. While virtual assistants will become more advanced and capable of handling a wider range of tasks.

The way we use the internet might change into something we don't recognize at all. Will we need search engines if AI can answer any question we have? Or teach us anything that we might want to learn?

How will social media change if the majority of the content is AI generated?

Will the transfer of data be so seamless that it will require less of our input?

Will all of this allow us to spend more time of our days doing what we enjoy most? Or will we all be even more caught up in the pursuit of money, productivity, and happiness?

10 Free Next.js Templates and Hidden Gems 2023

iskurbanov — Tue, 28 Mar 2023 22:05:57 +0000

Bookmark it ;)

I often find myself spending a lot of time searching for free Next.js resources whenever I start a new project and they seem to be very difficult to find at times!

I ended up spending a good few days picking out the best free templates (and UI kits) from across the Google and Github and adding them all to this list.

The criteria for my list was that the resource has to be high quality, use latest versions of packages, and open source/MIT license or free.

This is an unorganized list in no particular order. I just wanted to have this for myself next time I start a new project and wanted to share it with all of you so you can bookmark this and save some time!

Let's go!

1. Beautifully designed components built with Radix UI and Tailwind CSS.

Live Demo | Github

Features:

Radix UI Primitives
Tailwind CSS
Fonts with @next/font
Icons from Lucide
Dark mode with next-themes

2. Ultimate Front-end Template

Live Demo | Github

Features:

Modern Stack (Next.js + TailwindCSS)
TypeScript support
Minimal Design
Dark Mode

3. Personal Site with Next.js 13, TailwindCSS, Framer Motion, Upstash

Live Demo | Github

Features:

Modern Stack (Next.js 13 + app-router)
TailwindCSS
Framer Motion
Tracking page views by Upstash serverless redis

4. A React Portfolio Template using Next.js and Tailwind CSS

Live Demo | Github

Features:

Modern Stack (Next.js + TailwindCSS)
Minimal Design
Dark Mode

5. DaisyUI - Use Tailwind CSS but write fewer classnames

Live Demo | Github

Features:

A plugin for Tailwind CSS
Faster development
Cleaner HTML
Customizable and themeable

6. The T3 Stack - Full-stack, typesafe Next.js starter

Live Demo | Github

Features:

Full Stack (Next.js, Prisma, Tailwind CSS)
TypeScript support
Authentication using NextAuth.js

7. Tremor - React library to build dashboards fast

Live Demo | Github

Features:

Built on top of Tailwind CSS
Full Next.js support
TypeScript support

8. Precedent - collection of components, hooks, and utilities for your Next.js project

Live Demo | Github

Features:

Full Stack (Next.js 13, Prisma)
Tailwind CSS
Radix UI
Framer Motion
TypeScript support

9. Platforms - template for site builders and low-code tools.

Live Demo | Github

Features:

Full Stack (Next.js 13, Prisma)
Tailwind CSS
PlanetScale database
Authentication using NextAuth.js
TypeScript support

10. Full Stack Personal Website by Brian Lovin

Live Demo | Github

Features:

Full Stack (Next.js 13, Prisma)
Tailwind CSS
TypeScript support

That's it! There are dozens of other templates I could have included but I wanted to keep this list short and sweet so that it can be a quick reference for your future projects.

Article is presented by OpenWorldAI.com

Next.js 13 Image Cheatsheet

iskurbanov — Thu, 16 Mar 2023 23:33:08 +0000

This cheat sheet is meant to provide an overview of the important features and usage of the Next.js Image Component, which helps to optimize and enhance your images.

Basic Usage

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  );
}

Required Props

src: The image source, can be an internal path or an external URL.
width: The rendered width in pixels.
height: The rendered height in pixels.
alt: Description of the image for screen readers and search engines.

Optional Props

loader: A custom function used to resolve image URLs.
fill: Boolean that causes the image to fill the parent element.
sizes: A string that provides information about how wide the image will be at different breakpoints.
quality: The quality of the optimized image, an integer between 1 and 100.
priority: When true, the image will be considered high priority and preload.
placeholder: A placeholder to use while the image is loading.
style: Allows passing CSS styles to the underlying image element.
onLoadingComplete: A callback function that is invoked once the image is completely loaded and the placeholder has been removed.
onLoad: A callback function that is invoked when the image is loaded.
onError: A callback function that is invoked if the image fails to load.
loading: The loading behavior of the image. Defaults to lazy.
blurDataURL: A Data URL to be used as a placeholder image before the src image successfully loads.
unoptimized: When true, the source image will be served as-is instead of changing quality, size, or format.

Configuration Options

Configure the Image Component in next.config.js. The following options are available:

remotePatterns: Configuration required for using external images.
domains: A list of allowed hostnames for external images.

Recommended way

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
}

module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

Example usages of the Image component can be found at this repo:

Image Examples

Step by step: Multi-Tenant App with Next.js

iskurbanov — Wed, 01 Mar 2023 23:23:35 +0000

Next.js now allows you to easily create a multi-tenant application using subdomains. This enables you to create web apps like Linktree, Super.so, and other apps where a user gets their own webpage for example.

Before we start, here are some additional resources:

Step 1: Create a blank Next.js app

npx create-next-app

You will be asked if you want Typescript, ESLint and other options. Hit yes for everything.

Once the app is created, open it in your code editor (VSCode).

Step 2: Deploy app to Vercel

You can do inside VSCode by opening the terminal (Command + J on Mac).

Install the Vercel CLI:
npm i -g vercel

Once that is done, go ahead and run:
vercel --prod to deploy it to production

Click on the deployment link to end up in the Vercel dashboard.

Step 3: Setup your domain

In order to use the subdomain feature in Vercel, you will need to setup your own wildcard domain. If you are a developer, you should have plenty of unused domains ;)

Mine is called buildwithnext.com

I am using Namecheap so here is how you do it:

In the Vercel dashboard add your wildcard domain

Then log into your Namecheap account and add the following Nameserver DNS urls

When you add a wildcard domain, Vercel will automatically populate all the other ones for you.

Step 4: Setting up routing in Next.js

Add a new folder in the pages folder called _sites and then another one in there called [site]. Then add an index.tsx file in the [site] folder.

Your new folder structure should now look like this:

pages
└───api
└───sites
│      │
│    [site]
│      │  index.tsx
package.json
etc

Inside the index.tsx file, add the following code:

import { useRouter } from "next/router";
// we will create these in the next step
import { getHostnameDataBySubdomain, getSubdomainPaths } from "@/lib/db";

// Our types for the site data
export interface Props {
  name: String
  description: String
  subdomain: String
  customDomain: String
}

export default function Index(props: Props) {
  const router = useRouter()

  if (router.isFallback) {
    return (
      <>
        <p>
          Loading...
        </p>
      </>
    )
  }

  return (
    <>
      <h1>
        {props.name}
      </h1>
    </>
  )
}

// Getting the paths for all the subdomains in our database
export async function getStaticPaths() {
  const paths = await getSubdomainPaths()

  return {
    paths,
    fallback: true
  }
}

// Getting data to display on each custom subdomain
export async function getStaticProps({ params: { site } }) {
  const sites = await getHostnameDataBySubdomain(site)

  return {
    props: sites,
    revalidate: 3600
  }
}

Step 5: Adding Middleware and mock data

A middleware file allows us to intercept the api calls to our backend and do something with it. In this case we are using the middleware to determine what hostname the api call is being made for and display the correct data.

Let's create a middleware.ts file in the root of our project directory

pages
└───api
└───sites
│      │
│    [site]
│      │  index.tsx
middleware.ts
package.json
etc

Inside of the middleware.ts file, add this code:

import { NextRequest, NextResponse } from 'next/server'
import { getHostnameDataOrDefault } from './lib/db'

export const config = {
  matcher: ['/', '/about', '/_sites/:path'],
}

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl

  // Get hostname (e.g. vercel.com, test.vercel.app, etc.)
  const hostname = req.headers.get('host')

  // If localhost, assign the host value manually
  // If prod, get the custom domain/subdomain value by removing the root URL
  // (in the case of "subdomain-3.localhost:3000", "localhost:3000" is the root URL)
  // process.env.NODE_ENV === "production" indicates that the app is deployed to a production environment
  // process.env.VERCEL === "1" indicates that the app is deployed on Vercel
  const currentHost =
    process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
      ? hostname
        .replace(`.buildwithnext.com`, "")
      : hostname.replace(`.localhost:3000`, "");



  const data = await getHostnameDataOrDefault(currentHost)

  // Prevent security issues – users should not be able to canonically access
  // the pages/sites folder and its respective contents.
  if (url.pathname.startsWith(`/_sites`)) {
    url.pathname = `/404`
  } else {
    // console.log('URL 2', req.nextUrl.href)
    // rewrite to the current subdomain under the pages/sites folder
    url.pathname = `/_sites/${data.subdomain}${url.pathname}`
  }

  return NextResponse.rewrite(url)
}

There is a lot happening here but I tried to add more comments to clear things up. It might look scary at first but try going line by line and reading the comments. It will eventually make sense.

Now let's go ahead and add a lib folder in the root of our project directory and a db.ts file inside of it.

lib
└───db.ts
pages
└───api
└───sites
│      │
│    [site]
│      │  index.tsx
middleware.ts
package.json
etc

Inside of the db.ts file, add the following code:

// Dummy data to be replaced with your database
const hostnamesDB = [
  {
    name: 'This is Site 1',
    description: 'Subdomain + custom domain',
    subdomain: 'test1',
    customDomain: 'custom-domain-1.com',
    // Default subdomain for Preview deployments and for local development
    defaultForPreview: true,
  },
  {
    name: 'This is Site 2',
    description: 'Subdomain only',
    subdomain: 'test2',
  },
  {
    name: 'This is Site 3',
    description: 'Subdomain only',
    subdomain: 'test3',
  },
]
const DEFAULT_HOST = hostnamesDB.find((h) => h.defaultForPreview)

/**
 * Returns the data of the hostname based on its subdomain or custom domain
 * or the default host if there's no match.
 *
 * This method is used by middleware.ts
 */
export async function getHostnameDataOrDefault(
  subdomainOrCustomDomain?: string
) {
  if (!subdomainOrCustomDomain) return DEFAULT_HOST

  // check if site is a custom domain or a subdomain
  const customDomain = subdomainOrCustomDomain.includes('.')

  // fetch data from mock database using the site value as the key
  return (
    hostnamesDB.find((item) =>
      customDomain
        ? item.customDomain === subdomainOrCustomDomain
        : item.subdomain === subdomainOrCustomDomain
    ) ?? DEFAULT_HOST
  )
}

/**
 * Returns the data of the hostname based on its subdomain.
 *
 * This method is used by pages under middleware.ts
 */
export async function getHostnameDataBySubdomain(subdomain: string) {
  return hostnamesDB.find((item) => item.subdomain === subdomain)
}

/**
 * Returns the paths for `getStaticPaths` based on the subdomain of every
 * available hostname.
 */
export async function getSubdomainPaths() {
  // get all sites that have subdomains set up
  const subdomains = hostnamesDB.filter((item) => item.subdomain)

  // build paths for each of the sites in the previous two lists
  return subdomains.map((item) => {
    return { params: { site: item.subdomain } }
  })
}

export default hostnamesDB

This one is pretty self explanatory. We basically have some dummy data that we use to get the subdomain and the data to display on the frontend.

Again, go line by line and read the comments.

Step 6: Test the app and deploy

We can now run npm run dev to test the app.

Navigate to localhost:3000 (make sure you are running on localhost:3000 because that's what we put in the middleware.ts file).

Now you can try to go to test2.localhost:3000. The content should change to This is Site 2

It should work the same way if you deploy your application now! vercel --prod

Step 7: Next Steps

You can now replace the dummy data with a database such as PlanetScale and use the Prisma ORM to have your users setup their own subdomain and add data to their sites! I'll be adding more tutorials on how to do that so stay tuned.

I hope this article was helpful!

Low-code solutions for Indie Hacking in 2023?

iskurbanov — Tue, 07 Feb 2023 13:16:42 +0000

I initially pursued becoming a developer because I wanted to build my ideas out and learning to code seemed to be the easiest way. You can just come up with solutions to problems anywhere in the world using just your laptop. Being more on the introverted side, I never liked to be in the "field" talking to prospects and selling face to face (door to door) or on the phone (I've tried and I sucked at it).

Learning software development was empowering, but at the same time it didn't make things much easier right away. You still have to pick a programming language, framework, and the learning never seems to stop.

What about No-Code?

Over the past few there has been an explosion of low-code and no-code solutions but it still feels like there isn't enough. There is still a big barrier between your idea and the product. Additionally, many developer entrepreneurs don't want to pay a monthly fee for something they can build themselves. I can relate.

Why pay $29/month for something that can easily be deployed to Vercel for free? Especially if you are just testing out an idea.

Templates?

Wordpress and Shopify themes have a good model for getting a solution up and running quickly. And recently there have been more code-oriented templates on the market like TailwindUI and such. But those are just landing page templates. What about if you want to build something fullstack? Like a job board or a directory. You will have to dig through GitHub and be lucky to stumble upon a template. But even then, you will need to spend about a week learning the stack that is used and most times those templates aren't production level solutions.

So what is the solution?

Here is the tech stack that I believe is the most flexible for developers who are looking to build our their ideas and launch something to production in 2023:

1. Next.js

Next.js is quickly becoming a Fullstack framework where you can build most of what you need with the API routes.

2. Prisma

If you need a database for storage, you can use Prisma and pretty much any database provider that you need like PlanetScale or such.

3. Sanity

If you need a CMS, there are many solutions out there. However, with the recent update, Sanity now allows you to host your Sanity CMS backend on a Next.js route. So your hobby/side project will literally have $0 in upstart costs.

Stay tuned as I will be releasing tutorials and templates for this tech stack to help you quickly go from idea to launch!

2023: Next.js & Remix & Qwik for Headless

iskurbanov — Wed, 04 Jan 2023 02:31:37 +0000

Article brought to you by buildnextshop.com

What Happened?

The last few years changed everything for eCommerce worldwide. For many companies, having an online presence went from an afterthought to a necessity.

Choosing the right technologies in 2020-2022 is not easy, however. Companies are faced with a lot of difficult decisions regarding their tech stack and the direction they wish to invest in.

Who cares?

While out of the box solutions like Shopify themes, Wordpress and WooCommerce seem like a quick way to get up and running, many companies are running into issues with scalability and performance.

This is where Headless comes into play.

Headless Architecture allows for teams to quickly get up and running and not be locked into a rigid solution down the road.

Here are the top solutions for building Headless eCommerce stores in 2023.

1) Next.js

Next.js is definitely leading the 'all-things-frontend' movement right now. And next.js GitHub repo has just overtaken create-react-app in stars!

I have been really enjoying developing with Next.js and the team is continuously pumping out one great release after another.

It has gotten to a point where Next.js is becoming a complete full-stack solution replacing a backend in most use-cases.

2) Remix

A close runner-up to Next.js is quickly becoming Remix. From the copy on their website "While you were waiting for your static site to build, distributed web infrastructure got really good."

It is another full-stack framework that is based on React (with a bit of a learning curve). They have also recently joined the Shopify team to continue building out the product. The Shopify team is rebuilding a lot of the Hydrogen framework to incorporate Remix.

Potentially Remix will be to Shopify like React is to Facebook. Have no idea what that means but sounds exciting.

It's good to note that Next.js has also been expanding their rendering stack to complement Static Site Generation (SSG) with more reliance on Server Side Rendering (SSR) and Server Components.

3) Qwik by Builder.io

Builder.io has been quickly growing into a very important player in the CMS field and recently launched their own framework. I have personally not had to the time to create anything with it but from the feedback on twitter, it seems to be a great HTML first alternative to the other 2 frameworks. It promises features such as zero loading, lazy loading, reduced rendering, scalability, and reducing the reliability on heavy JavaScript packages.

While also based on React, there is a bit of a learning curve when compared to Next.js.

If you want to learn how to build a Headless eCommerce store I have recently released a public Github with a Next.js + Shopify + Tailwind CSS Starter and a Course to accompany it (for those who want guidance on how to quickly add these technologies to your arsenal).

Check it out here!
https://github.com/iskurbanov/shopify-next.js-tailwind

Landing page for the course (Made with Next.js and Tailwind CSS): BuildNextShop.com

Next.js Image Component Cheatsheet

iskurbanov — Sat, 14 May 2022 22:51:51 +0000

Cheatsheet for Next.js Image Component with common use cases

After the introduction of the Image component in Next.js version 10, it is rare to use Next.js with the regular <img /> component and is now even considered incorrect! This Article is to help you learn and remember the most common uses cases for the Next.js Image component.

Quick Cheatsheet:

1. with predefined width and height:

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <Image
      src={example}
      alt="Alt text for the picture"
      width="350px"
      height="300px"
    />
)

2. with predefined width and height with layout prop:

With the layout prop, you get 5 options:

'fill'
'responsive'
'intrinsic'
'fixed'
and now 'raw'

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <Image
      src={example}
      alt="Alt text for the picture"
      width="350px"
      height="300px"
      layout="responsive" 
  />
)

with layout fill (dynamic image size)

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <Image
        src={example}
        alt="Alt text for the picture"
        layout="fill"
        objectFit="cover"
        quality={100}
   />
)

3. styling using Tailwind CSS

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <div className="relative w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
        <Image
           src={product.image}
           alt={product.title}
           layout="fill"
           objectFit="cover"
       />
    </div>
)

4. Next.js Image as a background image

import Image from 'next/image'
import example from '../asset/myimage.png'

const Background = () => (
  <div>
    <ViewSource pathname="pages/background.js" />
    <div className="fixed h-screen w-screen overflow-hidden
  -z-10">
      <Image
        alt="Mountains"
        src="/mountains.jpg"
        layout="fill"
        objectFit="cover"
        quality={100}
      />
    </div>
  </div>
)

In the comments below, suggest some of your own favorite/most common use cases!

Learn more about Next.js at BuildNextShop.com

Get Started with Shopify's New Headless Hydrogen Framework

iskurbanov — Tue, 15 Mar 2022 19:46:18 +0000

Checkout examples of stores build with Hydrogen here:
hydrogentemplates.io

Headless Ecommerce is carried out in multiple ways by many types of developers. Shopify has recently launched its own opinionated framework, specifically made for headless custom Shopify storefronts, so let's take a closer look.

So what is Shopify Hydrogen?

According to Shopify, Hydrogen is a React based framework from Shopify that allows us to build custom headless Shopify storefronts, giving developers everything needed to build fast, personalized and dynamic E-commerce Shopify experiences.

If you want to take a deeper dive, here is a great article by Ilya Grigorik, who is a principal engineer at Shopify and an author of a book on high-performance browser networking.

First thing you will notice is that Hydrogen is an opinionated frameworks and is shipped with Tailwind CSS, which I personally think is great.

So why should we care about using hydrogen and how is this going to work? Let's take a deeper look, then walk through the getting started portion of the Hydrogen documentation:

1. SSR & Server Components

When we look at the architecture, hydrogen is built on top of react 18, so it comes with all the cool react 18 features like streaming SSR (server-side rendering), progressive hydration, server components, data-fetching on servers and the suspense component.

Before making any customizations, I wanted to briefly look at Streaming server-side rendering (SSR), Server components (link) and the hydrogen file naming convention.

Let's talk about Streaming SSR.
When the client loads a page, you have time to first byte (TTFB), and the first and largest contentful paints (FCP, LCP).

With client side rendering:

As you can see here, the time to first byte is fast, but the largest paint is a little delayed and in server side rendering the time to first byte lands somewhere in the middle, but the largest paint is faster.

However, when you compare Streaming server side rendering, SSR unlocks fast non-blocking first render. So all that means is it will squish the two processes together and run them side by side, which results in a faster TTFB and FCP and LCP, which is obviously better.

And this is all powered by the suspense component.

There is an SSR Demo here that has been artificially slowed down so you can adjust the delays and see how it all works.

Server Components
Now let's look at Server/ Client components and the Hydrogen rules and naming conventions related to them.

As you can see, there's a new naming convention in hydrogen with dot .server and the dot .client. That matters because in 'normal' react (.JS .JSX) files behave like we expect. In Hydrogen the .JS .JSX component behavior we expect are actually .client.JSX components, which can be confusing at first.

2. Creating a Hydrogen App & Shopify Store Connection

Shopify Partners Account
Now that we've covered some basics, we're ready to dive in.
If you already have a Shopify Partners account and development store, you can just skip to the next step.

If you don't have a Shopify partner account, you can join for free here. Proceed to log in, click on Stores in the top left, then Add store in the top right.

Then choose Development store as the store type and fill out the required information and click Save.

Shopify Storefront Access Token

So now the only thing we need to get started with the hydrogen framework is to log into our Shopify partner store and grab a storefront access token.

Once were in the store admin area we go to the Apps tab and click Develop apps and follow the accept screens:

Select all of the scopes for the Storefront API, hit Save and then Install App.

Finally, just copy the Storefront API access token to your clipboard.

Creating a Hydrogen App

All we need to create a hydrogen app is to head over to the hydrogen installation page and install Hydrogen based on your preferred platform/method.

Since I'm on Windows with Node, I'll just use NPX:



npx create-hydrogen-app (name your app)

Then run:
cd your-app
npm install --legacy-peer-deps
npm run dev

And here it's asking us to name the app. I'm just going to name it philips_hydrogen

We can then CD into philips_hydrogen and run these commands.

This will install the peer dependencies and then run our app using NPM run dev.

After running our app, we end up on the Hydrogen demo store home page at localhost:3000

What we want to do first is change the storefront access token and connect our storefront.

Open up the folder structure, and go in to shopify.config.js

Paste in the access code in the 'storefrontToken' field, and then you're going to need to paste in your domain name as shown above.

Save this and you should see your connected store information on the home index page of the Hydrogen demo store.

3. Basic Customization

Now that we have our storefront access token connected, we can jump over to VS code to make our first basic edits. The first change will be to update the existing h2 title from hello, snowboards to hello, Hydrogen. We just need to go to the welcome.server.jsx file, which is located in the src/components folder.

As we can see, the h2 title has been updated.

Next, in the same file we will use Tailwind CSS to change the background to red-500:

And we see the background has updated color.

Now we're going to do a bit of data fetching from the server component. There are two custom hooks that Shopify adds to hydrogen, useShopQuery & useQuery. useQuery is for all 3rd party APIs, similar to fetch and Axios, except done in a way that supports the suspense component.

useShopQuery is used to fetch data from your Shopify store front, using the storefront access token.

All we need to do is pass a query like this:

Lets get started on that query by using GraphQL.
I want to quickly point out, the demo store comes with the GraphiQL Explorer.

We will have it here as an extension off of our localhost:3000/graphql

If you look at the query:

We're going to add the shop name here:

Because we're in a server component, we can console log the data, (shop name)

and this will display inside of our VSCode terminal.

As we see, the shop name is showing:

4. Product Page Edits

So now we're going to go do a few customizations of the product page. We're going to start by editing the layout in Layout.server.jsx

And we will replace it with this code.

As we see right here, we have some localization information. We have the shop name, a homepage link and the cart, which has functionality. We also have the footer below.

And so when we replace this code with the more basic code above, that is just querying the shop name and returning no components:

We can see that we lose the header, there's no localization, the shop name has changed font size and there is no cart.
We've also lost the gradient background and the footer below.

Moving on, we're going to create a product list using our product cards.

The product list is a list of product cards that are usually mapped in from the connected store.
The product card also comes included with hydrogen as a shared component by default, which is able to be used on both client and server components.

As we can see now, there are two white borders on the top and the bottom, and it does a slight zoom in effect when hovering, but when we replace this code:

The only visual change that we see here is the white borders are gone and there's no more zoom in effect.

Now we're going to add our product card to the product list.
We will create a new file in src/components, call it productList.jsx .

And we'll be adding this product list to the index page.
So what we're going to do is replace the current index code with this:

As we can see, we now have our product list.

Now we can create then add a load more button component, enabling us to show the rest of our product cards.
This will be a client component, so we can create that in the same src/components folder using this code:

And then what we're going to then do is import the loadMore Component to our index page
And when we save this time, we can see the load more button.

Product Details

So now we're going to do our last edit, which will be in ProductDetails.client.jsx So the first thing we'll change is the header style. We're going to look for the H1 in the file, and we're going to change the text color to purple 500.

Moving on, next we're going to update and remove components.
It's basically saying you might want to update, add to bag, to read, add to cart, which is very simple and remove the, buy it now button.

So we are going to find the following code:

and we're going to replace this code with this code here.

This is removing the buy now button, keeping the add to cart, button and changing the add to bag to read, add to cart:

And as we can see the buy it now button has been removed and add to bag has been changed to add to cart.

5. Color Swatches

Okay so we're going to continue editing our product options. We will add some color swatches and this is not in the documentation, but it's a fairly quick and easy, edit for us to do, to make this look better.

First we need to open the productOptions.jsx file. We can see the ternary conditional line here, and we're going to add in a few lines of code:

Right below this div, we can just open up JavaScript notation, and we can then check if name of our option includes the word 'color':

So if the name includes color, then we will put in the extra div and span you see above.

The values are mapped and each individual color would be one of the values and that will set the background color of each color swatch.

Okay awesome, we now have our color swatches showing. And these colors are actually coming from the back end in the Shopify store and the store admin back-end product page.

So that's it! I hope you enjoyed our dip into the Shopify Hydrogen framework.

Full Docs and Image Source

Article written by Philip Beauford for buildnextshop.com

Checkout the full tutorial at BuildNextShop.com where we create a fully production ready Shopify Headless store using Next.js and later adapt it to Hydrogen!

Shopify's Hydrogen vs. Next.js - Headless Battle

iskurbanov — Tue, 08 Mar 2022 19:56:42 +0000

Article written by Philip Beauford for buildnextshop.com

Checkout the current best Hydrogen examples here:
hydrogentemplates.io

How the Shopify Hydrogen Framework compares to Next.js for Headless Architecture

Shopify has recently released its own opinionated React framework, named Hydrogen. As Shopify states, Hydrogen was built as a solution for developing custom headless Shopify storefronts. The first time I experimented with a Hydrogen demo project, I immediately noticed it felt very similar to Next.js.

The architecture and overall implementation is very similar to Next but there are a few key subtle differences in the approach from both. Next even has their own commerce solution with live demo that already support Shopify out of the box.

So then why was Next.js not enough? Why did Shopify feel the need to create their own Hydrogen framework?

Let's take a quick look at both frameworks for a few comparisons:

Hydrogen vs Next.js
When looking at the architecture, Hydrogen is using Vite which uses goLang, whereas Next uses SWC compiler which is built with Rust. So it's interesting to see the difference in choice of high performance languages.

Hydrogen comes with multiple custom Shopify Components, Hooks & Utilities which is obviously better for a more streamlined Shopify development experience. Whereas Next.js currently has no available Shopify Components requiring more custom work to be done.

Hydrogen also ships out of the box with Tailwind CSS and although Next.js can easily integrate tailwind, it is not included in the starter Next.js project.

A few similarities are both Hydrogen and Next use a page based routing system out of the pages directory and both Streaming SSR & React Server Components are available on each framework. However, Shopify claims to be more committed to Streaming SSR and Server Components overall, with Hydrogen being built around server components from the ground up.

Benefits of Hydrogen

In these articles Shopify Principal Engineer Ilya Grigorik mentions 5 general areas that separate Hydrogen from the rest:

Streaming server-side rendering for fast non-blocking first render powered by Reacts Suspense Components.
React Server Components for efficient, post-render component-level state updates.
Built-in server and client data fetching primitives with smart cache defaults.
Flexible page and sub-request cache policies to power dynamic and edge delivery.
Oxygen Hosting.

All of these are great but not all are technically 100% exclusive to Shopify.

Options 3 and 4 are essentially general descriptions of custom solutions to optimize data use over the network with some improvement in user experience. As for Streaming SSR and React Server Components, they rely on React 18 features that have no official release, but are not exclusively provided by Hydrogen. Other frameworks will (and do) have the same or similar features available.

For example, Next.js, with its large developer base, supports both of these React 18 features, although currently in Alpha.

If all of that is true, why is Hydrogen still a likely better solution for Headless Shopify development?

Hydrogen appears to have a slight advantage when it comes to Streaming SSR & React Server Components, as mentioned by Ilya Grigorik:

“One advantage that we have at Shopify, even compared to let’s say Next.js, is that we’re starting anew. We don’t have an existing ecosystem of apps that we need to move over to this new world of React Server Components.” “We’re big fans of what they’re building,” he said regarding Vercel and Next.js, “and in many ways the architecture is similar. But they are approaching it from another direction."

Vercel is about:

Build it
Push it to the edge
Then add layers of dynamic capabilities.

"We think that given the needs of commerce, we actually need to start with the inverse. Which is, assume everything is dynamic by default, and then expose the right APIs and capabilities to be static.”

Grigorik continued,,

“This is not a debate about dynamic vs. static. You need both.” “Some, or perhaps even substantial parts of some storefronts” can be “cached and served from the edge” (the traditional JAMstack model).

But Shopify customers that choose Hydrogen will be building their storefronts fresh, using JavaScript. Shopify was “willing to make some more opinionated and forward-looking bets about technology choices,” said Grigorik. So it chose to build around React Server Components and create a “dynamic by default” framework.

“We saw a gap,” Grigorik summarized, “when we surveyed the existing tools, where it’s really hard — not impossible, but really hard — to get server-side rendering and dynamic commerce working well together.”

So it seems although both frameworks are perfectly suitable for ECommerce, Hydrogen is definitely the most aligned with the Shopify ecosystem, as I would expect, but also most aligned with any merchant looking for a Dynamic first approach.

The real key to the Shopify edge in all of this will be Oxygen, Shopify's hosted V8 worker runtime enabling server-side requests to the Storefront API with localhost speed.

Integrating Hydrogen into Next.js

For those who ask, why can't I just use both? There is a hybrid approach being discussed, which utilizes both by integrating custom Hydrogen components into a Next.js project.

To integrate Hydrogen components in your Next.js project, first we need to install some packages:

npm install @shopify/hydrogen next-transpile-modules --legacy-peer-deps --save

Next we need to instruct Next.js to compile @shopify/hydrogen from ESM (ES Modules) to CJS (CommonJS) by editing next.config.js with this block:

const withTM = require("next-transpile-modules")(["@shopify/hydrogen"]);
module.exports = withTM({
  reactStrictMode: true,
});

Shopify will be supporting multiple export types in a future version of Hydrogen so this is a temporary step for now.

To fetch Shopify storefront data in your Next.js project, Shopify recommends calling the Storefront API on the server similar to this code (example only):

// pages/products/[handle].jsimport {Product} from '@shopify/hydrogen';


export async function getStaticProps({params}) {
  const {data} = getShopifyData({query: QUERY, variables: {handle: params.handle}});

  return {
    props: data,
    revalidate: 5,
  };}


export function Product({data}) {
  return (
    <Product product={data.product}>
      {/** ... */}
    </Product>
  );}

There are a few current limitations when using Hydrogen inside of Next.js. You are not able to use the useShopQuery custom hook as it is meant to be run in Hydrogens Server Components.

Josh Larson of Shopify recommends writing a utility file like getShopifyData({ query, variables }), which takes your storefront API credentials and makes a GraphQL query that you can then use in Next.js functions.

Here is just one example of a potential getShopifyDatautility:

const storeDomain = "hydrogen-preview.myshopify.com"
const storefrontToken = "3b580e70970c4528da70c98e097c2fa0"


export async function getShopifyData(query, variables) {
  return await fetch(`https://${storeDomain}/api/2021-10/graphql.json`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      "X-Shopify-Storefront-Access-Token": storefrontToken
    },
    body: JSON.stringify({
      query,
      variables
    })
  }).then((response) => {
    return response.json()
  })
}

It will be interesting to see how Oxygen impacts the growth of Shopify's new Hydrogen framework. Although if Hydrogen does prove to be the best 'dynamic first' React framework for Ecommerce, some good early growth could be expected.

For an example of how to use Shopify with Next.js and Tailwind CSS check out this sample starter project: https://github.com/iskurbanov/shopify-next.js-tailwind

Checkout the example website and full tutorial at BuildNextShop.com where we create a fully production ready Shopify Headless store using Next.js!

How to Dynamically updated Next.js Static Pages with SWR

iskurbanov — Fri, 18 Feb 2022 01:21:51 +0000

Article brought to you by buildnextshop.com

This is a continuation to the Shopify + Next.js + Tailwind CSS article that I wrote in September 2021. It already has over 7000 views!

If you have been using React, you probably already know that Next.js is a pretty sweet framework that provides a bunch of features on top of React. Some of the popular ones include: SSR (Server-side Rendering), SSG (Static-site Generation), simplified dynamic routing, easy deployment with Vercel, and much more.

In this article I would like to introduce you to SWR (stale-while-revalidate) package that is also created by the Vercel team.

SWR allows us to add CSR (Client-side rendering) to our static pages generated by Next.js.

So why would we want to add SWR? Well, SSG pages give us a great speed advantage, which is super important in e-commerce. But it also has a disadvantage that we need to rebuild and redeploy any changes that happen to the static pages. This becomes a problem when we want to update small components of our app.

I think this example will give you a good understanding of the power of SWR so let's dive right in!

To follow along with this example, you will need to:

set up a Shopify private app (you can refer to this youtube tutorial on our channel)
clone this Github repository

1. Setting up our Next.js /api/available.js file

The /api folder in Next.js is a bit like magic. It allows us to build an API endpoint right in our frontend application. They are server-side only bundles and won't increase your client-side bundle size.

build-next-shop
 ┣ lib
 ┣ node_modules
 ┣ pages
 ┃ ┗ api 
 ┃   ┗ hello.js *
 ┣ public
 ┣ .env.local
 ┗ package.json
....

Let's remove everything in the hello.js file, rename it to available.js and paste in this code:

export default async function available(req, res) {
  const { query: { id } } = req

  const domain = process.env.SHOPIFY_STORE_DOMAIN
  const storefrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESSTOKEN

  async function ShopifyData(query) {
    const URL = `https://${domain}/api/2021-07/graphql.json`

    const options = {
      endpoint: URL,
      method: "POST",
      headers: {
        "X-Shopify-Storefront-Access-Token": storefrontAccessToken,
        "Accept": "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ query })
    }

    try {
      const data = await fetch(URL, options).then(response => {
        return response.json()
      })

      return data
    } catch (error) {
      throw new Error("Products not fetched")
    }
  }

  async function getProduct(handle) {
    const query = `
  {
    productByHandle(handle: "${handle}") {
      id
      variants(first: 25) {
        edges {
          node {
            id
            availableForSale
          }
        }
      }
    }
  }`

    const response = await ShopifyData(query)

    const product = response.data.productByHandle ? response.data.productByHandle : []

    return product
  }

  const products = await getProduct(id)

  res.status(200)
  res.json(products)
}

So what is happening in this code?

We are creating and exporting and async function available with two parameters: request and response.
We are deconstructing the req.query.id variable to get the id
Grabbing our secret values from our .env file and assigning them to domain and storefrontAccessToken variables.
Setting an options variable that contains our Shopify Graphql URL, method of request, headers, and our query body.
We created a getProduct function that receives a handle (which we called id in our case).
We save the results of our getProduct function into a products variable.
We return the products variable in json format to our Next.js component that calls the API.

2. Updating our ProductForm.js component

build-next-shop
 ┣ .next
 ┣ components
 ...
 ┃ ┗ ProductForm.js 
 ┣ context
 ┣ lib
 ┣ node_modules
 ┗ pages
....

Let's import useSWR from "swr" and import axios from "axios" add our custom fetcher function at the top of the component

import useSWR from "swr"
import axios from "axios"

const fetcher = (url, id) => (
  axios.get(url, {
    params: {
      id: id
    }
  }).then((res) => res.data)
)

This function replaces the default swr fetcher function and replaces it with axios (read more about it here)

Then we will use the useSWR hook inside of our component:

...
export default function ProductForm({ product }) {

  const { data: productInventory } = useSWR(
    ['/api/available', product.handle],
    (url, id) => fetcher(url, id),
    { errorRetryCount: 3 }
  )
...
// rest of the component not shown

Now we can console.log(productInventory) and grab the data from our API!

3. Add a useEffect hook to update our state

Let's add a new state:

  const [available, setAvailable] = useState(true)

and then we can update it with our useEffect hook like this:

 useEffect(() => {
    if (productInventory) {
      const checkAvailable = productInventory?.variants.edges.filter(item => item.node.id === selectedVariant.id)

      if (checkAvailable[0].node.availableForSale) {
        setAvailable(true)
      } else {
        setAvailable(false)
      }
    }
  }, [productInventory, selectedVariant])`

First we are checking if productInventory was fetched. Then we find the variant that is selected and search for it in our productInventory variable and update our button state based on the result.

4. Update the button UI based on the availability like this:

return (
    <div className="rounded-2xl p-4 shadow-lg flex flex-col w-full md:w-1/3">
      <h2 className="text-2xl font-bold">{product.title}</h2>
      <span className="pb-3">{formatter.format(product.variants.edges[0].node.priceV2.amount)}</span>
      {
        product.options.map(({ name, values }) => (
          <ProductOptions
            key={`key-${name}`}
            name={name}
            values={values}
            selectedOptions={selectedOptions}
            setOptions={setOptions}
          />
        ))
      }
      {
        available ?
          <button
            onClick={() => {
              addToCart(selectedVariant)
            }}
            className="bg-black rounded-lg text-white px-2 py-3 mt-3 hover:bg-gray-800">
            Add To Card
          </button>
          :
          <button
            className="rounded-lg text-white px-2 py-3 mt-3 bg-gray-800 cursor-not-allowed">
            Sold out!
          </button>
      }
    </div>
  )

Here we create a ternary to check our available state and choose which button to display based on the boolean value.

I hope you enjoyed the tutorial!

Sample Starter Project: https://github.com/iskurbanov/shopify-next.js-tailwind

Checkout the example website and full tutorial at BuildNextShop.com where we create a fully production ready Shopify Headless store using Next.js!