ecommerce - freeCodeCamp.org

How to Build Your First Shopify App: A Beginner’s Guide

Manish Shivanandhan — Thu, 08 Jan 2026 21:38:07 +0000

Shopify powers more than a million online stores around the world.

Many store features you see every day, such as discounts, bundles, and order fulfillment are built using apps. These apps are created by developers to extend Shopify and solve real problems for merchants.

If you know JavaScript and basic web development, you already have enough skills to start building Shopify apps.

In this tutorial, you’ll learn what a Shopify app is, how Shopify apps work, and how to set up your development environment. You’ll also see three real examples of popular Shopify apps and how they are built.

What We’ll Cover

What Is a Shopify App?
How Shopify Apps Work
Setting Up Your Development Environment
Understanding Shopify APIs
Case Study One: Bundle and Discount Apps
Case Study Two: Printful and Order Fulfilment
Case Study Three: Shiprocket and Shipping Rates
Testing Your Shopify App
Preparing for the Shopify App Store
Conclusion

To follow this tutorial, you should be comfortable with JavaScript and APIs. Some experience with Node.js and npm will help, but you do not need to be an expert. No prior experience with Shopify is required.

What Is a Shopify App?

A Shopify app is a web application that connects to a Shopify store. The app runs on your own server or a serverless platform.

It talks to Shopify using secure APIs. When a merchant installs your app, they allow it to access certain store data. This could include products, orders, or customers, depending on the permissions given.

There are different types of Shopify apps.

Public apps are listed on the Shopify App Store and can be installed by any merchant. These apps must pass a review before approval.

Custom apps are built for a single store, and private apps are used only inside a company.

Most Shopify apps include backend code that calls Shopify APIs, a frontend interface shown inside the Shopify Admin, storefront features that shoppers can see, and webhooks that react to store events.

How Shopify Apps Work

When a merchant installs your app, Shopify starts an OAuth process. This is a secure way to ask the merchant for permission.

Once approved, Shopify sends your app an access token. This token allows your app to make API calls to the store.

Shopify apps can add screens inside the admin area using App Bridge and Polaris. These tools make your app feel like part of Shopify. Apps can also add features to the storefront using theme app extensions.

Shopify provides both REST and GraphQL APIs. REST is easy to use, but GraphQL is faster and more efficient. Today, most new apps use GraphQL.

Setting Up Your Development Environment

Before you start coding, you’ll need a few tools. You’ll need to install Node.js and the Shopify CLI. You’ll also need a Shopify Partner account. The Partner account lets you create apps and test them without cost.

The Shopify CLI helps you create a starter app quickly. You can generate a working app by running these commands:

shopify app create node
cd my-shopify-app
npm install
shopify app serve

This creates an app with login, authentication, and an embedded admin interface. It also sets up a secure tunnel so Shopify can reach your local server while you develop.

Understanding Shopify APIs

Shopify provides APIs for almost every part of a store. This includes products, orders, customers, and shipping. Your app can only access data that the merchant has allowed during installation.

Here’s a simple example of fetching products using the GraphQL Admin API:

import fetch from "node-fetch";

async function getProducts(shop, token) {
  const query = `
  {
    products(first: 5) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
  `;
  const response = await fetch(
    `https://${shop}/admin/api/2025-10/graphql.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Access-Token": token
      },
      body: JSON.stringify({ query })
    }
  );
  const data = await response.json();
  return data.data.products.edges;
}

This function gets the first five products from a store. The access token comes from the OAuth process during app installation.

Case Study One: Bundle and Discount Apps

Bundle and discount apps help merchants offer deals like “Buy two, get ten percent off.” These apps must work with Shopify’s pricing rules and checkout system. A popular example is the Bundle Deals app, which shows offers on product and cart pages.

These apps usually add small UI elements to the storefront using theme app extensions. They use Shopify’s Discount APIs to apply offers safely.

They don’t change checkout directly. Instead, they enhance the storefront and let Shopify handle the final pricing.

A storefront script might look like this:

fetch("/apps/bundle-deals/api/bundles?productId=gid://shopify/Product/123")
  .then((res) => res.json())
  .then((bundles) => {
    displayBundles(bundles);
  });

This code runs in the store’s frontend. It fetches bundle rules from your app server and shows them to shoppers.

Case Study Two: Printful and Order Fulfilment

Printful is a popular app that connects Shopify stores with a print-on-demand service (for example, T-shirts, Mugs, and so on). When a customer places an order, Printful receives the order and starts production.

Apps like this need access to orders and reliable event handling. They use webhooks to listen for new orders. When Shopify sends a webhook, the app forwards the data to an external system.

Here is a simple webhook example:

app.post("/webhooks/orders/create", async (req, res) => {
  const order = req.body;

await printfulClient.createOrder({
    external_id: order.id,
    items: order.line_items.map(item => ({
      variant_id: item.variant_id,
      quantity: item.quantity
    }))
  });
  res.status(200).send("Order processed");
});

This keeps Shopify and Printful in sync. The same pattern is used for shipping tools, accounting software, and CRMs.

Case Study Three: Shiprocket and Shipping Rates

Shiprocket helps merchants manage shipping and delivery. Shipping apps often calculate rates in real time and update order status after shipment.

Since Shopify restricts what can run during checkout, shipping apps typically calculate rates before checkout begins or use carrier service APIs. A simple rate endpoint might look like this:

app.post("/shipping/rates", async (req, res) => {
  const { destination, items } = req.body;
  const rates = await fetchCarrierRates(destination, items);

res.json({
    rates: rates.map(rate => ({
      service_name: rate.name,
      total_price: rate.price
    }))
  });
});

This lets merchants show shipping options to customers before they reach checkout.

Testing Your Shopify App

Testing is a critical part of building a reliable Shopify app, especially if you plan to submit it to the App Store. Every feature should be tested thoroughly in a development store before you consider a release. A development store lets you simulate real merchant behavior without affecting live data, which makes it ideal for both manual and automated testing.

In addition to live testing, Shopify allows you to mock API responses during development. Mocking lets you test your business logic without relying on real API calls or rate limits. This is especially useful when simulating error scenarios or incomplete data, such as missing fields or unexpected values.

By combining real store testing with mocked responses, you can be confident that your app behaves correctly in both normal and failure conditions.

Preparing for the Shopify App Store

Preparing for the Shopify App Store is an important step if you want to release a public app that merchants can trust and install with confidence. Shopify has a formal review process, and your app must meet both technical and policy requirements before it can be listed.

Your app should request only the API permissions that are absolutely necessary for its core functionality. Asking for extra or unrelated permissions is one of the most common reasons apps get rejected. Shopify expects you to clearly explain why each permission is needed and how the data will be used. This helps merchants feel safe when installing your app.

You must also include basic legal and support information. This includes a clear privacy policy that explains what data you collect and how you handle it, terms of service that define usage rules, and a visible support contact such as an email address or help page.

Finally, Shopify looks closely at app quality. Your app should be stable, handle errors gracefully, and be tested across common store scenarios. Clear messaging, predictable behavior, and transparent data usage go a long way in passing the review process.

Conclusion

Building your first Shopify app takes time, but it’s very achievable. Start with login and API calls. Learn how to embed UI inside Shopify. Study real apps from the Shopify app store. Each one solves a different problem using a different design.

As you practice, the pieces will start to fit together. Keep building, testing, and reading the documentation. Your first Shopify app could be the start of something much bigger.

How to Build a Vue E-commerce App Using MSW

Abhijeet Dave — Mon, 08 Jul 2024 18:49:45 +0000

Building an e-commerce app can be a time-consuming task, but with the right tools, it becomes much more manageable. In this guide, we'll explore how to create a robust Vue.js e-commerce application using Mock Service Worker (MSW) to simulate backend interactions.

Whether you're a seasoned developer or just starting out, this step-by-step tutorial will help you understand the fundamentals of integrating MSW into your Vue project, enabling you to build and test your application more effectively without relying on a real backend.

Let's dive in and bring your e-commerce vision to life!

What is a Mock Server?
How to Set Up a Vue E-commerce App
Getting Started With Vue E-commerce App
How to Build an E-commerce App Using Vue 3
How to Build the User Interface
Conclusion

In this article, we'll walk through the process of building an e-commerce app from scratch using Vue.js and the power of MSW for mocking API calls.

Before we start with the project, let’s take an overview of the e-commerce pages that we are going to build for the app. It'll have mainly two pages:

Shop page.
Product details page.

Shop page: This page will display all the products of the store.

Mock-up created using Pika Style

Product details page: This page displays all the details regarding the product.

Before building an e-commerce app, let’s clarify some basics about the mock server.

What is a Mock Server?

A mock server simply mimics a real server by providing predefined responses for an API request. A mock server is useful for testing and development as it can generate different test cases without risking the integrity of real data. You can configure a mock server to return specific responses, error messages and timeouts.

There are various tools/libraries out there that you can use to set up a mock server. In this article, we will use MSW (Mock Service Worker) to set up a mock server. You can learn more about MSW from its official documentation.

Now, let’s set up a mock server (using MSW) for our Vue e-commerce app.

How to Set Up a Vue E-commerce App

For our e-commerce app, we'll need two API endpoints. Below is a brief description of API endpoints.

/api/apps/ecommerce/products: This will fetch the data of all products we have in store.
/api/apps/ecommerce/product/:id: This will fetch the product details of a specific product by its ID.

We'll use a free Vue admin dashboard that offers essential features such as:

Beautifully crafted components
Auto import capabilities
Premade layout, and so on.

These features will make it easier and faster to develop the Vue e-commerce app.

Getting Started With Vue E-commerce App

There are plenty of Vue.js themes available that you can consider for creating an e-commerce app.

Here, we'll use the Materio Vue.js admin free template. First, go to the GitHub repo.

To clone it, simply open your terminal. Navigate to the directory where you would like to clone the project and run the following command:

git clone

Open the project in your favorite IDE and run the command below in the terminal to install all the dependencies.

We'll use the pnpm package manager as recommended by the dashboard we're using. However, you are free to use your preferred package manager like npm or yarn.

pnpm install
# npm install
# yarn

Next, install MSW in your project directory:

pnpm add -D msw@latest
# npm install msw@latest --save-dev
# yarn install -D msw@latest

Run the theme using the following command:

pnpm run dev
# npm run dev
# yarn run dev

Next, initialize MSW using the command below. Running this command will create a mockServiceWorker.js file in a public directory.

npx msw init public

To manage all API endpoints and fake data, create a new folder called fake-server inside the plugins directory. We’ll set up our mock server in this fake-server directory. Create an index.ts file and paste the below code to register MSW.

// file: src/plugins/fake-server/index.ts

import { setupWorker } from 'msw/browser'

const worker = setupWorker()

export default function () {
  const workerUrl = `${import.meta.env.BASE_URL ?? '/'}mockServiceWorker.js`

  worker.start({
    serviceWorker: {
      url: workerUrl,
    },
    onUnhandledRequest: 'bypass',
  })
}

Congratulations, you have now successfully set up MSW in the project. Now, we can start building an e-commerce app.

How to Build an E-commerce App Using Vue 3

In the fake-server directory, create a handlers directory for maintaining handlers. Inside the handlers directory, create an ecommerce directory for the e-commerce app’s handlers. Then, create a db.ts file inside ecommerce to store the fake data.

Your folder structure should look like this:

.
└── fake-server/
    └── handlers/
        └── ecommerce/
            └── db.ts

I have generated some fake data for displaying products. Let’s place this fake data in db.ts:

// file: src/plugins/fake-server/handlers/ecommerce/db.ts

import product5 from '@images/eCommerce/1.png'
import product3 from '@images/eCommerce/11.png'
import product6 from '@images/eCommerce/18.png'
import product1 from '@images/eCommerce/27.png'
import product4 from '@images/eCommerce/5.png'
import product2 from '@images/eCommerce/7.png'

export const db = {
  products: [
    {
      id: 1,
      productName: 'Gaming Mouse',
      category: 'Electronics',
      price: '$999',
      image: product1,
      rating: 5,
      productDescription: 'A mouse specifically designed for gamers.',
    },
    {
      id: 2,
      productName: 'Google Home',
      category: 'Electronics',
      price: '$25.50',
      image: product2,
      rating: 4,
      productDescription: 'A Smart speaker with Google Assistant.',
    },
    {
      id: 3,
      productName: 'INZCOU Running Shoes',
      category: 'Shoes',
      price: '$36.98',
      image: product3,
      rating: 5,
      productDescription: 'Lightweight Tennis Shoes Non Slip Gym Workout Shoes',
    },
    {
      id: 4,
      productName: 'MacBook Pro 16',
      category: 'Electronics',
      price: '$2648.95',
      image: product4,
      rating: 5,
      productDescription: 'Laptop M2 Pro chip with 12‑core CPU and 19‑core GPU',
    },
    {
      id: 5,
      productName: 'Apple Watch Series 7',
      category: 'Office',
      price: '$799',
      image: product5,
      rating: 5,
      productDescription: 'Starlight Aluminum Case with Starlight Sport Band.',
    },
    {
      id: 6,
      productName: 'Meta Quest 2',
      category: 'Office',
      price: '$299',
      image: product6,
      rating: 5,
      productDescription: 'Advanced All-In-One Virtual Reality Headset',
    },
  ],
}

As discussed in this app structure, we need to define two endpoints. Create an index.ts file in your e-commerce handler and define your endpoints in it:

// file: src/plugins/fake-server/handlers/ecommerce/index.ts

import { HttpResponse, http } from 'msw'
import { db } from './db'

export const handlerEcommerce = [
  http.get('/api/ecommerce/products', () => {
    const products = db.products

    return HttpResponse.json(products, { status: 200 })
  }),

  http.get('/api/ecommerce/products/:id', ({ params }) => {
    const id = Number(params.id)

    const product = db.products.find(item => item.id === id)

    if (!product)
      return HttpResponse.error()

    return HttpResponse.json(product, { status: 200 })
  }),
]

Register the handler in the index.ts file in the fake-server direrctory. The updated index.ts file should look like this:

// file: src/plugins/fake-server/index.ts

import { setupWorker } from 'msw/browser'

import { handlerEcommerce } from './handlers/ecommerce'

const worker = setupWorker(...handlerEcommerce)

export default function () {
  const workerUrl = `${import.meta.env.BASE_URL ?? '/'}mockServiceWorker.js`

  worker.start({
    serviceWorker: {
      url: workerUrl,
    },
    onUnhandledRequest: 'bypass',
  })
}

The setup of the mock server has been completed. Whenever you make an API call to your endpoint, MSW will intercept the HTTP request using the service worker and will provide a predefined response from the handlers.

Congratulations, you have successfully set up the mock server👍.🏻

How to Build the User Interface

Let's move on to the UI part of the e-commerce app. Create an apps directory in the pages directory. Inside apps, create a new directory called ecommerce. We'll place the e-commerce app in this directory.

The folder structure should look like this:

.
└── pages/
    └── apps/
        └── ecommerce

The first page is a product listing page. Create a new directory of products inside ecommerce. Create an index.vue file in the products directory and paste the following code snippet:

// file: src/pages/apps/ecommerce/products/index.vue

In this product listing page, we made an API call to the '/api/ecommerce/products' endpoint. This endpoint returns the array of all products. We'll use this data to display products on the page.

The second page in this app is the product display page. On this page, we'll display all the details of the product. To do so, create a new file [id].vue inside the products directory. Below is the code for the product details page.

Note that I have used Lorem ipsum to keep it generic. You can replace it with your desired description.

// file: src/pages/apps/ecommerce/products/[id].vue

On this page, we made an API request to our second API endpoint: /api/ecommerce/products/:id. This endpoint returns product details related to a given product ID. We will use this data on our page to display product details.

Let’s add routes for the e-commerce app. All the routes are located in the src/plugins/router/routes.ts file. In the file, add the e-commerce app’s routes.

// file: src/plugins/router/routes.ts
{
  path: '/apps/ecommerce/products',
  component: () => import('@/pages/apps/ecommerce/products/index.vue'),
},
{
  name: 'apps-ecommerce-products-id',
  path: '/apps/ecommerce/products/:id',
  component: () => import('@/pages/apps/ecommerce/products/[id].vue'),
},

Now, let’s add an e-commerce app to our navigation menu. We'll list all our menu items and groups in NavItems.vue components. We'll use a VerticalNavGroup component for adding a nav group and a VerticleNavLink component for adding a nav item. For adding an e-commerce app in the navigation menu, add the code below in the Apps & Pages section.

//file: src/layouts/components/NavItems.vue

Congrats, you’ve built a Vue e-commerce app using Vue.js and MSW. You can visit the dev server to see the e-commerce app we just crafted.

Conclusion

In this article, you built an e-commerce app using Vue.js and MSW to mock API calls. We created two main pages: the shop page to display products and the product details page to show product information.

The mock server setup helped us to create a realistic development environment without building an actual backend. At the end of this guide, you had a working e-commerce app prototype. This setup provides a strong foundation for further customization and development.

For the complete implementation of the e-commerce app built in this article, please refer to this GitHub repository: https://github.com/themeselection/e-commerce-app.

I hope you all find this article helpful. In case you want to develop a full-fledged e-commerce app, you can use the pre-built Vuejs admin template as it offers many components and features that can be helpful in creating a professional e-commerce app.

I have prepared this article with help of Jayendrasinh Solanki. He is an expert in VueJS with over 7 years of experience. BTW, he is followed by Vue creator Evan You! Isn't it great?

Some helpful guides for e-commerce product development:

How to Build a Digital Products Store with Medusa and Next.js

Ashutosh Krishna — Tue, 17 Oct 2023 22:59:34 +0000

In this tutorial, you will learn how to build an e-book online store using Medusa and Next.js.

Throughout the course of the article, we will:

Utilize the Medusa Next.js Starter Template along with the Digital Products Recipe build the store.
Enhance the product pages to suit digital products. This involves adding a button for previewing media content and displaying essential product details.
Refine the checkout process to make it more efficient for delivering digital products.
Create Next.js API routes to validate and conceal file paths for product downloads.

Demo of the final application

What is Medusa?
Prerequisites
Starting Out
How to Set Up TypeScript Type Definitions
How to Incorporate e-Book Previews into the Product Details
How to Offer e-Book Previews
How to Adjust the Product and Shipping Details
How to Simplify the Checkout
How to Deliver Digital Products

Let's get started.

What is Medusa?

Medusa is a suite of tools and modules specifically designed for e-Commerce products.

Using Medusa, you can build modularized commerce logic like carts, products, and order management. It also provide tools that help you orchestrate powerful ecommerce websites, POS applications, commerce-enabled products, and everything in between.

Prerequisites

Before you get started with the tutorial, you should have installed:

Starting Out

Using the Next.js starter, you can create a new Medusa app by running the following command:

npx create-medusa-app@latest --with-nextjs-starter

After that, you can opt to create a user account for admin panel access. Then, set up the backend infrastructure following the Medusa Digital Products Recipe.

Once the backend is set, create sample products through your Medusa admin interface. Make sure that these products include digital media files for previews and primary content. Also make sure to incorporate relevant product metadata values using key/value pairs linked to each product.

How to Set Up TypeScript Type Definitions

If you’re using regular JavaScript, you can skip this step.

Before we continue, let's make sure to add in the necessary TypeScript type definitions for digital products in the Next.js storefront.

import { Product } from "@medusajs/medusa"
import { ProductVariant } from "@medusajs/product"

export enum ProductMediaVariantType {
  PREVIEW = "preview",
  MAIN = "main",
}

export type ProductMedia = {
  id: string
  name?: string
  file?: string
  mime_type?: string
  created_at?: Date
  updated_at?: Date
  attachment_type?: ProductMediaVariantType
  variant_id?: string
  variants?: ProductMediaVariant[]
}

export type ProductMediaVariant = {
  id: string
  variant_id: string
  product_media_id: string
  type: string
  created_at: Date
  updated_at: Date
}

export type DigitalProduct = Omit"variants"> & {
  product_medias?: ProductMedia[]
  variants?: DigitalProductVariant[]
}

export type DigitalProductVariant = ProductVariant & {
  product_medias?: ProductMedia
}

      throw err
    })

  return product_medias[0]
}

This code defines TypeScript types and interfaces for managing digital products and their associated media files in an e-commerce system. It introduces several crucial structures:

ProductMedia: This interface describes media files related to a product. These files can include images, documents, or any digital assets. It encompasses properties such as an id (a unique identifier for the media), name (an optional name for the media), file (representing the file path or URL), mime_type (the type of media, e.g., image/jpeg), created_at and updated_at timestamps, and attachment_type that categorizes the media as "preview" or "main." Additionally, a media item can have multiple variants, making it adaptable for various use cases.
ProductMediaVariant: This interface represents different variants or versions of a product's media. Each variant has its unique id, variant_id (relating it to a specific product variant), product_media_id (linking it to a particular media item), and timestamps for created_at and updated_at.
DigitalProduct: It extends the standard Product type by introducing an array called product_medias. This array enables the association of media files with a digital product, allowing the presentation of images or other media related to the product. The variants property is tailored for digital products, adapting the generic ProductVariant to digital product-specific requirements.
DigitalProductVariant: This type, an extension of ProductVariant, allows the linking of media files with a specific variant of a digital product. This is particularly valuable for showcasing different digital assets associated with each variant of the product.

How to Incorporate e-Book Previews into the Product Details

Now, let's move forward by adding e-book previews to our product detail page. To do this, we'll get the media previews linked to the currently selected product variant.

In the src/lib/data/index.ts file, we'll create a function to get these previews based on the chosen variant.

// ... other imports
import { DigitalProduct, ProductMedia } from "types/product-media"

// ... rest of the functions

export async function getProductMediaPreviewByVariant(
  variant: Variant
): Promise<ProductMedia> {
  const { product_medias } = await medusaRequest("GET", `/product-media`, {
    query: {
      variant_ids: variant.id,
      expand: ["variants"],
    },
  })
    .then((res) => res.body)
    .catch((err) => {
      throw err
    })

  return product_medias[0]
}

This function is responsible for fetching information related to a specific product variant. It does this by making an HTTP request to the /product-media endpoint. It takes one argument, variant, which is expected to be of type Variant. The request includes query parameters specifying the variant_ids and requests additional details about related "variants".

The function awaits the response from the HTTP request and extracts the response body, which is assumed to be an array of product media objects. It then returns the first product media object from this array, presuming there is at least one such object. If an error occurs during the request, it catches the error and rethrows it.

How to Offer e-Book Previews

To give customers a glimpse of the e-book's content, we'll provide a preview PDF with the first few pages.

To do this, we'll set up a Next API route to manage file downloads while keeping the file's location private. We'll also create a component for a straightforward "download free preview" button. If a product variant has preview media, it will be shown in the product-actions component.

You can use the newly created DigitalProduct and DigitalProductVariant types to fix any TypeScript errors that you may encounter.

import { NextRequest, NextResponse } from "next/server"

export async function GET(req: NextRequest) {
  // Get the file info from the URL
  const { filepath, filename } = Object.fromEntries(req.nextUrl.searchParams)

  // Fetch the PDF file
  const pdfResponse = await fetch(filepath)

  // Handle the case where the PDF could not be fetched
  if (!pdfResponse.ok) return new NextResponse("PDF not found", { status: 404 })

  // Get the PDF content as a buffer
  const pdfBuffer = await pdfResponse.arrayBuffer()

  // Define response headers
  const headers = {
    "Content-Type": "application/pdf",
    "Content-Disposition": `attachment; filename="${filename}"`, // This sets the file name for the download
  }

  // Create a NextResponse with the PDF content and headers
  const response = new NextResponse(pdfBuffer, {
    status: 200,
    headers,
  })

  return response
}

import Button from "@modules/common/components/button"
import { ProductMedia } from "types/product-media"

type Props = {
  media: ProductMedia
}

const ProductMediaPreview: React.FC = ({ media }) => {
  const downloadPreview = () => {
    window.location.href = `${process.env.NEXT_PUBLIC_BASE_URL}/api/download/preview?filepath=${media.file}&filename=${media.name}`
  }

  return (
    <div>
      <Button variant="secondary" onClick={downloadPreview}>
        Download free preview
      Button>
    div>
  )
}

export default ProductMediaPreview

The GET function is designed to handle incoming HTTP GET requests using the Next.js framework. It first extracts information from the request URL, specifically the filepath and filename, which are expected to be query parameters. It then attempts to fetch a PDF file from the specified filepath. If the PDF is successfully retrieved, it proceeds to convert the PDF content into a buffer.

In case the PDF retrieval fails, for instance, if the file is not found, it returns a response with a "PDF not found" message and a 404 status code, indicating a not found error.

If the PDF is successfully fetched, it defines response headers, specifying that the content type is "application/pdf" and setting the "Content-Disposition" header to control the behavior of file downloads. The Content-Disposition header is set to "attachment," and the filename parameter is used to suggest a filename for the downloaded PDF.

import Button from "@modules/common/components/button"
import { ProductMedia } from "types/product-media"

type Props = {
  media: ProductMedia
}

const ProductMediaPreview: React.FC = ({ media }) => {
  const downloadPreview = () => {
    window.location.href = `${process.env.NEXT_PUBLIC_BASE_URL}/api/download/preview?filepath=${media.file}&filename=${media.name}`
  }

  return (
    <div>
      <Button variant="secondary" onClick={downloadPreview}>
        Download free preview
      Button>
    div>
  )
}

export default ProductMediaPreview

The above component displays a preview of a product's media along with a button to download a free preview of that media. The component receives a prop named media, which is expected to be of type ProductMedia.

Inside the component, there's a downloadPreview function that's called when a user clicks the "Download free preview" button. This function constructs a URL for downloading the preview using the window.location.href property. It combines the base URL from the environment variable NEXT_PUBLIC_BASE_URL with the "/api/download/preview" route and includes query parameters for the file path and file name, which are extracted from the media prop.

// ...other imports
import ProductMediaPreview from "../product-media-preview"
import { getProductMediaPreviewByVariant } from "@lib/data"

const ProductActions: React.FC = ({ product }) => {
    // ...other code

  const [productMedia, setProductMedia] = useState({} as ProductMedia)

  useEffect(() => {
    const getProductMedia = async () => {
      if (!variant) return
      await getProductMediaPreviewByVariant(variant).then((res) => {
        setProductMedia(res)
      })
    }
    getProductMedia()
  }, [variant])

  return (
            // ...other code

      {productMedia && <ProductMediaPreview media={productMedia} />}

      
    
  )
}

export default ProductActions

This component is responsible for displaying product-related actions, such as adding a product to the cart, and showing product media preview if available. It leverages asynchronous operations to fetch the media data based on the provided variant, making it a dynamic and interactive component.

How to Adjust the Product and Shipping Details

Because product and shipping information differs between digital and physical products, we'll make changes to these sections on the product page as needed.

How to Add Product Details

I've added product details to the e-book using the product's metadata section in the Medusa admin. Since we're not using the standard attributes, we'll enhance the ProductInfoTab component to display any additional metadata we include.

By default, metadata is structured as an object. To make it simpler to create our list of attributes, we'll change it into an array.

In this case, we'll feature four attributes from the metadata, splitting them into two columns. If you want to show a different number of attributes, you can easily adjust the values within the slice() function as needed.

// ... other components

const ProductInfoTab = ({ product }: ProductTabsProps) => {
  // map the metadata object to an array
  const metadata = useMemo(() => {
    if (!product.metadata) return []
    return Object.keys(product.metadata).map((key) => {
      return [key, product.metadata?.[key]]
    })
  }, [product])

  return (
    <Tab.Panel className="text-small-regular py-8">
      <div className="grid grid-cols-2 gap-x-8">
        <div className="flex flex-col gap-y-4">
                {/* Map the metadata as product information */}
          {metadata &&
            metadata.slice(0, 2).map(([key, value], i) => (
              <div key={i}>
                <span className="font-semibold">{key}span>
                <p>{value}p>
              div>
            ))}
        div>
        <div className="flex flex-col gap-y-4">
          {metadata.length > 2 &&
            metadata.slice(2, 4).map(([key, value], i) => {
              return (
                <div key={i}>
                  <span className="font-semibold">{key}span>
                  <p>{value}p>
                div>
              )
            })}
        div>
      div>
      {product.tags?.length ? (
        <div>
          <span className="font-semibold">Tagsspan>
        div>
      ) : null}
    Tab.Panel>
  )
}

// ... other components

How to Adjust the Shipping Details

Shipping information isn't relevant for digital products, so we'll change the content in this tab. You can make any necessary adjustments to the content within the ShippingInfoTab component in the same file to better match your store's requirements.

// ... other components

const ProductTabs = ({ product }: ProductTabsProps) => {
  const tabs = useMemo(() => {
    return [
      {
        label: "Product Information",
        component: ,
      },
      {
        label: "E-book delivery",
        component: ,
      },
    ]
  }, [product])
    // ... rest of code
}

// ... other components

const ShippingInfoTab = () => {
  return (
    
      
        
          
          
            Instant delivery
            
              Your e-book will be delivered instantly via email. You can also
              download it from your account anytime.
            
          
        
        
          
          
            Free previews
            
              Get a free preview of the e-book before you buy it. Just click the
              button above to download it.
            
          
        
      
    
  )
}

// ... other components

The ProductTabs component is used for rendering a set of tabs. The component takes a product prop, and it uses the useMemo hook to create an array of tab objects. Each tab object consists of a label and a component to be displayed when that tab is active.

In the above snippet, there are two tabs: "Product Information" and "E-book delivery." The "Product Information" tab displays information about the product using the ProductInfoTab component, which we defined earlier.

The "E-book delivery" tab uses the ShippingInfoTab component to display information related to e-book delivery. Inside the ShippingInfoTab component, it provides details about the delivery process, mentioning instant delivery via email and the option to download from an account, as well as free e-book previews.

Product Page

How to Simplify the Checkout

Selling digital products doesn't require gathering customers' physical addresses. We only need their first name and email address to deliver the e-book, making the checkout process simpler by removing unnecessary input fields.

In this example, we'll keep only the first name, last name, country, and email fields, completely removing the billing address section. Keep in mind that your specific requirements may require different input fields.

To start, we'll adjust the checkout types and context by removing any references to values that are no longer needed.

"use client"

import { medusaClient } from "@lib/config"
import useToggleState, { StateType } from "@lib/hooks/use-toggle-state"
import { Cart, Customer, StorePostCartsCartReq } from "@medusajs/medusa"
import Wrapper from "@modules/checkout/components/payment-wrapper"
import { isEqual } from "lodash"
import {
  formatAmount,
  useCart,
  useCartShippingOptions,
  useMeCustomer,
  useRegions,
  useSetPaymentSession,
  useUpdateCart,
} from "medusa-react"
import { useRouter } from "next/navigation"
import React, { createContext, useContext, useEffect, useMemo } from "react"
import { FormProvider, useForm, useFormContext } from "react-hook-form"
import { useStore } from "./store-context"

type AddressValues = {
  first_name: string
  last_name: string
  country_code: string
}

export type CheckoutFormValues = {
  shipping_address: AddressValues
  billing_address?: AddressValues
  email: string
}

interface CheckoutContext {
  cart?: Omit"refundable_amount" | "refunded_total">
  shippingMethods: { label?: string; value?: string; price: string }[]
  isLoading: boolean
  readyToComplete: boolean
  sameAsBilling: StateType
  editAddresses: StateType
  initPayment: () => Promise<void>
  setAddresses: (addresses: CheckoutFormValues) => void
  setSavedAddress: (address: AddressValues) => void
  setShippingOption: (soId: string) => void
  setPaymentSession: (providerId: string) => void
  onPaymentCompleted: () => void
}

const CheckoutContext = createContextnull>(null)

In the above snippet, you define TypeScript types for address values and the overall form structure. The CheckoutContext is also created to serve as a context for sharing checkout-related data and functions with other components.

interface CheckoutProviderProps {
  children?: React.ReactNode
}

const IDEMPOTENCY_KEY = "create_payment_session_key"

export const CheckoutProvider = ({ children }: CheckoutProviderProps) => {
  const {
    cart,
    setCart,
    addShippingMethod: {
      mutate: setShippingMethod,
      isLoading: addingShippingMethod,
    },
    completeCheckout: { mutate: complete, isLoading: completingCheckout },
  } = useCart()

  const { customer } = useMeCustomer()
  const { countryCode } = useStore()

  const methods = useForm({
    defaultValues: mapFormValues(customer, cart, countryCode),
    reValidateMode: "onChange",
  })

The CheckoutProvider component manages cart data, customer information, form handling, and interactions with payment and shipping methods. It sets up various hooks and functions for these purposes.

You also define an idempotency key which will be used for preventing duplicate requests during payment session creation.

 const methods = useForm({
    defaultValues: mapFormValues(customer, cart, countryCode),
    reValidateMode: "onChange",
  })

  const {
    mutate: setPaymentSessionMutation,
    isLoading: settingPaymentSession,
  } = useSetPaymentSession(cart?.id!)

  const { mutate: updateCart, isLoading: updatingCart } = useUpdateCart(
    cart?.id!
  )

  const { shipping_options } = useCartShippingOptions(cart?.id!, {
    enabled: !!cart?.id,
  })

  const { regions } = useRegions()

  const { resetCart, setRegion } = useStore()
  const { push } = useRouter()

  const editAddresses = useToggleState()
  const sameAsBilling = useToggleState(
    cart?.billing_address && cart?.shipping_address
      ? isEqual(cart.billing_address, cart.shipping_address)
      : true
  )

In this section of code, several variables and hooks are initialized to facilitate the management of a checkout process.

We use the methods variable to manage the checkout form, with initial values populated by the mapFormValues function. The code also sets up mutation functions for updating the payment session and the cart (setPaymentSessionMutation and updateCart) and tracks their loading states. It retrieves available shipping options and regions using hooks, and it also handles cart resets and region selection.

It also employs boolean states (editAddresses and sameAsBilling) to manage whether the user is currently editing addresses and whether the billing address matches the shipping address.

These components collectively ensure smooth navigation and data management in the checkout process.

/**
   * Boolean that indicates if a part of the checkout is loading.
   */
  const isLoading = useMemo(() => {
    return (
      addingShippingMethod ||
      settingPaymentSession ||
      updatingCart ||
      completingCheckout
    )
  }, [
    addingShippingMethod,
    completingCheckout,
    settingPaymentSession,
    updatingCart,
  ])

  /**
   * Boolean that indicates if the checkout is ready to be completed. A checkout is ready to be completed if
   * the user has supplied a email, shipping address, billing address, shipping method, and a method of payment.
   */
  const readyToComplete = useMemo(() => {
    return (
      !!cart &&
      !!cart.email &&
      !!cart.shipping_address &&
      !!cart.billing_address &&
      !!cart.payment_session &&
      cart.shipping_methods?.length > 0
    )
  }, [cart])

  const shippingMethods = useMemo(() => {
    if (shipping_options && cart?.region) {
      return shipping_options?.map((option) => ({
        value: option.id,
        label: option.name,
        price: formatAmount({
          amount: option.amount || 0,
          region: cart.region,
        }),
      }))
    }

    return []
  }, [shipping_options, cart])

In the code above, first the isLoading boolean is computed using the useMemo hook. It reflects whether any part of the checkout is in a loading state.

This is determined by observing four loading flags: addingShippingMethod, settingPaymentSession, updatingCart, and completingCheckout. If any of these flags is true, the isLoading flag will also be true. This indicates that some part of the checkout is currently in progress.

The readyToComplete boolean, also computed with useMemo, assesses whether the checkout is prepared for completion.

To be deemed ready, several conditions must be met: there must be a valid cart object, an email address, a shipping address, a billing address, a payment session, and at least one shipping method selected. If all these conditions are satisfied, readyToComplete will be true, signaling that the checkout process is set to be finalized.

Finally, the shippingMethods variable is computed using useMemo. It is an array of available shipping methods with associated information. It maps the shipping_options (if they exist) to an array of objects, each containing a value, label, and price.

These objects represent the shipping options, their names, and prices, formatted using the formatAmount function. This data is used to display and select shipping methods during the checkout process.

/**
   * Resets the form when the cart changed.
   */
  useEffect(() => {
    if (cart?.id) {
      methods.reset(mapFormValues(customer, cart, countryCode))
    }
  }, [customer, cart, methods, countryCode])

  useEffect(() => {
    if (!cart) {
      editAddresses.open()
      return
    }

    if (cart?.shipping_address && cart?.billing_address) {
      editAddresses.close()
      return
    }

    editAddresses.open()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cart])

  /**
   * Method to set the selected shipping method for the cart. This is called when the user selects a shipping method, such as UPS, FedEx, etc.
   */
  const setShippingOption = (soId: string) => {
    if (cart) {
      setShippingMethod(
        { option_id: soId },
        {
          onSuccess: ({ cart }) => setCart(cart),
        }
      )
    }
  }

  /**
   * Method to create the payment sessions available for the cart. Uses a idempotency key to prevent duplicate requests.
   */
  const createPaymentSession = async (cartId: string) => {
    return medusaClient.carts
      .createPaymentSessions(cartId, {
        "Idempotency-Key": IDEMPOTENCY_KEY,
      })
      .then(({ cart }) => cart)
      .catch(() => null)
  }

  /**
   * Method that calls the createPaymentSession method and updates the cart with the payment session.
   */
  const initPayment = async () => {
    if (cart?.id && !cart.payment_sessions?.length && cart?.items?.length) {
      const paymentSession = await createPaymentSession(cart.id)

      if (!paymentSession) {
        setTimeout(initPayment, 500)
      } else {
        setCart(paymentSession)
        return
      }
    }
  }

  /**
   * Method to set the selected payment session for the cart. This is called when the user selects a payment provider, such as Stripe, PayPal, etc.
   */
  const setPaymentSession = (providerId: string) => {
    if (cart) {
      setPaymentSessionMutation(
        {
          provider_id: providerId,
        },
        {
          onSuccess: ({ cart }) => {
            setCart(cart)
          },
        }
      )
    }
  }

  const prepareFinalSteps = () => {
    initPayment()

    if (shippingMethods?.length && shippingMethods?.[0]?.value) {
      setShippingOption(shippingMethods[0].value)
    }
  }

  const setSavedAddress = (address: AddressValues) => {
    const setValue = methods.setValue

    setValue("shipping_address", {
      country_code: address.country_code || "",
      first_name: address.first_name || "",
      last_name: address.last_name || "",
    })
  }

  /**
   * Method that validates if the cart's region matches the shipping address's region. If not, it will update the cart region.
   */
  const validateRegion = (countryCode: string) => {
    if (regions && cart) {
      const region = regions.find((r) =>
        r.countries.map((c) => c.iso_2).includes(countryCode)
      )

      if (region && region.id !== cart.region.id) {
        setRegion(region.id, countryCode)
      }
    }
  }

  /**
   * Method that sets the addresses and email on the cart.
   */
  const setAddresses = (data: CheckoutFormValues) => {
    const { shipping_address, billing_address, email } = data

    const payload: StorePostCartsCartReq = {
      shipping_address,
      email,
    }

    if (isEqual(shipping_address, billing_address)) {
      sameAsBilling.open()
    }

    if (sameAsBilling.state) {
      payload.billing_address = shipping_address
    } else {
      payload.billing_address = billing_address
    }

    updateCart(payload, {
      onSuccess: ({ cart }) => {
        setCart(cart)
        prepareFinalSteps()
      },
    })
  }

  /**
   * Method to complete the checkout process. This is called when the user clicks the "Complete Checkout" button.
   */
  const onPaymentCompleted = () => {
    complete(undefined, {
      onSuccess: ({ data }) => {
        resetCart()
        push(`/order/confirmed/${data.id}`)
      },
    })
  }

  return (
    <FormProvider {...methods}>
      <CheckoutContext.Provider
        value={{
          cart,
          shippingMethods,
          isLoading,
          readyToComplete,
          sameAsBilling,
          editAddresses,
          initPayment,
          setAddresses,
          setSavedAddress,
          setShippingOption,
          setPaymentSession,
          onPaymentCompleted,
        }}
      >
        <Wrapper paymentSession={cart?.payment_session}>{children}Wrapper>
      CheckoutContext.Provider>
    FormProvider>
  )
}

This code section orchestrates various aspects of an e-commerce checkout process. It manages form state, resets the form when the cart changes, and toggles address editing visibility. It handles the selection of shipping methods, the creation and initialization of payment sessions, and the choice of payment providers. And it ensures that shipping addresses, billing addresses, and email information are set appropriately, and validates the cart's region based on the shipping address.

It also coordinates the completion of the checkout process, including payment processing and order confirmation.

All of these functions and data are encapsulated within the CheckoutProvider component.

export const useCheckout = () => {
  const context = useContext(CheckoutContext)
  const form = useFormContext()
  if (context === null) {
    throw new Error(
      "useProductActionContext must be used within a ProductActionProvider"
    )
  }
  return { ...context, ...form }
}

/**
 * Method to map the fields of a potential customer and the cart to the checkout form values. Information is assigned with the following priority:
 * 1. Cart information
 * 2. Customer information
 * 3. Default values - null
 */
const mapFormValues = (
  customer?: Omit"password_hash">,
  cart?: Omit"refundable_amount" | "refunded_total">,
  currentCountry?: string
): CheckoutFormValues => {
  const customerShippingAddress = customer?.shipping_addresses?.[0]
  const customerBillingAddress = customer?.billing_address

  return {
    shipping_address: {
      first_name:
        cart?.shipping_address?.first_name ||
        customerShippingAddress?.first_name ||
        "",
      last_name:
        cart?.shipping_address?.last_name ||
        customerShippingAddress?.last_name ||
        "",
      country_code:
        currentCountry ||
        cart?.shipping_address?.country_code ||
        customerShippingAddress?.country_code ||
        "",
    },
    billing_address: {
      first_name:
        cart?.billing_address?.first_name ||
        customerBillingAddress?.first_name ||
        "",
      last_name:
        cart?.billing_address?.last_name ||
        customerBillingAddress?.last_name ||
        "",
      country_code:
        cart?.shipping_address?.country_code ||
        customerBillingAddress?.country_code ||
        "",
    },
    email: cart?.email || customer?.email || "",
  }
}

The useCheckout hook is used to access the checkout context and form context, typically used in React components. It retrieves the CheckoutContext from the context of the application, and it also gets the form context of the checkout form, allowing components to access and utilize these contexts.

The mapFormValues function is responsible for mapping and prioritizing information for the checkout form. It takes customer and cart data, along with the current country, and generates values for the checkout form fields.

It prioritizes data in this order: 1) Cart information, 2) Customer information, and 3) Default values set to null if no information is available. This function helps populate the checkout form with the most relevant data, ensuring a smoother user experience during the checkout process.

Now that the context is updated, we’ll remove the redundant input fields from the checkout form.

import { useCheckout } from "@lib/context/checkout-context"
import Button from "@modules/common/components/button"
import Spinner from "@modules/common/icons/spinner"
import ShippingAddress from "../shipping-address"

const Addresses = () => {
  const {
    editAddresses: { state: isEdit, toggle: setEdit },
    setAddresses,
    handleSubmit,
    cart,
  } = useCheckout()
  return (
    <div className="bg-white">
      <div className="text-xl-semi flex items-center gap-x-4 px-8 pb-6 pt-8">
        <div className="bg-gray-900 w-8 h-8 rounded-full text-white flex justify-center items-center text-sm">
          1
        div>
        <h2>Shipping addressh2>
      div>
      {isEdit ? (
        <div className="px-8 pb-8">
          <ShippingAddress />
          <Button
            className="max-w-[200px] mt-6"
            onClick={handleSubmit(setAddresses)}
          >
            Continue to delivery
          Button>
        div>
      ) : (
        <div>
          <div className="bg-gray-50 px-8 py-6 text-small-regular">
            {cart && cart.shipping_address ? (
              <div className="flex items-start gap-x-8">
                <div className="bg-green-400 rounded-full min-w-[24px] h-6 flex items-center justify-center text-white text-small-regular">
                  ✓
                div>
                <div className="flex items-start justify-between w-full">
                  <div className="flex flex-col">
                    <span>
                      {cart.shipping_address.first_name}{" "}
                      {cart.shipping_address.last_name}
                      {cart.shipping_address.country}
                    span>
                    <div className="mt-4 flex flex-col">
                      <span>{cart.email}span>
                    div>
                  div>
                  <div>
                    <button onClick={setEdit}>Editbutton>
                  div>
                div>
              div>
            ) : (
              <div className="">
                <Spinner />
              div>
            )}
          div>
        div>
      )}
    div>
  )
}

export default Addresses

Checkout Page

In the last step, we'll modify the shipping-details component to show important information after the order is successfully placed. In this situation, we'll remove any extra details and add the buyer's email address for reference.

import { Address, ShippingMethod } from "@medusajs/medusa"

type ShippingDetailsProps = {
  address: Address
  shippingMethods: ShippingMethod[]
  email: string
}

const ShippingDetails = ({
  address,
  shippingMethods,
  email,
}: ShippingDetailsProps) => {
  return (
    <div className="text-base-regular">
      <h2 className="text-base-semi">Deliveryh2>
      <div className="my-2">
        <h3 className="text-small-regular text-gray-700">Detailsh3>
        <div className="flex flex-col">
          <span>{`${address.first_name} ${address.last_name}`}span>
          <span>{email}span>
        div>
      div>
      <div className="my-2">
        <h3 className="text-small-regular text-gray-700">Delivery methodh3>
        <div>
          {shippingMethods.map((sm) => {
            return <div key={sm.id}>{sm.shipping_option.name}div>
          })}
        div>
      div>
    div>
  )
}

export default ShippingDetails

Order Confirmation Page

How to Deliver Digital Products

There are various ways to get digital products to customers, like sending a download link by email, adding a download button on the order confirmation page, or giving access through their account.

In all these situations, our main goal is to confirm that only those who've purchased the product can get it.

To do this, I've set up the backend to create a special code (token) for each digital item in an order. We can use GET /store/:token to check the token and give the file to the user. But this method shows the file's web address to the user, which isn't great for preventing piracy.

So we are going to make a Next API route at src/app/api/download/main/[token]/route.ts. This route will handle the token, acting as a middleman to provide the file to the user without revealing where it's stored.

import { NextRequest, NextResponse } from "next/server"

export async function GET(
  req: NextRequest,
  { params }: { params: Record }
) {
  // Get the token from the URL
  const { token } = params

  // Define the URL to fetch the PDF file data from
  const pdfUrl = `${process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL}/store/product-media/${token}`

  // Fetch the PDF file data
  const { file, filename } = await fetch(pdfUrl).then((res) => res.json())

  // Handle the case where the token is invalid
  if (!file) return new NextResponse("Invalid token", { status: 401 })

  // Fetch the PDF file
  const pdfResponse = await fetch(file)

  // Handle the case where the PDF could not be fetched
  if (!pdfResponse.ok) return new NextResponse("PDF not found", { status: 404 })

  // Get the PDF content as a buffer
  const pdfBuffer = await pdfResponse.arrayBuffer()

  // Define response headers
  const headers = {
    "Content-Type": "application/pdf",
    "Content-Disposition": `attachment; filename="${filename}"`, // This sets the file name for the download
  }

  // Create a NextResponse with the PDF content and headers
  const response = new NextResponse(pdfBuffer, {
    status: 200,
    headers,
  })

  return response
}

This code defines a serverless function for handling HTTP GET requests in a Next.js application. It retrieves a PDF file using a token provided in the URL parameters, fetching the file from an external source. The function ensures the token's validity and the availability of the PDF file. If the token is invalid, it returns a "401 Unauthorized" response. If the PDF is not found, it returns a "404 Not Found" response.

When the PDF is successfully fetched, it constructs response headers, including the content type as "application/pdf" and a suggested filename for download, and returns the PDF file to the client as a downloadable attachment. This code is typically used to serve PDF files in response to specific GET requests.

We can now link to this API route from the delivery email like this: {your_store_url}/api/download/main/{token}.

You can add your own logic to invalidate tokens after a certain time or X number of downloads.

Mission Accomplished!

Congratulations, you've made it! Don't forget to explore more Recipes for further ways to make the most of Medusa.

How to Build a Shopping Cart with React and TypeScript

Mihail Gaberov — Fri, 23 Jun 2023 17:09:00 +0000

In this tutorial we are going to build a real-life shopping cart 🛒 application.

We'll talk about the technology stack and the features it will have in a minute. I'll also walk you through the process step-by-step. But first, let me show you what it's going to look like.

Let’s sketch 🙃

Product List

We are going to make our app mobile friendly by implementing a decent level of responsiveness.

Product List - Mobile

Cart Desktop

Cart Mobile

This time, before going directly into building this project, I decided to go more traditional. I took a pen and paper and drew these ugly sketches, just to make sure I had a visual idea of what I would be building.

And honestly, it really did the trick ✨. This technique helps when you are about to sit at your computer and ask the question:

What do I start with now?

TL;DR

💡 If you want to skip the reading, here 💁 is the GitHub repository with a detailed README 🙌, and here you can see the live demo.

What’s a Shopping Cart?

Shopping Carts

A shopping cart lets people carry or store their goods while they're shopping – either online or in real life.

In ecommerce apps, the shopping cart is a place where the user can store and view the items they are considering purchasing. Typically, this is a separate page or part of the page where people can view a list of the items they have chosen to buy before actually paying for them.

The Plan for Our App

We will build an application consisting of two pages: a product list page and a cart page.

The app will fetch the data from a 3rd party RESTful API and it'll use the browser’s localStorage to store selected items that should be displayed in the cart.

Application features

The shopping cart application must fetch and display products from the API endpoint https://dummyjson.com/products.

The Products List page should display the available items along with some specific information. For example, it should show 3 products per row for large viewports. Each item should display at least a thumbnail image, a title, the price (formatted as GBP, for example £100.23), and an “Add to Cart” button which adds the item to the cart.

Cart page should display the customer's chosen items. Each item should display at least a thumbnail image, a title, plus and minus buttons (for adding/removing items) and the current quantity of the item in the cart, like this:

Plus and minus buttons

If there is a quantity of 1 item in the cart, hitting minus removes it from the cart. The cart should also display the total price of all items added (formatted as GBP, for example, £100.23).

In addition to these basic features, the UI/UX should be as sleek as possible. We also want to make sure we unit test the application.

Tech Stack

If you've had the chance to take a look at some of my others tutorials, the tech stack I chose won’t surprise you much.

I picked these technologies taking into account the requirements for the application – that it would be performant, well tested, and have a sleek look and feel.

React / TypeScript / Vite – for the UI library we're going again with a React and Vite development environment. But this time we will use it with TypeScript instead of JavaScript.
SASS / CSS Modules – for styling our app, we'll bet on the battle-tested solution of CSS Modules with SASS/SCSS.
react-testing-library / Vitest – for testing the app, we'll use react-testing-library and Vitest.

If you want to learn more about RTL, here is an insightful tutorial by a very knowledgable guy that can help you out.

How to Build the App

In this section we will take a look at the project structure and I'll explain why I chose it.

Then I'll go briefly through each of the components and describe its role.

Once you understand how the components work together to create a functioning application, we'll explore how to utilize the browser's local storage to store data that can be used in other parts of the app.

📦 Dependencies

Let's take a brief look at our project's dependencies. These are external packages we need to install in order to ensure the successful execution of our project.

Along with Vite and Vitest, I have installed SASS, React Testing Library, and use-local-storage-state. See below my package.json file.

{
  "name": "shopping-cart-app",
  "private": false,
  "version": "1.0.0",
  "author": "Mihail Gaberov",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "test": "vitest",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.13.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "jsdom": "^22.1.0",
    "sass": "^1.63.4",
    "typescript": "^5.0.2",
    "use-local-storage-state": "^18.3.3",
    "vite": "^4.3.9",
    "vitest": "^0.32.0"
  }
}

🧑🏻‍💻 Installation

In this step I assume you are starting from scratch. We are going to use Vite for scaffolding the project. In order to do that you need to have Node.js installed on your system – at least version 14.18. I suggest that you update it to the latest stable version. And as a package manager you may go with either npm or yarn.

Once you have one of these installed on your system, open your Terminal app and run the following:

yarn create vite your-app-name --template react-ts

This command will install the initial application files in a folder named 'your-app-name'. After that step you will be able to open it in your favorite IDE and start working on it.

One last thing you should do here is to install to additional packages I mentioned in the previous section. You can do that by running the following:

yarn add -D sass @testing-library/react use-local-storage-state

🏗️ Project Structure

Project Structure

This won't be much of a surprise for those of you who have some experience in building React applications. The structure I've chosen is pretty standard.

The root level of the app contains files related to configurations and setup, as well as the HTML index file. This is where the main JavaScript module is loaded and the app is launched.

index.html

The src folder (short for "source") contains two sub-folders: one for assets and one for components.

The public and screenshots folders have straightforward purposes. The .github folder contains the YAML configuration file that is used by GitHub Actions. We will discuss this in more detail later on.

🛠️Components

App Components

All components are organized into separate folders. Within each folder, you'll find an index.ts file that exports the component. This file uses named exports, as shown below.

Named export - Header component

We'll start by examining the components from a top-to-bottom approach, as they are seen and used within the application. To help clarify, let me provide a visualization.

App Components Visualized in Order

Here's what each of these components does in more detail:

Header – holds the top part of the app. On the left side is the logo image, an SVG I have downloaded from Iconify. On the right side sits the CartWidget component.

CartWidget – renders a button composed of an SVG image depicting a shopping cart and a number value indicating the count of products currently added to the cart. When clicked, the button takes the user to the cart page.

Products – this component is responsible for rendering the main content of the page, which consists of a list of products. On larger viewports, the products are displayed in three columns per row. Each product is represented by a thumbnail image, a title, price information, and an "Add to Cart" button. The price of each product is formatted to GBP using the CurrencyFormatter component.

CurrencyFormatter – formats given numeric amount to GBP – that is, 499 would become £499.00.

App Components Visualized

Cart – this component is responsible for rendering the main content of the page. It displays one product per row and includes a quantifier component that allows the user to update the quantity of the product. At the bottom of the page, it also shows the total price of the selected products, which is formatted as GBP using the CurrencyFormatter component.

Quantifier – this component displays plus and minus buttons along with an input field positioned between them. It serves the purpose of indicating the current quantity of a product and enables the user to modify this value. Additionally, it offers functionality to remove the product entirely from the shopping cart.

Footer – this component is designed to provide a simple and visually representative way to display information about the author and copyrights.

Loader – this component is not visible on the screenshots above, but it represents a simple loading animation that becomes visible once the user opens the app for first time and the products data is still being loaded.

🧩 How to Build the Header

As mentioned earlier, the upper section of the application, commonly referred to as the 'hat', is known as the header. In our specific case, the header comprises two elements: the logo positioned on the left and the CartWidget on the right.

Application Header

Now, let's go through the process of constructing the application together 🙌. The steps outlined below are applicable to every component we incorporate into the app.

To begin, I create a dedicated folder for the component and include an index.ts file within it. This file will serve as the export module for the component.

Creating Header Component

This is where we export the actual component like that:

export { Header } from'./Header'

Then we implement the component itself. This code will go into a file named the same thing – Header.tsx

import { FunctionComponent } from 'react'


export const Header: FunctionComponent = () => {

  return (
    
      header content here...
    
  )
}

We're starting simple.

Currently, this component only displays the text 'header content here...' on the page. Our goal is to gradually enhance it until we achieve the final result depicted in the picture above.

To do this, it is important to incorporate styling into the process. By utilizing CSS Modules, we can import a separate SCSS file containing the styles required for our component.

import { FunctionComponent } from 'react'
import classes from './header.module.scss' // <---- imports the styles

export const Header: FunctionComponent = () => {

  return (
    
      header content here...
    
  )
}

This file must exist in our component's folder. After including the tests file, the folder structure for this component will resemble the following:

Header Component's Folder

Let's enhance the component's code by incorporating the necessary elements. On the left side, we'll add the logo element, which will function as a clickable link. We'll also include the CartWidget component that displays the count of the selected products.

import { FunctionComponent } from 'react'


export const Header: FunctionComponent = () => {

  return (
    
      
        "/">
          "Shopping Cart Application" />
        
      
      
        
      
    
  )
}

To achieve a nice look and feel, and a decent level of responsiveness, we'll use the following styles:

.header {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #213547;
  transition: height 0.3s ease;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  opacity: 0.9;
  backdrop-filter: saturate(180%) blur(20px);
  justify-content: space-between;
  z-index: 1;

  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
    transform: scaleX(-1);


    &:hover {
      filter: drop-shadow(0 0 2em #646cffaa);
    }
  }
}

I will show you the code for the widget component below, but before that I want you to notice how we pass the products count value a prop. This way we can free ourselves from implementing any logic in the component itself and use it only for representational purposes.

That being said, here is the code of the component:

import { FunctionComponent } from 'react'
import { useNavigate } from 'react-router-dom'

import shoppingCart from '../../assets/shopping-cart.svg'
import classes from './cart-widget.module.scss'

interface Props {
  productsCount: number
}

export const CartWidget: FunctionComponent = ({ productsCount }) => {
  const navigate = useNavigate()

  const navigateToCart = () => {
    navigate('/cart')
  }

  return (
    
  )
}

And its styling:

.container {
  margin: 1rem;
  padding: 0 1rem;
  display: flex;
  border: none;
  background: none;
  cursor: pointer;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;

  &:hover {
    outline: 1px solid white;
  }


  .shoppingCart {
    height: 3em;
    padding: 1.5rem .4rem;
    will-change: filter;
    transition: filter 300ms;
  }

  .productsCount {
    z-index: 1;
    font-size: 2em;
    top: 38px;
    color: orange;
  }
}

Header Shrinking

Before we proceed, there is one more aspect to discuss: the smooth shrinking animation of the header that you can see while scrolling down.

Header Shrinking

To accomplish this, I used React hooks along with a technique involving manual manipulation of styles for various DOM elements.

I implemented this functionality within a component method called shrinkHeader, which is invoked whenever a user scrolls. Within this method, I check if the current vertical scroll position exceeds a specified threshold value, DISTANCE_FROM_TOP, and accordingly apply different styles based on the outcome of this comparison.

One aspect we haven't discussed yet is using the hook for managing local storage, which we'll talk about later.

Here is the completed version of the component:

import { FunctionComponent, useEffect } from 'react'
import { Link } from 'react-router-dom'
import useLocalStorageState from 'use-local-storage-state'

import logo from '/logo.svg'
import { CartWidget } from '../CartWidget'
import { CartProps } from '../Products/Products.tsx'
import classes from './header.module.scss'

export const Header: FunctionComponent = () => {
  useEffect(() => {
    window.addEventListener("scroll", () => shrinkHeader(), false)

    return () => {
      window.removeEventListener("scroll", () => shrinkHeader())
    }
  }, [])

  const shrinkHeader = () => {
    const DISTANCE_FROM_TOP = 140
    const headerElement = document.querySelector("header") as HTMLElement
    const logoElement = document.querySelectorAll("img")[0] as HTMLElement
    const cartWidgetElement = document.querySelectorAll("img")[1] as HTMLElement
    const productsCountElement = document.querySelector("span") as HTMLElement
    const scrollY = document.body.scrollTop || document.documentElement.scrollTop

    if (scrollY > DISTANCE_FROM_TOP) {
      headerElement.style.transition = "height 200ms ease-in"
      headerElement.style.height = "80px"
      logoElement.style.transition = "height 200ms ease-in"
      logoElement.style.height = "4rem"
      cartWidgetElement.style.transition = "height 200ms ease-in"
      cartWidgetElement.style.height = "2rem"
      productsCountElement.style.transition = "font-size 200ms ease-in"
      productsCountElement.style.fontSize = "1.5em"
    } else {
      headerElement.style.height = "150px"
      logoElement.style.height = "6rem"
      cartWidgetElement.style.height = "3rem"
      productsCountElement.style.fontSize = "2em"
    }
  }
  const [cart,] = useLocalStorageState('cart', {})

  const productsCount: number = Object.keys(cart || {}).length

  return (
    
      
        "/">
          "Shopping Cart Application" />
        
      
      
        
      
    
  )
}

🧩 How to Build the Product List

Product List

To construct the product list component, I followed the same approach as above. Initially, I established the foundational structure, which involved creating the component code, exporting the component in the index file, and implementing a separate SCSS file to define the component's styles.

As a result, the folder structure after completing these steps should resemble the following:

Product List Component Folder

One interesting aspect of this component is that it handles sending a request to a REST API in order to fetch the product data. This is accomplished through the fetchData method, which is invoked within a useEffect hook.

By specifying an empty dependency array, the code inside the useEffect hook is executed only once when the component is initially loaded. This ensures that redundant requests are avoided, optimizing the performance of our application and reducing bandwidth usage.

 useEffect(() => {
    fetchData(API_URL)
  }, [])


  async function fetchData(url: string) {
    try {
      const response = await fetch(url)
      if (response.ok) {
        const data = await response.json()
        setProducts(data.products)
        setIsLoading(false)
      } else {
        setError(true)
        setIsLoading(false)
      }
    } catch (error) {
      setError(true)
      setIsLoading(false)
    }
  }

The rendering aspect of the component is relatively straightforward. Once we have successfully fetched the product data, we can iterate through it using a regular map() function. For each product, we can render its thumbnail image, title, price, and a button for adding it to the cart.

To ensure that each row displays three items when viewed on large viewports, we utilize CSS (SCSS) styles. We'll do this by harnessing the capabilities of Flexbox, as demonstrated in the following snippet:

.productPage {
  padding: 1rem;
  margin-top: 8rem;

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .product {
      flex-basis: 33.33%;
      margin-bottom: 5rem;
      text-align: center;

      h3 {
        color: #007185;
        font-weight: 700;
        line-height: 20px;
        margin: 0;
      }

      img {
        height: 6rem;
      }

      button {
        background-color: #fbd815;
        width: 13rem;
        padding: .5rem;
        font-size: 1.1em;
        border-radius: 25px;
        border-color: #D5D9D9;
        border-style: solid;
        border-width: 1px;

        &:hover:not([disabled]) {
          background-color: #eecf1d;
          cursor: pointer;
        }

        &:disabled {
          opacity: .5;
          background-color: lightgray;
        }
      }
    }

    @media (max-width: 767px) {
      .product {
        flex-basis: 50%;
      }
    }

    @media (max-width: 400px) {
      .product {
        flex-basis: 100%;
      }
    }
  }
}

.error {
  color: red;
  text-align: center;
}

In addition to these features, the component code also includes functionality for handling the "Add to Cart" button click event, specifically adding the selected item to the local storage. We also implement basic error handling logic to display an error message in case the request to the third-party API fails.

Here is the completed component:

import { FunctionComponent, useEffect, useState } from 'react'
import useLocalStorageState from 'use-local-storage-state'

import { CurrencyFormatter } from '../CurrencyFormatter'
import classes from './products.module.scss'
import { Loader } from '../Loader'

const API_URL = 'https://dummyjson.com/products'

export type Product = {
  id: number
  title: string
  price: number
  thumbnail: string
  image: string
  quantity: number
}

export interface CartProps {
  [productId: string]: Product
}

export const Products: FunctionComponent = () => {
  const [isLoading, setIsLoading] = useState(true)
  const [products, setProducts] = useState([])
  const [error, setError] = useState(false)
  const [cart, setCart] = useLocalStorageState('cart', {})


  useEffect(() => {
    fetchData(API_URL)
  }, [])


  async function fetchData(url: string) {
    try {
      const response = await fetch(url)
      if (response.ok) {
        const data = await response.json()
        setProducts(data.products)
        setIsLoading(false)
      } else {
        setError(true)
        setIsLoading(false)
      }
    } catch (error) {
      setError(true)
      setIsLoading(false)
    }
  }

  const addToCart = (product: Product):void => {
    product.quantity = 1

    setCart((prevCart) => ({
      ...prevCart,
      [product.id]: product,
    }))
  }

  const isInCart = (productId: number):boolean => Object.keys(cart || {}).includes(productId.toString())

  if (error) {
    return An error occurred when fetching data. Please check the API and try again.
  }

  if (isLoading) {
    return 
  }


  return (
    
      Products

      
        {products.map(product => (
          
            
            {product.title}
            Price: 
            
          
        ))}
      
    
  )
}

🧩 How to Build the Cart

Cart Component

This component bears some resemblance to the Product List component in that it also lists products, but in a different manner with only one item per row.

It also introduces additional functionality by incorporating another component for updating the quantity of selected products. And it calculates the total price of all products in the cart.

 
      Cart

      
        {getProducts().map(product => (
          
            
            {product.title}
            () => handleRemoveProduct(product.id)}
              productId={product.id}
              handleUpdateQuantity={handleUpdateQuantity} />
          
        ))}

The main distinction here is that instead of fetching the product data from an API, we retrieve it from the local storage. This is where we store the data for each selected product from the product list component.

const [cart, setCart] = useLocalStorageState('cart', {}) // reading the local storage value via the hook here

....
....

  const getProducts = () => Object.values(cart || {}) // method for getting all products data as an array data structure, that will allow us easier iteration later

....
....

In this case, we use the useEffect hook once again, but this time to reset the scroll position of the window whenever the user visits the page. This ensures that all relevant data is consistently visible to the user, regardless of how far they have scrolled on the product list page.


  useEffect(() => {
    window.scrollTo(0, 0)
  }, [location])

Indeed, you can see that the methods for decreasing or increasing the quantity of a product are passed to the component as callbacks through its props. This approach is useful as it helps maintain a relatively clean component by elevating the responsibility of state management to a higher level.

By lifting the logic for managing the state outside of the component, it allows for better separation of concerns and promotes reusability.

const handleRemoveProduct = (productId: number): void => {
    setCart((prevCart) => {
      const updatedCart = { ...prevCart }
      delete updatedCart[productId]
      return updatedCart
    })
  }

  const handleUpdateQuantity = (productId: number, operation: Operation) => {
    setCart((prevCart) => {
      const updatedCart = { ...prevCart }
      if (updatedCart[productId]) {
        if (operation === 'increase') {
          updatedCart[productId] = { ...updatedCart[productId], quantity: updatedCart[productId].quantity + 1 }
        } else {
          updatedCart[productId] = { ...updatedCart[productId], quantity: updatedCart[productId].quantity - 1 }
        }
      }
      return updatedCart
    })
  }

We can style the component using Flexbox to get our desired layout:

.cart {
  padding: 1rem;
  margin-top: 8rem;

  .container {
    display: flex;
    flex-direction: column;

    .product {
      display: flex;
      border-top: 1px dotted;
      border-left: 1px dotted;
      border-right: 1px dotted;
      padding: .3rem .5rem;
      align-items: center;

      h3 {
        color: #007185;
        font-weight: 700;
        font-size: 1em;
        line-height: 20px;
        margin: .3rem;
        flex: 1;
      }

      img {
        max-width: 3rem;
        height: auto;
        margin: .875rem;
      }
    }
  }
}

Here is the final version of the component's code:

import { FunctionComponent, useEffect } from 'react'
import useLocalStorageState from 'use-local-storage-state'

import { Quantifier } from '../Quantifier'
import { CartProps } from '../Products/Products.tsx'
import { TotalPrice } from '../TotalPrice'
import { Operation } from '../Quantifier/Quantifier.tsx'
import classes from './cart.module.scss'
import { useLocation } from 'react-router-dom'


export const Cart: FunctionComponent = () => {
  const [cart, setCart] = useLocalStorageState('cart', {})
  const location = useLocation()

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [location])

  const handleRemoveProduct = (productId: number): void => {
    setCart((prevCart) => {
      const updatedCart = { ...prevCart }
      delete updatedCart[productId]
      return updatedCart
    })
  }

  const handleUpdateQuantity = (productId: number, operation: Operation) => {
    setCart((prevCart) => {
      const updatedCart = { ...prevCart }
      if (updatedCart[productId]) {
        if (operation === 'increase') {
          updatedCart[productId] = { ...updatedCart[productId], quantity: updatedCart[productId].quantity + 1 }
        } else {
          updatedCart[productId] = { ...updatedCart[productId], quantity: updatedCart[productId].quantity - 1 }
        }
      }
      return updatedCart
    })
  }


  const getProducts = () => Object.values(cart || {})

  const totalPrice = getProducts().reduce((accumulator, product) => accumulator + (product.price * product.quantity), 0)

  return (
    
      Cart

      
        {getProducts().map(product => (
          
            
            {product.title}
            () => handleRemoveProduct(product.id)}
              productId={product.id}
              handleUpdateQuantity={handleUpdateQuantity} />
          
        ))}
      
      
    
  )
}

To enhance the overall appearance of the application, I have included a footer component. Here is an example of how it looks:

The implementation of the footer component is relatively straightforward. It consists of two links to social platforms and a copyright text.

import { FunctionComponent } from 'react'
import classes from "./footer.module.scss"
import packageJson from '../../../package.json'

export const Footer: FunctionComponent = () => {
  const currentYear = new Date().getFullYear()

  return (
    "footer">
      
        
          "https://twitter.com/mihailgaberov"
            target="_blank"
            rel="noopener noreferrer"
            data-cy="twitterLink"
          >
            twitter
          {" "}
          •{" "}
          "https://github.com/mihailgaberov"
            target="_blank"
            rel="noopener noreferrer"
            data-cy="githubLink"
          >
            github
          
        
        
          © {packageJson.author} {currentYear}. All rights reserved.
        
        
          v.{packageJson.version}
        
      
    
  )
}

Again, in the component folder you will find the other files that are necessary for applying the styles and the tests for that component.

🧪 Testing the App

I am sure you've already noticed that in all components folders, except the Loader one, we have .test.tsx files. These are the files containing the component tests that we run on the front end.

In order to do a test run, open your CLI and run the following command from the root directory of your project:

yarn test

This should run all tests and give you the following output:

Application Tests

Now that we've built all the necessary components, let's delve into a more detailed discussion about local storage and how we can leverage it to manage the application state more effectively.

🧠 What is LocalStorage?

Before we dive into the details, let's begin with a brief explanation of what local storage is. This will ensure that everyone, including those who are unfamiliar with it, can easily understand how we use this in the app.

App LocalStorage

LocalStorage is a feature provided by web browsers that allows web applications to store data locally on the user's device. It provides a simple key-value storage mechanism, similar to a dictionary or associative array.

Unlike session storage, which is temporary and gets cleared when the browser session ends, local storage persists even after the browser is closed and reopened. The data stored in local storage remains available until explicitly removed by the application or cleared by the user.

Local storage is primarily used for client-side data storage, enabling web applications to save user preferences, session data, or any other relevant information. This makes it a useful tool for creating personalized experiences and maintaining state across multiple visits to a website.

With that being said, you may have already guessed that local storage can be utilized to store the data of items added to the cart by the user. By doing so, when we navigate to the cart page, our application will be aware of which items should be displayed there.

To accomplish this, I utilized a React hook called use-local-storage-state.

In the Product List component, we added products to the LocalStorage whenever the user clicked on the Add to Cart button for each item. This ensured that the selected products were stored persistently.

Then, when the user navigates to the cart page, we retrieve the stored data from the LocalStorage and render the products accordingly. By doing so, the user can easily view and interact with the products they previously added to their cart.

Here is a snippet from the code itself.

We add the items to the LocalStorage like this:

const [cart, setCart] = useLocalStorageState('cart', {})
...
...
...

const addToCart = (product: Product):void => {
    product.quantity = 1

    setCart((prevCart) => ({
      ...prevCart,
      [product.id]: product,
    }))
  }

And then read the data like this:

const [cart, setCart] = useLocalStorageState('cart', {})
...
...
...

const getProducts = () => Object.values(cart || {})

And then render them like this:


        {getProducts().map(product => (
          <div className={classes.product} key={product.id}>
            <img src={product.thumbnail} alt={product.title} />
            <h3>{product.title}h3>
            <Quantifier
              removeProductCallback={() => handleRemoveProduct(product.id)}
              productId={product.id}
              handleUpdateQuantity={handleUpdateQuantity} />
          div>
        ))}

How to Automate Unit Testing with GitHub Actions

GitHub Actions is a powerful automation tool provided by GitHub. It allows you to define and execute workflows directly within your GitHub repository.

With GitHub Actions, you can automate various tasks and processes, such as building, testing, and deploying your code, as well as performing code analysis, generating documentation, and more.

GitHub Actions workflows are defined using YAML syntax. A workflow consists of one or more jobs, and each job consists of a series of steps to be executed. Steps can include actions (reusable units of code), shell commands, or scripts.

name: Shopping Cart CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [19.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '19'
          cache: 'yarn'
      - run: yarn install
      - run: yarn test

In our case, I utilized GitHub Actions to create a workflow that automatically runs the unit test suite whenever a new change is committed to the main branch. This ensures that no production build is triggered in the event of a test failure.

Implementing this workflow is straightforward and highly beneficial. It provides the reassurance that any issues inadvertently introduced into the main branch will be caught before reaching production. This level of reliability and peace of mind is easily achieved by leveraging the capabilities of GitHub Actions.

Shopping Cart app - GitHub Actions

Conclusion

The topic covered in this tutorial may not be novel or unfamiliar, but its scope of application is remarkably extensive.

Nearly every online application that involves trading or purchasing goods incorporates a shopping cart or basket functionality in some form. Because of this, if you're a software engineer working in this domain, you'll need to possess a solid understanding of how to implement this functionality and its underlying principles.

By acquiring a high-level knowledge of these concepts and understanding how things operate in general, we can effectively contribute to the development of robust and efficient e-commerce systems.

📘 You now understand the purpose and functionality of a shopping cart in an online application.

📘 You have learned how to implement a product list page by fetching data from a third-party REST API.

📘 You have learned how to create a cart component that retrieves and renders data from the browser's local storage.

📘 You have discovered the benefits of GitHub Actions and how they can provide confidence when promoting your code to production.

📘 And most importantly, you have embraced the mindset of continuous learning, understanding that there is always more to explore and discover in the vast world of software engineering.

By combining these newfound skills with a commitment to ongoing learning, you are well-equipped to create efficient and robust e-commerce systems while continuously improving your abilities in this dynamic field. Remember, the journey of knowledge acquisition never ends! 🎓

I hope you found this tutorial enjoyable and engaging. Most importantly, I hope you were able to actively follow along and even experiment with the code. Feel free to make your own modifications and observe the resulting changes in the end product. Hands-on exploration and experimentation are fantastic ways to solidify your understanding and expand your skills.

Remember, the best way to enhance your skills and understanding is through practice and experimentation. So feel free to dive into the code, make it your own, and observe the exciting results you can achieve. Happy coding and exploring!

Thanks for reading! 🙏

Component-Based Architecture in Medusa – How to Build Robust User Interfaces

valentine Gatwiri — Thu, 18 May 2023 18:22:11 +0000

Medusa is a modern JavaScript framework that makes it easy to build robust user interfaces.

It is built around a component-based architecture, which is a design pattern that breaks down a UI into smaller, reusable components. This makes it easier to maintain and update the UI, as well as to create new features.

Medusa is like a LEGO set for building user interfaces. Just as LEGO bricks can be assembled and combined to create various structures, Medusa allows you to build robust UIs by assembling and combining reusable components.

In this article, we'll explore the component-based architecture in Medusa. We will start by discussing the benefits of using this architecture, and then we will provide some code examples to show how you can use it to build user interfaces.

Benefits of Component-Based Architecture

There are many benefits to using the component-based architecture in Medusa. Some of the most important benefits include:

Reusability: Components can be reused in multiple places throughout the UI, which can save time and effort.
Maintainability: Components are isolated from each other, which makes it easier to maintain and update the UI.
Scalability: Components can be easily added to or removed from the UI, which makes it easy to scale the UI as needed.
Testability: Components can be easily tested in isolation, which makes it easier to ensure that they are working properly.

Understanding the Medusa Framework

Medusa is a comprehensive framework and toolset for building e-commerce applications. It provides the necessary components and infrastructure to develop, deploy, and manage online stores.

The Medusa Backend

The backend of Medusa focuses on server-side operations and manages the core functionalities of the e-commerce application. It includes components such as:

Server: Medusa provides a server that handles the logic and data management of the application. It facilitates communication between the frontend and various services, such as databases and payment gateways.
APIs: The backend exposes a set of APIs (Application Programming Interfaces) that allow the frontend and other applications to interact with the server. These APIs define the endpoints and data structures for performing actions like fetching products, processing orders, and managing user accounts.
Business Logic: The backend of Medusa implements the business rules and workflows specific to the e-commerce domain. It handles tasks such as inventory management, order processing, payment handling, and applying discounts or promotions.
Database Integrations: The backend interacts with a database to store and retrieve data related to products, orders, customers, and other entities. Medusa supports various databases, including PostgreSQL and MySQL, and provides an abstraction layer to simplify database operations.

The Medusa backend contains the following directories and files:

Medusa backend

The Medusa Frontend

The frontend of Medusa is responsible for the user-facing part of the e-commerce application. It focuses on providing an interactive and engaging interface for customers to browse products, add items to their cart, and complete the purchase. The frontend includes:

The Storefront: The storefront component represents the application where users interact with the e-commerce store. It includes product listings, search functionality, product details, shopping cart, and checkout flow. The frontend is responsible for rendering these components and handling user interactions.
The User Interface (UI): The frontend defines the visual layout, design, and user experience of the e-commerce application. It utilizes HTML, CSS, and JavaScript to create responsive and user-friendly interfaces. Medusa provides UI components and templates that can be customized and extended to match the branding and requirements of the online store.
Integration with Backend APIs: The frontend interacts with the backend APIs provided by the Medusa server. It communicates with the server to fetch product data, submit orders, update user information, and perform other operations. The frontend consumes the data returned by the backend APIs and uses it to render dynamic content on the user interface.

The Medusa frontend contains the following directories and files:

Medusa storefront

Medusa is written in TypeScript and uses React as its frontend framework. Medusa is divided into three main parts: the server, the storefront, and the admin panel.

Medusa is a complete e-commerce solution that includes various tools and components:

Server

Medusa provides a server that handles the core functionalities of an e-commerce application, such as managing product catalogs, handling orders and payments, and managing user accounts.

Here is how to access the backend:

cd my-medusa-store/backend
yarn start

To get started with Medusa, you can check out this article.

When we run yarn start in the backend, by default, localhost:9000 is used.

Navigate to localhost:9000/store/products in your browser to view a JSON collection of items. Because the seeder only inserts one product, it will only contain one item in the JSON object.

Storefront

Medusa offers a storefront component, which is the user-facing part of the application. It includes the website or interface where customers browse products, add items to their cart, and proceed with the purchasing process.

cd my-medusa-store/storefront
yarn develop # for Gatsby storefront
yarn dev # for Next.js storefront

Since I'm using Next.js in my store front, I'll be using yarn dev.When we run yarn dev in the storefront, by default, localhost:8000 is used.

Here's what the storefront should look like:

Admin Panel

Medusa provides an admin panel that enables the store owners or administrators to manage the e-commerce operations. It allows them to add and update products, process orders, handle inventory, configure shipping options, and perform other administrative tasks.

How to Set Up the Medusa Admin Dashboard

To set up the Medusa admin dashboard, follow these steps:

To install the package, you'll have to navigate to the directory of your Medusa backend and run the following command to install the admin dashboard:

yarn add @medusajs/admin

If you use npm, you can use the command below:

npm install @medusajs/admin

How to Enable the Admin Plugin in the Medusa Configuration File

To enable the admin plugin, open the medusa-config.js file in your project and locate the plugins array, then add the following lines:

const plugins = [
  // ...
  {
    resolve: "@medusajs/admin",
    /** @type {import('@medusajs/admin').PluginOptions} */
    options: {
      // ...
    },
  },
]

The admin plugin accepts various options for customization:

serve (default: true): A boolean indicating whether to serve the admin dashboard when the Medusa backend starts. Set it to false if you prefer to serve the admin dashboard separately using the yarn dev command.
path (default: "app"): A string indicating the path on which the admin server should run. It should not be prefixed or suffixed with a slash ("/"), and it cannot be one of the reserved paths: "admin" and "store".
outDir: Optional path specifying where to output the admin build files.
autoRebuild (default: false): A boolean indicating whether the admin UI should be automatically rebuilt if there are any changes or if a missing build is detected when the backend starts. If not set, you must manually build the admin dashboard.

You can enable autoRebuild by setting it to true in the plugin options to build the admin UI.

Run the admin dashboard using the yarn dev command.

This command starts both the Medusa Backend and the admin dashboard:

By default, the admin dashboard will be accessible at localhost:9000/app. If you have set a custom path option, the admin will be available at localhost:9000/, with being the value of the path option. You can learn more here.

Make sure to adjust the configurations and paths according to your specific setup.

By following these steps, you should be able to successfully set up and access the Medusa admin dashboard.

Understanding Medusa's Component-Based Architecture

Medusa uses a component-based architecture to make it easy to extend and customize. Each component is self-contained and can be reused in other parts of the app. This makes it easy to add new features or change the look and feel of the app without affecting other parts of the codebase.

Here is an example of a component from the Medusa starter app located in the storefront/src/modules/components/empty-cart-message folder:

import UnderlineLink from "@modules/common/components/underline-link"

const EmptyCartMessage = () => {
  return (
    <div className="bg-amber-100 px-8 py-24 flex flex-col justify-center items-center text-center">
      <h1 className="text-2xl-semi">Your shopping bag is emptyh1>
      <p className="text-base-regular mt-4 mb-6 max-w-[32rem]">
        You don't have anything in your bag. Let's change that, use
        the link below to start browsing our products.
      p>
      <div>
        <UnderlineLink href="/store">Explore productsUnderlineLink>
      div>
    div>
  )
}

export default EmptyCartMessage

This component renders a message when the shopping cart is empty. The message includes a link to the store so that users can start browsing products.

Here is a breakdown of the code:

The import UnderlineLink from "@modules/common/components/underline-link" statement imports the UnderlineLink component from the @modules/common/components module. This component will be used to render the link to the store.

The const EmptyCartMessage = () => { statement defines the EmptyCartMessage component. This component takes no props and returns a div element with the following attributes: className="bg-amber-100 px-8 py-24 flex flex-col justify-center items-center text-center".

The return statement returns the div element with the following content:

An h1 element with the text "Your shopping bag is empty".
A p element with the text "You don't have anything in your bag. Let's change that, use the link below to start browsing our products.".
A div element with the UnderlineLink component that links to the store.

Medusa vs Shopify

Medusa is an open-source alternative to Shopify. Here are some comparisons between the two products:

Customization and Flexibility

Medusa offers a high level of customization and flexibility. It allows developers to create highly tailored e-commerce applications that align with specific business requirements. With Medusa, developers have full control over the application's codebase and can customize various aspects, including the frontend and backend functionalities.

Shopify provides a less granular level of customization compared to Medusa. It operates as a hosted platform, meaning that the core infrastructure and backend are managed by Shopify. While Shopify offers a theme customization system and an app ecosystem to extend functionality, it may have limitations when it comes to implementing highly custom features.

Hosting and Infrastructure

Medusa is a self-hosted framework, which means that developers need to set up their own hosting environment and manage the infrastructure themselves. This provides more control and scalability, but also requires additional technical expertise and resources.

Shopify is a fully hosted platform, meaning that hosting and infrastructure management are handled by Shopify. This eliminates the need for developers to set up and maintain hosting environments, making it more accessible to non-technical users.

Pricing

As an open-source framework, Medusa is free to use, and there are no licensing fees. However, since it requires self-hosting, there may be associated costs for hosting services and infrastructure management.

Shopify operates on a subscription-based pricing model. It offers different pricing plans with varying features and transaction fees. The subscription fees cover hosting, security, and support services.

Ecosystem and App Integrations

Medusa has a growing ecosystem of extensions and integrations, allowing developers to leverage third-party tools and services to enhance their e-commerce applications. While the ecosystem may not be as extensive as Shopify's, Medusa's open-source nature enables developers to create custom integrations as needed.

Shopify has a vast ecosystem of apps and integrations available through the Shopify App Store. These apps can add functionality, extend features, and integrate with various services such as marketing, analytics, and shipping providers. The extensive app ecosystem of Shopify is one of its major strengths.

Target Audience

Medusa is suited for businesses that require advanced customization and flexibility in their e-commerce applications. It is a suitable choice for developers and businesses with technical expertise looking for full control over their e-commerce infrastructure.

Shopify is designed to cater to a wide range of users, including small to medium-sized businesses and individuals, who want a user-friendly and hassle-free e-commerce solution. It is suitable for users with limited technical knowledge or resources who prioritize ease of use and convenience.

Conclusion

The component-based architecture is a powerful design pattern that can be used to build robust user interfaces in Medusa. By using components, you can create reusable, maintainable, scalable, and testable UIs.

Medusa is a comprehensive e-commerce framework that includes a server, a storefront component, and an admin panel. It provides developers with the necessary tools to build customizable and scalable e-commerce applications, tailored to specific business needs.

I hope this article has been helpful. Please let me know if you have any questions.

How to Build Your Own E-Commerce Site with Medusa

Ashutosh Krishna — Mon, 27 Feb 2023 15:36:21 +0000

In today's digital age, having an online presence is crucial for businesses of all sizes.

Whether you're an established retailer or an aspiring entrepreneur, an ecommerce site can provide you with a platform to reach a global audience and sell your products or services around the clock.

Building an ecommerce site may seem like a daunting task, but with the right tools and guidance, anyone can create a professional and functional online store.

In this tutorial, you'll learn how to build your own e-commerce site with Medusa.

What is Medusa?

Medusa is an open source, composable commerce platform that's perfect for developers who want to create a customized ecommerce solution. With its flexible architecture and powerful features, Medusa offers a seamless and straightforward way to build a robust and scalable ecommerce site.

Medusa offers a variety of features, including order management with automated swaps, returns, and claims. It also enables customer management and assignment to customer groups, along with product customization and collection sorting.

With the ability to manage multiple regions and currencies, users can integrate various plugins and third-party services, create advanced pricing and discount rules, configure taxes, and set up multiple sales channels.

Additionally, Medusa offers bulk import and export strategies, and complete customization capabilities to create custom endpoints, services, subscribers, batch job strategies, and more.

In just over a year since its launch, this platform has quickly risen to become the #1 Node.js ecommerce solution, garnering over 17K+ stars on GitHub due to its immense popularity.

Architecture of Medusa

With a composable architecture, Medusa's frontend and backend components are loosely coupled. The platform consists of three different components: the headless backend, the admin dashboard, and the storefront.

You can choose to use the complete Medusa platform or just the parts that you require for your store.

Additionally, with the backend decoupled from the frontend, developers can focus on their respective areas of expertise. Backend developers can concentrate on the Medusa server, while frontend developers can focus on either the storefront or admin.

Medusa Architecture

In the upcoming sections, you will see how Medusa delivers most ecommerce store functionalities right out of the box, with the ability to configure these features to your specific use case.

Medusa Server

The Medusa server, which is a Node.js ecommerce backend, serves as a core component of the platform. It contains all the store's data and logic, and the other two components use its REST APIs to create, retrieve, and modify data.

The server provides most of the features related to an ecommerce workflow. These functionalities include managing products, carts, and orders, as well as integrating with shipping and payment providers and managing users.

In addition to that, you can configure your store including your store’s region, tax rules, discounts, gift cards, and more.

Since Medusa is highly extensible, it allows developers to build custom features such as automating customer group assignments and integrating ChatGPT to automate writing product descriptions.

In addition to that, you can also integrate third-party services into Medusa using Plugins. You can find both official and community plugins to assist you with your common needs. Learn more about these plugins here.

Medusa also allows you to extend its functionalities with new endpoints, business logic, and database entities. Additionally, you can create subscribers that listen to events and trigger specific actions.

Medusa Storefront

The storefront serves as the main presentation layer or frontend of your ecommerce store where customers can view and purchase your products. These storefronts can be in the form of progressive web applications or mobile apps.

Medusa offers two storefront starters built with Next.js and Gatsby, respectively. The storefront includes several features such as product listing and detail pages, customer authentication and profile functionalities, and a full checkout flow supporting shipping details and methods. It also comes with search capabilities ready for integration with top solutions like Algolia and MeiliSearch.

Below is a demonstration of what the Next.js storefront looks like:

In addition to the provided storefront starters, you have the freedom to create your own custom storefront using the Storefront REST APIs.

Medusa Admin

An ecommerce store's essential component is the Admin dashboard, which enables merchants to view, create, and modify data such as products and orders.

With the Medusa Admin dashboard, Medusa provides functionalities for store management, including product management, order management, and user management. You can manage your orders from various regions and channels using a single dashboard.

For merchants migrating their stores from other platforms, the admin dashboard provides easy import and export functionalities for large datasets of products, orders, and customers. The dashboard also offers customer-group functionality to create customized pricing lists, discounts, and gift cards.

This is what the Medusa Admin Dashboard looks like:

However, if you are not satisfied with the existing admin dashboard, you can utilize the Admin REST APIs to extend it beyond.

How to Set Up an Ecommerce Store Using Medusa

In this section, you'll set up the three components of your Medusa ecommerce store.

Prerequisites

Before you get started with the tutorial, you should have installed:

How to Set Up the Medusa Server

Creating a new Medusa server is a simple process using the Medusa CLI. Navigate to the directory where you want to create your Medusa server and run the following command to create a new Medusa server with the name my-medusa-store:

medusa new my-medusa-store --seed

This command will create a new Medusa server with the specified name. The --seed option tells the Medusa CLI to seed the data after creating the server. The seed data includes sample data such as products, categories, and more.

Once the command finishes executing, navigate to the my-medusa-store directory and start the server by running the following command:

cd my-medusa-store
medusa develop

In a couple of minutes, the server will start running on the default 9000 port. You can test it out by sending a request using a tool like Postman or through the command line:

curl localhost:9000/store/products

If your server is successfully set up, you will see a list of products and other details as below:

Output of cURL command

How to Set Up the Next.js Storefront

Now that your Medusa server is up and running, it's time to configure your storefront. In this section, you'll set up the Next.js storefront.

Create a new Next.js project using the Medusa Next.js starter template:

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

Navigate to the newly created directory my-medusa-storefront folder and rename the template environment variable file to use environment variables in development:

cd my-medusa-storefront
mv .env.template .env.local

Make sure the Medusa server is running, then run the local Next.js server:

npm run dev

Your Next.js storefront will now be running on its default port 8000.

Note: Medusa also provides you with the Gatsby starter template to create the storefront.

How to Set Up the Medusa Admin Dashboard

Since the Medusa Admin uses the Medusa server, make sure your server is up and running.

Start by cloning the Admin GitHub repository:

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

Navigate to the cloned my-medusa-admin folder and install all the dependencies:

cd my-medusa-admin
npm install

Run the development server:

npm run start

In a couple of minutes, the admin will start running on the default 7000 port. So, in your browser, go to localhost:7000 to view your admin.

Medusa Admin Login

If you had already seeded the data in your Medusa server, you can use the email admin@medusa-test.com and password supersecret to log in. If you hadn't, you can create a new admin user.

How to Set Up Medusa with `create-medusa-app`

Up to this point, you have seen how to set up individual components of a Medusa project. But in this section, you will learn how to set up a complete Medusa project with all three components using a single command.

Medusa now provides you with a create-medusa-app command to set up a project. This command provides an interactive prompt that guides you through the setup process.

To use create-medusa-app, simply run the following command:

npx create-medusa-app

Creating Medusa Project Using create-medusa-app

In this interactive setup, you will be prompted to enter the name of the directory where you want to install the Medusa project. The default name is my-medusa-store, but you can choose to name it something else.

Next, you will be asked to select a Medusa server starter from the available options, which include the default starter, the Contentful starter, and the option to enter a custom starter URL. The server will be installed in the backend directory of your project, and a demo SQLite database will be created within it.

Following the Medusa server setup, you will be prompted to choose a storefront starter from the available options. If you choose to install a storefront, it will be installed in the storefront directory of your project. If you choose "None", no storefront will be installed.

The admin is set up automatically inside the admin directory of your project.

Once the setup is complete, you will receive instructions on how to start each component of the Medusa project.

Your project is ready. The available commands are:

Medusa API
cd my-medusa-store/backend
yarn start

Admin
cd my-medusa-store/admin
yarn start

Storefront
cd my-medusa-store/storefront
yarn develop # for Gatsby storefront
yarn dev # for Next.js storefront

Just keep in mind that the commands can differ based on your choices in previous prompts.

Project Directory Structure

Inside the root project directory (which was specified at the beginning of the installation process – my-medusa-store in this case) you’ll find the following directory structure:

my-medusa-store
  ├── admin
  ├── backend
  └── storefront

Conclusion

In this tutorial, we've explored Medusa, an open-source e-commerce platform that provides a robust set of features for building online stores. We've looked at the architecture of Medusa, its key features, and how to set up the server, admin dashboard, and storefront.

One of the strengths of Medusa is its flexibility and extensibility. With a variety of plugins and extensions, you can customize your e-commerce site to meet your specific needs. You can also create your own plugins or themes, making it easy to build a site that reflects your brand.

If you're looking to build an e-commerce site, Medusa is a solid choice that offers a lot of functionality out of the box. With its user-friendly interface, setting up an online store is a straightforward process. Plus, since it's an open-source platform, you have the freedom to modify and extend it as needed.

Additional Resources

Here are some resources that you can use to extend the functionalities:

Integrate SendGrid as a notification provider.
Integrate Stripe as a payment provider.
Create a service.

How to Integrate PayPal into Your HTML, CSS, and JS Product Pages

freeCodeCamp — Wed, 25 Jan 2023 17:35:10 +0000

By Shane Duggan

Imagine if you had an amazing product landing page, with customers lined up to make a purchase. But your manual JavaScript payment processing with server-side scripts, Authorize.net, or 2Checkout failed you.

Frustrated by being unable to make the purchase, your customer leaves to go to your competitors.

I imagine that would be a terrible feeling. Surely, there is a better way to do this with modern, widely accepted payment gateways. By the end of this tutorial, I will make sure that you won’t find yourself in that situation.

When it comes to accepting payments online, PayPal is one of the most widely-used and trusted options available. There are many new software startups appearing every day that use PayPal to handle their transactions and clients’ payments.

Integrating PayPal into your own HTML/CSS/JS product pages can greatly improve the user experience and streamline the checkout process for your customers.

PayPal also has great developer documentation that makes this integration all the more user-friendly.

In this tutorial, we will take a look at the steps involved in integrating PayPal into your product pages. You'll learn how to set up your PayPal for integration and implement the code into your HTML/CSS/JS pages. Then we'll look at how you can use your newfound knowledge going forward.

How Can You Use This Tutorial?

Now, let me use an example to give you a better idea of how you can use this tutorial. (Fictitious story alert)

Recently, I decided to start a new online startup. After deliberating through countless ideas for software startups, I decided to start an online eBook store.

As my very first product, I published an eBook that covered 10 years of my life experience in programming. Excitedly, I created a product landing page with all my knowledge of HTML, CSS, and JavaScript.

Introducing MyProgrammingBook, a glorious $0.99 programming guide that contains everything you need to know, including how to get all of your searching algorithms to O(1) (not really…). Here is what it looks like:

My first eBook's product landing page

I created this product landing page within an hour using some simple vanilla HTML and CSS. Here are the files I used:

index.html

html>
<html>
  <head>
    <title>MyProgrammingBooktitle>
    <link rel="stylesheet" type="text/css" href="style.css">
  head>
  <body>
    <div class="product-container">
      <div class="product-image-container">
        <img src="myprogrammingbook.jpg" alt="MyProgrammingBook">
      div>
      <div class="product-info-container">
        <h1>MyProgrammingBookh1>
        <p class="price">$0.99p>
        <p class="product-description">
          Want to make all of your code run at O(1) speed? Then let me introduce MyProgrammingBook! Written by the world's leading expert on algorithmic optimization (me), this book will teach you everything you need to know to make your code lightning fast. Plus, it comes with a free unicorn* to help you implement all the techniques you learn. Don't miss out on this once-in-a-lifetime opportunity!
        p>
        <p>*Terms and Conditions Applyp>
      div>
      <form>
        <label for="name">Name:label>
        <input type="text" id="name" name="name" required>
        <label for="address">Address:label>
        <input type="text" id="address" name="address" required>
        <div class="card-info">
          <label for="card-number">Card Number:label>
          <input type="text" id="card-number" name="card-number" required>
        div>
        <div class="card-info">
          <label for="expiry-date">Expiry Date:label>
          <input type="text" id="expiry-date" name="expiry-date" required>
          <label for="cvv">CVV:label>
          <input type="text" id="cvv" name="cvv" required>
        div>
        <input type="button" value="Buy Now" onclick="submitForm()">
form>
    div>
    <script src="script.js">script>
  body>
html>

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

.product-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
}

.product-image-container {
  width: 30%;
}

.product-info-container {
  width: 70%;
  padding-left: 20px;
}

img {
  width: 100%;
  height: auto;
}

form {
  display: flex;
  flex-wrap: wrap;
}

label, input[type="text"] {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
}

label {
  width: 30%;
  padding-right: 10px;
}
input[type="text"] {
  width: 70%;
}

input[type="button"] {
  background-color: #ff5722;
  color: #fff;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
}

input[type="text"][name="card-number"], input[type="text"][name="expiry-date"], input[type="text"][name="cvv"] {
  width: 30%;
}


h1 {
  margin-top: 0;
}

.price {
  color: #ff5722;
  font-size: 1.5em;
  font-weight: bold;
}

script.js

With my outdated knowledge, I accept payment through a form to collect their payment details before manually processing it with a payment provider. A sample JavaScript file might look like this:

// Get references to the form elements
const form = document.getElementById("payment-form");
const cardNumber = document.getElementById("card-number");
const expiryDate = document.getElementById("expiry-date");
const cvv = document.getElementById("cvv");
const submitButton = document.getElementById("submit-button");

// Handle form submission
form.addEventListener("submit", (event) => {
  event.preventDefault();

  // Disable the submit button to prevent multiple submissions
  submitButton.disabled = true;

  // Create an object to hold the form data
  const formData = {
    cardNumber: cardNumber.value,
    expiryDate: expiryDate.value,
    cvv: cvv.value,
  };

  // Perform client-side validation on the form data
  if (!validateFormData(formData)) {
    // If the data is invalid, re-enable the submit button and return
    submitButton.disabled = false;
    return;
  }

  // Send the form data to the server
  // The following is just an example and should not be used in a real-world scenario
  // as it lacks security measures and proper payment gateway integration
  fetch("/charge", {
    method: "POST",
    body: JSON.stringify(formData),
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((response) => response.json())
    .then((data) => {
      // Handle the server response
      if (data.success) {
        // Payment was successful
        alert("Payment successful!");
      } else {
        // Payment failed
        alert("Payment failed. Please try again.");
        submitButton.disabled = false;
      }
    })
    .catch((error) => {
      console.error(error);
      alert("An error occurred. Please try again.");
      submitButton.disabled = false;
    });
});

function validateFormData(data) {
  // Example validation checks
  if (!data.cardNumber || data.cardNumber.length !== 16) {
    alert("Please enter a valid card number.");
    return false;
  }
  if (!data.expiryDate || data.expiryDate.length !== 5) {
    alert("Please enter a valid expiry date in the format MM/YY.");
    return false;
  }
  if (!data.cvv || data.cvv.length !== 3) {
    alert("Please enter a valid CVV.");
    return false;
  }
  return true;
}

However, this old-school way of taking a payment creates several problems:

Security: Without proper security measures, sensitive information such as credit card numbers and personal information can be vulnerable to hacking and fraud.
Compliance: A business may face penalties and legal issues without compliance with regulations such as PCI-DSS.
Scalability: Processing payments using only HTML, CSS, and JavaScript may not be able to handle a high volume of transactions, especially during peak periods.
Maintenance: Maintaining and updating a custom payment system can be time-consuming and costly.
Limited features: Collecting payments using only HTML, CSS, and JavaScript may lack features such as recurring payments, subscriptions, refunds, and fraud detection.
Lack of integration with other tools: Vanilla HTML, CSS, and JavaScript do not have built-in integrations with other tools like accounting software, inventory management software, and shipping providers.

So a much simpler way, not to mention more seamless and functional, would be to abstract away all of the payment handlings to a third party. Especially so as customers will more often than not be more familiar with using these third-party payment gateways already.

Even if you are not selling a product, this can be great for websites that are selling some kind of freelance service or consultation, a trend we have been seeing in recent times. Allowing the customer to checkout with a familiar third-party payment gateway directly from your website will add greatly to the user experience of your service.

It’s a win-win for you and the customer. You program less and they receive more. So let’s dive in to find out how we can implement this into your own websites.

How to Integrate PayPal into Your Product Pages

Now that we know what we want to achieve, let’s get into action. I have broken down the process into 6 easy-to-follow steps. They are:

Access PayPal’s developer tools to get your APIs.
Set up a PayPal sandbox environment.
Create and customize your PayPal button.
Integrate your button into your current files.
Test the integration using the PayPal sandbox environment.
Go live and start accepting real payments.

We’ve got a lot to cover, so let’s dive right in and get started!

How to Access PayPal’s Developer Tools to Get Your APIs

Step 1 for integrating PayPal into your HTML/CSS/JS product pages is creating a PayPal account. This step is crucial as it will give you access to PayPal's developer tools and APIs, which are necessary for integrating PayPal into your product pages.

If you already have one, just hop straight to the PayPal developer tools.

To create a PayPal account, you'll need to visit the PayPal website and follow the on-screen instructions to sign up. You'll be asked to provide some personal and financial information, such as your name, email address, and credit card details.

Once you've completed the sign-up process, you'll be able to log in to your PayPal account and access the developer tools and APIs needed for integration. It's important to use a valid email address as you will receive important information and updates from PayPal.

Then, you can find the developer tools at the top right of your PayPal dashboard.

Developer tab at the top right of your PayPal dashboard

How to Set Up a PayPal Sandbox Environment

The next step is to create a PayPal sandbox environment.

What is that, you might ask?

Well, a sandbox environment is a testing environment that mimics the live PayPal environment. It allows you to test your integration before going live, which is a great feature from PayPal to ensure that everything is working as expected.

To set up a PayPal sandbox environment, you'll need to log in to your PayPal account and navigate to the developer dashboard. From there, you can create a new sandbox account by following the on-screen instructions.

Once the sandbox account is created, you'll be able to use it to test your integration by making test payments. You can use the sandbox account in parallel with your live account.

Check your URL to contain "sandbox"

It's important to test your integration thoroughly and ensure that everything is working as expected before going live.

How to Create and Customize Your PayPal Button

This step involves creating the button that will be placed on your product page, allowing customers to initiate the payment process.

One way to create a PayPal button is by using the PayPal Button Creation Tool, which provides a user-friendly interface for customizing your button. You can choose from 3 different checkout styles, available on PayPal’s website.

Types of smart buttons offered by PayPal

Navigate to business tools > PayPal Buttons > Get Started > Smart Buttons. This will bring you to the button customization interface. Adjust the stylings to your liking, then simply click on “Copy Code”.

PayPal's smart button customization interface

Here is an example of the code for a PayPal Smart Button. Then, we must update our previous files to remove the form input and insert the following code instead. We will be covering that in the next step. Before that, this is the snippet of what you get from PayPal’s Smart Buttons:

<div id="smart-button-container">
    <div style="text-align: center;">
        <div id="paypal-button-container">div>
    div>
div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=USD" data-sdk-integration-source="button-factory">script>
<script>
    function initPayPalButton() {
        paypal.Buttons({
            style: {
                shape: 'rect',
                color: 'gold',
                layout: 'vertical',
                label: 'paypal',
            },

            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{"amount":{"currency_code": "USD", "value": 0.99}}]
                });
            },

            onApprove: function(data, actions) {
                return actions.order.capture().then(function(orderData) {

                    // Full available details
                    console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

                    // Show a success message within this page, for example:
                    const element = document.getElementById('paypal-button-container');
                    element.innerHTML = '';
                    element.innerHTML = 'Thank you for your payment!
';

                    // Or go to another URL:  actions.redirect('thank_you.html');

                });
            },

            onError: function(err) {
                console.log(err);
            }
        }).render('#paypal-button-container');
    }
    initPayPalButton();
script>

Do note that you will have different fields for your own needs, so do customize your own button and reference the code for that, not from my tutorial.

There are also different button styles to choose from, so feel free to play around to find something that suits your style.

Now that we’re ready, let’s integrate this code into our current files.

How to Integrate Your Button into Your Current Files

With our button code fresh out of the box, let’s integrate this into our current files. Very simply, we just need to replace the HTML fields that we are not going to use, namely the form and replace it with the button we created.

To remain consistent with the programming style we used for the example, I am going to abstract away the JavaScript to the script.js file. That should give us the following files:

index.html

html>
<html>
  <head>
    <title>MyProgrammingBooktitle>
    <link rel="stylesheet" type="text/css" href="style.css">
  head>
  <body>
    <div class="product-container">
      <div class="product-image-container">
        <img src="myprogrammingbook.jpg" alt="MyProgrammingBook">
      div>
      <div class="product-info-container">
        <h1>MyProgrammingBookh1>
        <p class="price">$0.99p>
        <p class="product-description">
          Want to make all of your code run at O(1) speed? Then let me introduce MyProgrammingBook! Written by the world's leading expert on algorithmic optimization (me), this book will teach you everything you need to know to make your code lightning fast. Plus, it comes with a free unicorn* to help you implement all the techniques you learn. Don't miss out on this once-in-a-lifetime opportunity!
        p>
        <p>*Terms and Conditions Applyp>
        <div id="smart-button-container">
          <div style="text-align: center;">
            <div id="paypal-button-container">div>
          div>
        div>
        <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=USD" data-sdk-integration-source="button-factory">script>
        <script type="text/javascript" src="script.js">script>
      div>
    div>
  body>
html>

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

.product-container {
  max-width: 600px;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
}

.product-image-container {
  width: 30%;
}

.product-info-container {
  width: 70%;
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

img {
  width: 100%;
  height: auto;
}

.product-info-container form {
  width: 100%;
  margin-top: 20px;
  align-self: flex-end;
}

h1 {
  margin-top: 0;
}

.price {
  color: #ff5722;
  font-size: 1.5em;
  font-weight: bold;
}

script.js

function initPayPalButton() {
  paypal.Buttons({
    style: {
      shape: 'rect',
      color: 'gold',
      layout: 'vertical',
      label: 'paypal',

    },

    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{"amount":{"currency_code":"USD","value":0.99}}]
      });
    },

    onApprove: function(data, actions) {
      return actions.order.capture().then(function(orderData) {

        // Full available details
        console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

        // Show a success message within this page, for example:
        const element = document.getElementById('paypal-button-container');
        element.innerHTML = '';
        element.innerHTML = 'Thank you for your payment!
';

        // Or go to another URL:  actions.redirect('thank_you.html');

      });
    },

    onError: function(err) {
      console.log(err);
    }
  }).render('#paypal-button-container');
}
initPayPalButton();

These files are going to give us the following slick product landing page:

My new landing page with PayPal's smart buttons

How to Test the Integration Using the PayPal Sandbox Environment

Before going live with your PayPal integration on your product page, it is important to test the integration to ensure that it is working correctly and to identify any issues.

One way to do this is by using the PayPal Sandbox environment that we discussed earlier.

To use the PayPal Sandbox with the account you created earlier, you will be given a set of Sandbox test accounts (buyer and seller) that you can use to test your integration.

With these Sandbox accounts set up, you will need to ensure your PayPal button code on your product page points to the Sandbox environment.

You can do this by checking that the URL in the PayPal button code redirects you to "https://www.sandbox.paypal.com" instead of "https://www.paypal.com".

Check your URL to contain "sandbox"

With your PayPal button code working, you can now test the integration by visiting your product page and clicking on the PayPal button. You will be taken to the PayPal Sandbox checkout page where you can enter your Sandbox test account credentials and simulate a purchase.

Once you've completed a test transaction, you can log in to your Sandbox account to view the transaction details and confirm that it was processed correctly.

How to Go Live and Start Accepting Real Payments

After successfully testing your PayPal integration in the Sandbox environment, you are now ready to go live and start accepting real payments on your product page.

Going live involves a few simple steps to ensure that your integration is set up correctly and ready to process real payments.

The first step is to update your PayPal button code on your product page to point to the live PayPal environment. Conversely to earlier, ensure that the URL in the PayPal button code redirects you to "https://www.paypal.com" instead of "https://www.sandbox.paypal.com".

Next, you will need to update your PayPal account settings to ensure that your account is set up to process live payments. This typically involves confirming your email address and phone number, as well as adding a valid payment method such as a bank card.

It is also important to ensure that your product page is fully functional and that any necessary information such as product details, prices, and shipping costs are accurate.

Finally, you should notify your customers that you are now accepting payments via PayPal, and provide them with clear instructions on how to complete a purchase.

With all these steps complete, you can now start accepting real payments via PayPal on your product page!

Where To Go From Here?

Now that you’re all up to speed with getting PayPal integrations up and running on your own websites, why would this be useful to you? Are there no easier ways to integrate payments into your website? Let me give you some context.

Personally, I thought that no-code tools were becoming the norm in recent times, thinking that I probably wouldn’t need to be coding any web pages in vanilla HTML, CSS, and JavaScript soon. But with the new wave of online startups, such as AI tools and data analytics software, revolving around making API requests from a simple user interface, I think the 3 big languages might make a bit of a comeback.

Wanting to start one of my own (so the story earlier wasn’t entirely fictitious…), I found myself coming back to the good old vanilla web development languages to get the job done. And they did so faster than no-code tools – like this simple sentence-length checker I programmed in under an hour.

So I wouldn’t forget about learning how to integrate features, such as this, into standard HTML, CSS, and JavaScript pages. Sometimes, when it comes to wanting to create a simple product or service page that gets the job done, you might want to rely on old ways with new integrations as your solution.

Wrapping Up and Conclusion

Let me give you a quick recap:

If you're looking to get a simple SaaS company going, then vanilla HTML, CSS, and JavaScript might be your best friends. When it comes to integrating PayPal into your product pages, it is important to remember a few key points to ensure a smooth and successful integration.

Firstly, it is essential to have a PayPal account and to be familiar with the PayPal Developer documentation.
Secondly, ensure that your HTML and CSS files are well structured and designed to match your product page.
Lastly, use the PayPal Sandbox environment for testing to ensure everything is spick and span before going live with real payments.

As a reminder, it is important to keep in mind that collecting payments through a form on your website is not a secure way of accepting payments, and it is recommended to use a payment gateway such as PayPal to ensure the security of your customer's sensitive information.

With these points in mind, you can now confidently set up PayPal on your product pages and start accepting payments securely and easily. I hope you enjoyed this tutorial, and if you did, don't hesitate to get in contact. Wishing you the best of luck selling your products to the masses!

How to Build a Production Ready eCommerce Website with ReactJS, TailwindCSS, PlanetScale and Stripe

Sharvin Shah — Tue, 25 Oct 2022 16:30:14 +0000

Hello, welcome to this tutorial. Today we're going to build a production-ready eCommerce website using ReactJS, TailwindCSS, PlanetScale, and Stripe.

Before we begin, you should be familiar with the basics of React.js and Next.js to get the most out of this guide.

If you're not and need to brush up, I recommend you go through the ReactJS and NextJS documentation.

The stack we will use:

ReactJS is a JavaScript library for building user interfaces. It is declarative and component-based.
NextJS is a React-based framework that lets us render data on the server side. It helps Google crawl the application which results in SEO benefits.
PlanetScale is a database as a service that is developed on Vitess, an open-source technology that powers YouTube and uses MySQL internally.
TailwindCSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in our markup.
Prisma is an ORM built for NodeJS and TypeScript which handles automated migrations, type-safety, and auto-completion.
Vercel will host our application. It scales well, all without any configuration, and deployment is instant.
Stripe is a payment gateway, and we will use it to accept online payments on the website.

How to Configure PlanetScale, Stripe, NextJS, Prisma and Other Libraries
How to Implement Mock Data, Category-Products API and All Category-Single Category UI
How to Implement Single Product UI and Stripe Checkout
How to Deploy the Website to Production

I am going to divide this tutorial into four separate sections.

At the start of every section, you will find a Git commit that has the code developed in that section. Also, if you want to see the complete code, then it is available in this repository.

How to Configure PlanetScale, Stripe, NextJS, TailwindCSS, and Prisma.

In this section, we'll implement the following functionality:

Create a PlanetScale Account and Database.
Create a Stripe Account.
Configure NextJS, TailwindCSS, and Prisma.

You can find the eCommerce website code implemented in this section at this commit.

How to Configure PlanetScale:

To create a PlanetScale account, visit this URL. Click on Get started button at the top right corner.

PlanetScale Landing Page

You can either create an account using GitHub or a traditional email-password. Once the account is created, then click on the "create" link.

PlanetScale Dashboard Page

You'll receive the following modal:

PlanetScale New Database Modal

Fill in the details and click on the Create database button. Once the database is created you'll be redirected to the following page:

PlanetScale Ecommerce Website Database Page

Click on connect and a modal will open. This modal will contain a Database URL and this password cannot be generated again. So copy and paste it into a safe location.

PlanetScale Database Username and Password Modal

How to Configure Stripe:

To create a Stripe account, go to this URL. Once you've created the account, click on the Developer Button from the Nav menu. You'll see API keys on the left side and you'll find the Publishable key and Secret key under Standard keys.

Publishable key: These are the keys that can be publicly-accessible in a web or mobile app’s client-side code.

Secret key: This is a secret credential and should be securely stored in the server code. This key is used to call the Stripe API.

How to Configure NextJS, TailwindCSS, and Prisma.

First, we will create a NextJS app using the following command:

npx create-next-app ecommerce-tut --ts --use-npm

Once the project is created, open it with your favourite editor. You'll get the following structure:

Project Structure

Let's create a directory named src. We will move the pages and styles directory to that src folder. You'll get the following structure:

Project Structure after moving Pages and Styles.

Install the following packages:

npm i @ngneat/falso @prisma/client @stripe/stripe-js @tanstack/react-query currency.js next-connect react-icons react-intersection-observer stripe

We also need to install dev dependencies:

npm i --save-dev @tanstack/react-query-devtools autoprefixer postcss tailwindcss

Let's understand each of the packages:

@ngneat/falso: We will use this library to create mock data for our eCommerce website. In an ideal world, you would have an admin panel to add the products, but it is not in the scope of this tutorial.
@prisma/client: We will use this library to connect to our database, run migrations, and do all CRUD operations on the database.
@stripe/stripe-js: We will use this library to redirect users to the stripe checkout page and process payment.
@tanstack/react-query: We will use this library for managing our asynchronous state, that is caching API responses.
currency.js: We will use this library for converting our prices to two decimal format.
next-connect: We will use this library for routing purposes on our Next API layer.
react-icons: We will use this library for adding icons to our buttons and links.
react-intersection-observer: Have you seen infinite scrolling on a lot of websites and wondered how it is implemented? We will use this library to implement that based on the viewport.
stripe: We will use the Stripe library to connect with Stripe API from our Next API layer.
@tanstack/react-query-devtools: We will use this library as the only dev dependency to view and manage our cache during development time.
TailwindCSS: We will use this as our CSS library that also requires PostCSS and AutoPrefixer.

Let's configure TailwindCSS into our project using the following command:

npx tailwindcss init -p

You'll get the following response:

TailwindCSS Config Success

Now go to tailwind.config.js and update it with the following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx}",
        "./src/components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

To generate the CSS, Tailwind needs access to all the HTML Elements. We will be writing the UI components under pages and components only, so we pass it under content.

If you need to use any plugins, for example, typography, then you need to add them under the plugins array. If you need to extend the default theme provide by Tailwind, then you need to add it under theme.extend section.

Now go to /src/styles/globals.css and replace the existing code with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

We will add these three directives in our globals.css file. The meaning of each directive is as follows:

@tailwind base: This injects a base style provided by Tailwind.
@tailwind components: This injects classes and any other classes added by the plugin.
@tailwind utilities: This injects hover, focus, responsive, dark mode and any other utility added by the plugin.

Remove the Home.module.css from src/styles directory and go to src/pages/index.ts and replace the existing code with the following:

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
    return (
        
            
                All Products
                
                
            

            
                Hello
            
        
    );
};

export default Home;

When we run the create-next-app command to create the project, it adds some boilerplate code. Here we removed that in some instances while replacing index.ts with an h1 and text that says "Hello".

It's time to run the website using the following command:

npm run dev

You'll get the following response:

Open http://localhost:3000 on your browser, and you'll get the following screen with a hello message:

Screen with Hello Message

Let's configure Prisma into our project using the following command:

npx prisma init

You'll get the following response:

Prisma Successfully Configured Message

Under prisma/schema.prisma replace the existing code with the following code:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider             = "mysql"
  url                  = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

model Category {
  id        String    @id @default(cuid())
  name      String    @unique
  createdAt DateTime  @default(now())
  products  Product[]
}

model Product {
  id          String    @id @default(cuid())
  title       String    @unique
  description String
  price       String
  quantity    Int
  image       String
  createdAt   DateTime  @default(now())
  category    Category? @relation(fields: [categoryId], references: [id])
  categoryId  String?
}

This file consists of our database source that is MySQL. We are using MySQL because PlanetScale supports MySQL only.

Also, we have created two models that are:

Product:

title: Every product will have a unique title.
description: This is just information about the product.
price: It is of String type because it will hold a decimal value.
quantity: It is of Int type because it will hold a numerical value.
image: Representation of what the product will look like. We will use placeimg for the purpose of this tutorial.
createdAt: The date when a product is added.
category: A foreign relationship with the category model.

We are using cuid() instead of uuid() for the id because they are better for horizontal scaling and sequential lookup performance. Prisma has inbuilt support for CUID. You can read more about it here.

Now time to update our .env file with the following:

DATABASE_URL=

STRIPE_SECRET_KEY=

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=

You'll find the Stripe secret key and publishable key under the dashboard. The database URL is the one that we had copy-pasted earlier and kept in a safe location. Update this .env with those credentials.

Also, note that the .gitignore file created by NextJS doesn't ignore the .env file. It is configured to ignore the .env.local file. But Prisma requires .env, so we will replace the .gitignore file content with the following:

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

Ideally, Prisma manages schema migration using the prisma migrate command. But as PlanetScale has its schema migration mechanism inbuilt, we will use that. Use the following command to push migration to our current main branch.

Note, our main branch is not yet promoted as a production branch.

npx prisma db push

Now let's generate the Prisma client using the following command:

npx prisma generate

Go to the PlanetScale Dashboard, and there you'll find two tables created:

PlanetScale Two Tables Created

Click on these tables, and you'll be redirected to the following page:

PlanetScale Database Schema

How to Implement Mock Data, Category-Products API, and All Category-Single Category UI.

In this section, we'll implement the following functionality:

Create mock data
Create a Category and Product API.
Create an All Category and Single Category UI.

You can find the eCommerce website code implemented in this section at this commit.

How to Create the Mock Data:

Under the prisma directory, create a file named seed.ts and copy-paste the following code:

import {
    randBetweenDate,
    randNumber,
    randProduct,
    randProductAdjective,
} from "@ngneat/falso";
import { PrismaClient } from "@prisma/client";

const primsa = new PrismaClient();

const main = async () => {
    try {
        await primsa.category.deleteMany();
        await primsa.product.deleteMany();
        const fakeProducts = randProduct({
            length: 1000,
        });
        for (let index = 0; index < fakeProducts.length; index++) {
            const product = fakeProducts[index];
            const productAdjective = randProductAdjective();
            await primsa.product.upsert({
                where: {
                    title: `${productAdjective} ${product.title}`,
                },
                create: {
                    title: `${productAdjective} ${product.title}`,
                    description: product.description,
                    price: product.price,
                    image: `${product.image}/tech`,
                    quantity: randNumber({ min: 10, max: 100 }),
                    category: {
                        connectOrCreate: {
                            where: {
                                name: product.category,
                            },
                            create: {
                                name: product.category,
                                createdAt: randBetweenDate({
                                    from: new Date("10/06/2020"),
                                    to: new Date(),
                                }),
                            },
                        },
                    },
                    createdAt: randBetweenDate({
                        from: new Date("10/07/2020"),
                        to: new Date(),
                    }),
                },
                update: {},
            });
        }
    } catch (error) {
        throw error;
    }
};

main().catch((err) => {
    console.warn("Error While generating Seed: \n", err);
});

Here we are creating 1000 fake products and adding them to the database.

We are following these steps to add the products:

Delete all the categories using the deleteMany() function.
Delete all the product using the deleteMany() function.
The above are optional steps, but it's always a good idea to rerun the seed script with a clean table.
As the title attribute from the product table has unique property associated with it we bind it with the randProductAdjective function output to make repetitions less likely.
But still, there is a probability that the title property created by the falso gets repeated. So we use the upsert method from @prisma/client.
We are also creating/associating the category when we create a product.

Now go to package.json and update the following code below scripts:

"prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\" prisma/seed.ts"
},

We will use the ts-node package to run our seed script command. The seed script is written in TypeScript while ts-node converts TypeScript code to JavaScript.

Use the following command to install the package:

npm i --save-dev ts-node

As the ts-node will convert the code to JavaScript, we can execute the following command to seed the tables with mock data:

npx prisma db seed

You'll get the following output that will show it has started running. It will take some time to seed the tables with mock data.

Once the seed command is successful, you'll get the following response:

The benefit of Prisma is that it also has a studio, which can be used to view the database in a local development environment. Use the following command to run this studio:

npx prisma studio

Open http://localhost:5555, on your browser, and you'll get the following screen with all the tables:

Prisma Studio

The number of Products and Categories may vary on your side or be similar, as this is random data.

How to Create the Category and Product APIs:

Under the src/pages/api category you'll find a file named hello.ts. Remove this file and create two directories named categories and products.

Inside those categories, create a file named index.ts and copy-paste the following code:

import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { prisma } from "../../../lib/prisma";
import { TApiAllCategoriesResp, TApiErrorResp } from "../../../types";

const getCategories = async (
    _req: NextApiRequest,
    res: NextApiResponse
) => {
    try {
        const categories = await prisma.category.findMany({
            select: {
                id: true,
                name: true,
                products: {
                    orderBy: {
                        createdAt: "desc",
                    },
                    take: 8,
                    select: {
                        title: true,
                        description: true,
                        image: true,
                        price: true,
                    },
                },
            },
            orderBy: {
                createdAt: "desc",
            },
        });
        return res.status(200).json({ categories });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).get(getCategories);

export default handler;

In the above snippet, we are doing the following:

When we create a file under the pages>api directory, NextJS treats it as a Serverless API. So by creating a file named categories/index.ts we are informing Next that it needs to convert this to the /api/categories API.
Using the next-connect library we are making sure that only the get operation is allowed for the getCategories function.
Under this function, we are querying the database with an order as desc for the createdAt property and we only take the latest eight product rows for each category row. We also select a specific property from the product and category that are required by the front end.

We don't query all the products for each category in this API, because it will slow down our response time.

You'll find that we have imported prisma and types files. Let's create two directories under src named lib and types.

Under the lib directory, create a file named prisma.ts, and under the types directory create a file named index.ts.

Let's create our global Prisma constant under prisma.ts. Copy-paste the following code:

import { PrismaClient } from "@prisma/client";

declare global {
    var prisma: PrismaClient;
}

export const prisma =
    global.prisma ||
    new PrismaClient({
        log: [],
    });

if (process.env.NODE_ENV !== "production") global.prisma = prisma;

Here we are creating a global prisma variable which we can use across the project.

Let's add the types that we will use application-wide under src/types/index.ts.

Copy-paste the following code:

export type TApiAllCategoriesResp = {
    categories: {
        id: string;
        name: string;
        products: {
            title: string;
            description: string;
            image: string;
            price: string;
        }[];
    }[];
};

export type TApiSingleCategoryWithProductResp = {
    category: {
        id: string;
        name: string;
        products: {
            id: string;
            title: string;
            description: string;
            image: string;
            price: string;
            quantity: number;
        }[];
        hasMore: boolean;
    };
};

export type TApiSingleProductResp = {
    product: {
        title: string;
        description: string;
        price: string;
        quantity: number;
        image: string;
    };
};

export type TApiErrorResp = {
    message: string;
};

Here we are creating four types which will be used across the project.

I'll be using Postman to test this API. Postman is a utility for developing APIs. You can call the APIs, and Postman will show the response based on how you structure it.

Just update the URL in Postman to:

http://localhost:3000/api/categories

And you'll get the following response:

All Categories Resp

Now let's create an API to get a single category's information with its products.

Under the src/pages/api/categories directory create a file named [id].ts and copy-paste the following code:

import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { prisma } from "../../../lib/prisma";
import {
    TApiErrorResp,
    TApiSingleCategoryWithProductResp
} from "../../../types";

const getSingleCategory = async (
    req: NextApiRequest,
    res: NextApiResponse
) => {
    try {
        const id = req.query.id as string;
        const cursorId = req.query.cursorId;
        if (cursorId) {
            const categoriesData = await prisma.category.findUnique({
                where: {
                    id,
                },
                select: {
                    id: true,
                    name: true,
                    products: {
                        orderBy: {
                            createdAt: "desc",
                        },
                        take: 12,
                        skip: 1,
                        cursor: {
                            id: cursorId as string,
                        },
                        select: {
                            id: true,
                            title: true,
                            description: true,
                            image: true,
                            price: true,
                            quantity: true,
                        },
                    },
                },
            });

            if (!categoriesData) {
                return res.status(404).json({ message: `Category not found` });
            }

            let hasMore = true;
            if (categoriesData.products.length === 0) {
                hasMore = false;
            }

            return res
                .status(200)
                .json({ category: { ...categoriesData, hasMore } });
        }

        const categoriesData = await prisma.category.findUnique({
            where: {
                id,
            },
            select: {
                id: true,
                name: true,
                products: {
                    orderBy: {
                        createdAt: "desc",
                    },
                    take: 12,
                    select: {
                        id: true,
                        title: true,
                        description: true,
                        image: true,
                        price: true,
                        quantity: true,
                    },
                },
            },
        });
        if (!categoriesData) {
            return res.status(404).json({ message: `Category not found` });
        }

        let hasMore = true;
        if (categoriesData.products.length === 0) {
            hasMore = false;
        }

        return res
            .status(200)
            .json({ category: { ...categoriesData, hasMore } });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).get(getSingleCategory);

export default handler;

In the above snippet, we are doing the following:

By creating a file named [id].ts under src/pages/api/categories we are telling NextJS to convert this to the /api/categories/[id] API.
The [id] is the category id from the category table.
Using the next-connect library we are making sure that only the get operation is allowed for the getSingleCategory function.
Under this function, we are querying the database with order as desc for the createdAt property and we only take the latest twelve product rows. We also select a specific property from the product that is required by the front end.

In this API, you will find that we have implemented pagination also. It helps us get more products under one category.

There are two kinds of pagination. One is cursor based, and another is offset-based pagination.

So why did we choose cursor-based pagination instead of offset-based pagination?

According to the Prisma docs,

"Offset pagination does not scale at a database level. For example, if you skip 200,00 records and take the first 10, the database still has to traverse the first 200,00 records before returning the 10 that you asked for - this negatively affects performance."

For more information read this helpful guide.

Update the URL in Postman to:

http://localhost:3000/api/categories/cl91683hp006d0mvlxlg5u176?cursorId=cl91685ht00b00mvllxjwzkqk

Our URL consists of two ids and you'll need to add cl91683hp006d0mvlxlg5u176 from the previous all-category response. This cl91685ht00b00mvllxjwzkqk id is just the cursor of the product and you can add this as the last one you want.

You'll get the following response:

Single Category Resp

Now let's create an API to get single product information.

Under the src/pages/api/products directory create a file named [title].ts and copy-paste the following code:

import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { prisma } from "../../../lib/prisma";
import { TApiErrorResp, TApiSingleProductResp } from "../../../types";

const getSingleProduct = async (
    req: NextApiRequest,
    res: NextApiResponse
) => {
    try {
        const title = req.query.title as string;
        const product = await prisma.product.findUnique({
            where: {
                title,
            },
            select: {
                title: true,
                description: true,
                price: true,
                quantity: true,
                image: true,
            },
        });
        if (!product) {
            return res.status(404).json({ message: `Product not found` });
        }
        return res.status(200).json({ product });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).get(getSingleProduct);

export default handler;

In the above snippet, we are doing the following:

By creating a file named [title].ts under src/pages/api/products we are informing NextJS to convert this to the /api/products/[title] API.
The [title] is the product title from the product table.
Using the next-connect library we are making sure that only the get operation is allowed for the getSingleProduct function.
Under this function, we are querying the database using the findUnique query based on the title.

Update the URL in Postman to:

http://localhost:3000/api/products/Practical Gorgeous Fresh Shoes

Here Practical Gorgeous Fresh Shoes is the title of the product we want to get. You can replace it with any product title from your database.

You'll get the following response:

Single Product Resp

How to Create the All Category and Single Category UIs:

Under src/pages/_app.tsx, replace the existing code with the following:

import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import type { AppProps } from "next/app";
import queryClient from "../lib/query";
import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <QueryClientProvider client={queryClient}>
            <ReactQueryDevtools initialIsOpen={false} />
            <Component {...pageProps} />
        QueryClientProvider>
    );
}

export default MyApp;

Here we are wrapping all our components with React QueryClient Provider. But we also need to pass in the Client Context.

Under the src/lib directory create a new file named query.ts and copy-paste the following code:

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default queryClient;

We are initiating a new QueryClient object and assigning it to the queryClient variable and exporting it as default. The reason we do this is that in this way we get to keep the queryClient object as a global context.

Under src/pages/index.tsx, replace the existing code with the following:

import { useQuery } from "@tanstack/react-query";
import type { NextPage } from "next";
import Head from "next/head";
import Navbar from "../components/Navbar";
import ProductGrid from "../components/ProductGrid";
import Skelton from "../components/Skelton";

const Home: NextPage = () => {
    const getAllCategories = async () => {
        try {
            const respJSON = await fetch("/api/categories");
            const resp = await respJSON.json();
            return resp;
        } catch (error) {
            throw error;
        }
    };

    const { isLoading, data } = useQuery(
        ["AllCategoreiesWithProducts"],
        getAllCategories
    );

    const categories = data?.categories;

    return (
        <div>
            <Head>
                <title>All Productstitle>
                <meta name="description" content="All Products" />
                <link rel="icon" href="/favicon.ico" />
            Head>

            <main className="container mx-auto">
                <Navbar />
                {isLoading ? (
                    <Skelton />
                ) : (
                    <>
                        {categories && categories?.length > 0 && (
                            <ProductGrid
                                showLink={true}
                                categories={categories}
                            />
                        )}
                    
                )}
            main>
        
    );
};

export default Home;

Let's understand our code.

Here we are fetching the data from the /api/categories endpoint that we wrote earlier. We are using useQuery to cache this data with the key AllCategoreiesWithProducts.

But there are three components that we haven't created yet. Let's create those and understand each one.

Under the src directory, create a components directory. Under the newly created components directory, create three files named Navbar.tsx, ProductGrid.tsx and Skelton.tsx.

Under Navbar.tsx copy-paste the following code:

import NextLink from "next/link";

const Navbar = () => {
    return (
        <div className="relative bg-white mx-6">
            <div className="flex items-center justify-between pt-6 md:justify-start md:space-x-10">
                <div className="flex justify-start lg:w-0 lg:flex-1">
                    <h1 className="text-2xl">
                        <NextLink href="/" className="cursor-pointer">
                            Ecomm App
                        NextLink>
                    h1>
                div>
            div>
        div>
    );
};

export default Navbar;

Here we have created an h1 with the text as Ecomm App. We have wrapped this text around NextLink and set the location as /. So when user clicks on this, they will be redirected to the home page.

Under ProductGrid.tsx copy-paste the following code:

import NextImage from "next/image";
import NextLink from "next/link";
import { useEffect } from "react";
import { AiOutlineRight } from "react-icons/ai";
import { useInView } from "react-intersection-observer";
import { TApiAllCategoriesResp } from "../types";

interface IProductGrid extends TApiAllCategoriesResp {
    showLink: boolean;
    hasMore?: boolean;
    loadMoreFun?: Function;
}

const ProductGrid = (props: IProductGrid) => {
    const { categories, showLink, loadMoreFun, hasMore } = props;
    const { ref, inView } = useInView();

    useEffect(() => {
        if (inView) {
            if (loadMoreFun) loadMoreFun();
        }
    }, [inView, loadMoreFun]);

    return (
        <div className="bg-white">
            {categories.map((category) => (
                <div className="mt-12  p-6" key={category.name}>
                    <div className="flex flex-row justify-between">
                        <span className="inline-flex items-center rounded-md bg-sky-800 px-8 py-2 text-md font-medium text-white">
                            {category.name}
                        span>
                        {showLink && (
                            <NextLink href={`/category/${category.id}`}>
                                <p className="flex flex-row gap-2 underline hover:cursor-pointer items-center">
                                    View More
                                    <AiOutlineRight />
                                p>
                            NextLink>
                        )}
                    div>
                    <div className="mt-6  grid grid-cols-1 gap-y-10 gap-x-6 xl:gap-x-8 sm:grid-cols-2 lg:grid-cols-4">
                        {category?.products.map((product) => (
                            <div
                                className="p-6 group rounded-lg border border-gray-200 bg-neutral-200"
                                key={product.title}
                            >
                                <div className="min-h-80 w-full overflow-hidden rounded-md group-hover:opacity-75 lg:aspect-none lg:h-80">
                                    <NextImage
                                        priority={true}
                                        layout="responsive"
                                        width="25"
                                        height="25"
                                        src={`${product.image}`}
                                        alt={product.title}
                                        className="h-full w-full object-cover object-center lg:h-full lg:w-full"
                                    />
                                div>
                                <div className="relative mt-2">
                                    <h3 className="text-sm font-medium text-gray-900">
                                        {product.title}
                                    h3>
                                    <p className="mt-1 text-sm text-gray-500">
                                        {product.price}
                                    p>
                                div>
                                <div className="mt-6">
                                    <NextLink
                                        href={`/product/${product.title}`}
                                    >
                                        <p className="relative flex items-center justify-center rounded-md border border-transparent bg-sky-800 py-2 px-8 text-sm font-medium text-white hover:bg-sky-900 hover:cursor-pointer">
                                            View More Details
                                        p>
                                    NextLink>
                                div>
                            div>
                        ))}
                    div>
                    {!showLink && (
                        <div className="flex items-center justify-center mt-8">
                            {hasMore ? (
                                <button
                                    ref={ref}
                                    type="button"
                                    className="inline-flex items-center rounded-md border border-transparent bg-sky-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-900"
                                >
                                    Loading...
                                button>
                            ) : (
                                <div className="border-l-4 border-yellow-400 bg-yellow-50 p-4 w-full">
                                    <div className="flex">
                                        <div className="ml-3">
                                            <p className="text-sm text-yellow-700">
                                                You have viewed all the Products
                                                under this category.
                                            p>
                                        div>
                                    div>
                                div>
                            )}
                        div>
                    )}
                    {showLink && (
                        <div className="w-full border-b border-gray-300 mt-24" />
                    )}
                div>
            ))}
        div>
    );
};

export default ProductGrid;

Here we have created a grid that will show 1 column for the base screen. For the sm screen it will show 2 columns and for the lg screen it will show 4 columns.

Under this, we have a single card which has a Title, Price, and View More Details button. The View More Details button redirects the user to a single product page which will create a bit later.

Apart from that, we are using the useInView hook from the react-intersection-observer library to find the user's cursor on the screen. This ref is attached to a Loading... button and once user is near it then we execute the loadMoreFn function.

It makes an API call to the server to get the next twelve rows from the last cursor.

Under Skelton.tsx copy-paste the following code:

const Skelton = () => {
    return (
        <>
            <div className="mt-12 h-8 w-40 rounded-lg bg-gray-200" />
            <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
                {Array(16)
                    .fill(0)
                    .map((_val, index) => (
                        <div className="rounded-2xl bg-black/5 p-4" key={index}>
                            <div className="h-60 rounded-lg bg-gray-200" />
                            <div className="space-y-4 mt-6 mb-4">
                                <div className="h-3 w-3/5 rounded-lg bg-gray-200" />
                                <div className="h-3 w-4/5 rounded-lg bg-gray-200" />
                            div>
                        div>
                    ))}
            div>
        
    );
};

export default Skelton;

We are using placeimg to get fake images for our product and we are using the Next Image component which requires that it be mentioned under next.config.js.

Replace the existing code in next.config.js with the following code:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    images: {
        domains: ["placeimg.com"],
    },
};

module.exports = nextConfig

We will need to restart our server. Use the following command to start your development server again:

npm run dev

Open http://localhost:3000/ and you'll see the following UI:

All Products Page

Now let's create a single category page that the user can go to using a View More link.

Under src/pages create a directory named category. Under this directory create a file named [id].tsx and copy paste the following code:

import { useInfiniteQuery } from "@tanstack/react-query";
import Head from "next/head";
import { useRouter } from "next/router";
import Navbar from "../../components/Navbar";
import ProductGrid from "../../components/ProductGrid";
import Skelton from "../../components/Skelton";

const SingleCategory = () => {
    const router = useRouter();

    const getSingleCategory = async ({ pageParam = null }) => {
        try {
            let url = `/api/categories/${router.query.id}`;
            if (pageParam) {
                url += `?cursorId=${pageParam}`;
            }
            const respJSON = await fetch(url);
            const resp = await respJSON.json();
            return resp;
        } catch (error) {
            throw error;
        }
    };

    const { isLoading, data, fetchNextPage, isError } = useInfiniteQuery(
        [`singleCategory ${router.query.id as string}`],
        getSingleCategory,
        {
            enabled: !!router.query.id,
            getNextPageParam: (lastPage) => {
                const nextCursor =
                    lastPage?.category?.products[
                        lastPage?.category?.products?.length - 1
                    ]?.id;
                return nextCursor;
            },
        }
    );

    const allProductsWithCategory: any = {
        name: "",
        products: [],
        hasMore: true,
    };

    data?.pages.map((page) => {
        if (page?.category) {
            if (page.category?.name) {
                allProductsWithCategory.name = page.category?.name;
            }
            if (page.category?.products && page.category?.products.length > 0) {
                allProductsWithCategory.products.push(
                    ...page.category?.products
                );
            }
        }
        return page?.category;
    });

    if (data?.pages[data?.pages.length - 1]?.category?.products.length === 0) {
        allProductsWithCategory.hasMore = false;
    }

    return (
        <div>
            <Head>
                <title>
                    {isLoading
                        ? "Loading..."
                        : `All ${allProductsWithCategory?.name} Product`}
                title>
                <meta
                    name="description"
                    content="Generated by create next app"
                />
                <link rel="icon" href="/favicon.ico" />
            Head>
            <main className="container mx-auto">
                <Navbar />
                {isLoading ? (
                    <Skelton />
                ) : (
                    <>
                        {allProductsWithCategory &&
                            allProductsWithCategory.products.length > 0 && (
                                <ProductGrid
                                    hasMore={allProductsWithCategory.hasMore}
                                    showLink={false}
                                    categories={[allProductsWithCategory]}
                                    loadMoreFun={fetchNextPage}
                                />
                            )}
                    
                )}
            main>
        
    );
};

export default SingleCategory;

Here we are calling the /api/categories/[id] API to get the latest twelve products for that category id.

We are using the useInfiniteQuery hook from react query to fetch the data. This hook is useful for cursor-based pagination. We will be using the ProductGrid component that we created earlier.

Open http://localhost:3000/, click on the View More link for any of the category, and you'll see the following UI:

Single Category Page

The difference between the previous UI and the current is that we now don't have the View More Link in the top right corner. Also, when you scroll below, you'll get more products for that category.

Once we scroll through all the products in that category we will see the following warning alert:

How to Implement Single Product UI and Stripe Checkout.

In this section, we'll implement the following functionality:

Create Single Product UI
Create Stripe Checkout

You can find the eCommerce website code implemented in this section at this commit.

How to Create the Single Product UI:

Under the src/pages directory create a directory named product.

Under this directory create a file named [title].tsx and copy-paste the following code:

import { loadStripe, Stripe } from "@stripe/stripe-js";
import { useMutation, useQuery } from "@tanstack/react-query";
import Head from "next/head";
import NextImage from "next/image";
import { useRouter } from "next/router";
import Navbar from "../../components/Navbar";
import Skelton from "../../components/Skelton";

const stripePromiseclientSide = loadStripe(
    process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

const SingleProduct = () => {
    const router = useRouter();

    const getSingleProduct = async () => {
        try {
            const title = router?.query?.title;

            const respJSON = await fetch(`/api/products/${title}`);
            const resp = await respJSON.json();
            return resp;
        } catch (error) {
            throw error;
        }
    };

    const { mutate, isLoading: mutationIsLoading } = useMutation(
        async (body: any) => {
            try {
                const respJSON = await fetch("/api/create-checkout-session", {
                    method: "POST",
                    body: JSON.stringify(body),
                });
                const resp = await respJSON.json();
                const stripe = (await stripePromiseclientSide) as Stripe;
                const result = await stripe.redirectToCheckout({
                    sessionId: resp.id,
                });
                return result;
            } catch (error) {
                throw error;
            }
        }
    );

    const { data, isLoading } = useQuery(
        [`singleProduct, ${router?.query?.title}`],
        getSingleProduct,
        {
            enabled: !!router?.query?.title,
        }
    );

    const product = data?.product;

    return (
        <div>
            <Head>
                <title>{isLoading ? "Loading..." : `${product?.title}`}title>
                <meta
                    name="description"
                    content="Generated by create next app"
                />
                <link rel="icon" href="/favicon.ico" />
            Head>
            <main className="container mx-6 md:mx-auto">
                <Navbar />
                {isLoading ? (
                    <Skelton />
                ) : (
                    <div className="bg-white">
                        <div className="pt-6 pb-16 sm:pb-24">
                            <div className="mx-auto mt-8">
                                <div className="flex flex-col md:flex-row gap-x-8">
                                    <div className="min-h-80 w-full overflow-hidden rounded-md group-hover:opacity-75 lg:aspect-none lg:h-80">
                                        <NextImage
                                            layout="responsive"
                                            width="25"
                                            height="25"
                                            src={`${product.image}`}
                                            alt={product.title}
                                            className="h-full w-full object-cover object-center lg:h-full lg:w-full"
                                        />
                                    div>
                                    <div className="lg:col-span-5 lg:col-start-8 mt-8 md:mt-0">
                                        <h1 className="text-xl font-medium text-gray-900 ">
                                            {product.title}
                                        h1>
                                        <p className="text-xl font-light text-gray-700 mt-4">
                                            {product.description}
                                        p>
                                        <p className="text-xl font-normal text-gray-500 mt-4">
                                            USD {product.price}
                                        p>
                                        <button
                                            onClick={() =>
                                                mutate({
                                                    title: product.title,
                                                    image: product.image,
                                                    description:
                                                        product.description,
                                                    price: product.price,
                                                })
                                            }
                                            disabled={mutationIsLoading}
                                            type="button"
                                            className="inline-flex items-center rounded-md border border-transparent bg-sky-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-900  mt-4"
                                        >
                                            Buy Now
                                        button>
                                    div>
                                div>
                            div>
                        div>
                    div>
                )}
            main>
        div>
    );
};

export default SingleProduct;

Here we are calling /api/products/title API to get the latest product. We have also created Stripe Interface for creating a checkout method once a user clicks the Buy Now button.

Once the user clicks the Buy Now button, we make an API call to /api/create-checkout-session using the useMutation hook. On a successful response, we redirect the user to the Stripe default checkout page.

Open http://localhost:3000/ and click on View More Details button for any product.

You'll see the following UI:

Single Product Page

You can also visit this page by clicking on the View More link and then clicking on the View More Details button for any product.

How to Set Up Stripe Checkout:

To set up Stripe Checkout, we need to add a new file under the lib directory.

Create a new file named stripe.ts under the lib directory and copy paste the following code:

import Stripe from "stripe";

const stripeServerSide = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-08-01",
});

export { stripeServerSide };

Here we are creating server-side instances of Stripe. Now under the pages/api directory, create a new file named create-checkout-session.ts and copy-paste the following code:

import currency from "currency.js";
import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { stripeServerSide } from "../../lib/stripe";
import { TApiErrorResp } from "../../types";

const checkoutSession = async (
    req: NextApiRequest,
    res: NextApiResponse<any | TApiErrorResp>
) => {
    try {
        const host = req.headers.origin;
        const referer = req.headers.referer;
        const body = JSON.parse(req.body);
        const formatedPrice = currency(body.price, {
            precision: 2,
            symbol: "",
        }).multiply(100);
        const session = await stripeServerSide.checkout.sessions.create({
            mode: "payment",
            payment_method_types: ["card"],
            line_items: [
                {
                    price_data: {
                        currency: "usd",
                        product_data: {
                            name: body?.title,
                            images: [body.image],
                            description: body?.description,
                        },
                        unit_amount_decimal: formatedPrice.toString(),
                    },
                    quantity: 1,
                },
            ],
            success_url: `${host}/thank-you`,
            cancel_url: `${referer}?status=cancel`,
        });
        return res.status(200).json({ id: session.id });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).post(checkoutSession);

export default handler;

In the snippet above we are doing the following:

Formatting the price with precision as two and multiplying it by 100 as Stripe expects the unit_amount in cents by default.
We create the session and pass the id as the response.

Now we need to create another page named thank-you.tsx under the src/pages directory. Once the product purchase is successful, Stripe Checkout will redirect to this page.

Copy-paste the following code under this file:

import Head from "next/head";
import { useRouter } from "next/router";
import { HiCheckCircle } from "react-icons/hi";
import Navbar from "../components/Navbar";

const ThankYou = () => {
    const router = useRouter();
    return (
        <div>
            <Head>
                <title>Thank Youtitle>
                <meta name="description" content="All Products" />
                <link rel="icon" href="/favicon.ico" />
            Head>

            <main className="container mx-auto">
                <Navbar />
                <div className="rounded-md bg-green-50 p-4 mt-8">
                    <div className="flex">
                        <div className="flex-shrink-0">
                            <HiCheckCircle
                                className="h-5 w-5 text-green-400"
                                aria-hidden="true"
                            />
                        div>
                        <div className="ml-3">
                            <h3 className="text-sm font-medium text-green-800">
                                Order Placed
                            h3>
                            <div className="mt-2 text-sm text-green-700">
                                <p>
                                    Thank you for your Order. We have placed the
                                    order and your email will recieve further
                                    details.
                                p>
                            div>
                            <button
                                onClick={() => router.push("/")}
                                type="button"
                                className="inline-flex items-center rounded-md border border-transparent bg-sky-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-900 mt-4"
                            >
                                Continue Shopping
                            button>
                        div>
                    div>
                div>
            main>
        div>
    );
};

export default ThankYou;

Open http://localhost:3000/ and click on the View More Details button of any product.

Click on the Buy Now button and you'll be redirected to the following page:

Add all the details for the test card. You can use any card from this link. Stripe provides various test cards which work only during Test Mode. Once you click on Pay and payment processing happens, Stripe will redirect you to the success page.

Thank You Page

How to Deploy the Website to Production

In this section, we'll implement the following functionality:

Promote our PlanetScale branch to Main.
Deploy the app on Vercel.

How to Promote the PlanetScale Branch to Main:

To promote the branch to main, we can do it either via the terminal or dashboard. I'll use the dashboard for this tutorial.

Go to your project on PlanetScale and you'll find the following message on the dashboard:

PlanetScale Database Promotion

Let's click on the Promote a branch to production button and you'll get a confirmation model. Click on the Promote branch button. Once done you'll get a toast with a success message.

How to Deploy to Vercel:

If you don't have an account on Vercel, you can create one here.

You can create a project on GitHub and push it to the Main branch. If you don't know how, you can check out this tutorial.

Once the project is pushed on GitHub, go to Vercel and create an Add New button and select Project from the drop down.

Add New Project Vercel

You'll get the following the UI:

Select Git Provider Vercel

As we have pushed the code on GitHub, let's click on the Continue with GitHub button. You'll get the following UI:

Select Git Repository Vercel

Click on Import and you'll get the following UI:

Configure Project Vercel

Click on the Environment Variables and add these three there:

Add NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY, and DATABASE_URL

Once done click the Deploy button. You'll get the following UI once the deployment starts:

Deploying Vercel

Once deployed, Vercel will give you a Unique URL.

Visit this URL and you'll find its failing. Let's go to the deployment > functions and you'll see the following error:

Prisma generate Fails

We need to update our build command in package.json as follows:

"build": "npx prisma generate && next build",

Push the code again to the Git repository and you'll find that Vercel starts redeploying your project.

Once the deployment is done, you can visit your application URL and you'll find it shows all your products.

With this, we have created our production-ready eCommerce application. If you have built the website along with the tutorial, then a very big congratulations to you on this achievement.

Thank you for reading!

Feel free to connect with me on Twitter and Github.

If you want any project to be developed or want to consult with me, you can DM me on my Twitter (@sharvinshah26 ).

Shopify Email Automation – How to Automatically Send Emails

Edan Ben-Atar — Thu, 31 Mar 2022 17:00:18 +0000

Email automation is not something new in the e-commerce space. And it's a pretty simple and straightforward concept.

Email automation is all about sending emails to customers based on events that occur on your website, like abandoned cart emails, order confirmation emails, shipping confirmation emails, and so on.

The result? You save time by not having to do this work manually.

Why Email Automation is Important

Email is still one of the most effective marketing channels. Email marketing has a higher ROI than any other form of digital advertising, and even with all the new tools available to us, it’s still the most cost-effective channel.

Adding automation to your emails can take them even further. Emails are automatically sent based on triggers you set up so that they reach your customers when they’re most likely to convert. Automation also allows you to send messages at scale without any manual work.

Email also provides a direct line of communication with your customers and, if done correctly, can be something people look forward to opening.

It’s a powerful tool, but it’s not just about sending more emails — it’s about sending better ones.

Shopify email automation lets you send personalized emails to each customer as they interact with your business individually and receive follow-up messaging based on their purchase behavior, browsing activity, and even gives them recommendations based on their buying history.

This post will cover different types of email automation, what their purpose is, and how it can benefit the customers and e-commerce stores.

Why is Shopify email automation essential?

There are many reasons for implementing email automation on your Shopify store. Here are just a few:

It saves time.
It increases engagement.
It improves conversion rates.
It enhances the customer experience.
It saves time.

Saving time

Email automation can save you a lot of time by automating tedious, repetitive tasks that would otherwise need to be done manually and individually to each recipient.

This is especially useful when sending a large number of emails in a short amount of time, such as in an event invitation or email marketing campaign.

Establishing trust

You can use email automation to establish trust with your customers, which will help increase engagement with your brand and business.

You can also use it to build relationships with your subscribers and increase the likelihood that they'll make a purchase or recommend you to their friends and family.

Improving conversion rates

As a business owner, you have to think about how you can improve your conversion rate constantly. This is especially true if you're trying to grow your business.

One of the biggest benefits of using email marketing automation software is that it can improve your conversion rate.

When used correctly, email automation can help you reach more people in less time. It can also help you get them interested enough about what you have to offer so that they actually buy from you instead of just browsing around aimlessly on your website.

Shopify email marketing automation software

Klavyio

Klavyio is a tool that you can use to set up automated email workflows. It’s a third-party tool (not built by Shopify) that integrates with your store and helps you build stronger relationships with your customers, as well as increase sales.

Using Klavyio, you can create emails that are sent automatically when a customer purchases a product from your store or when they abandon their cart. You can also set up emails to be sent at different points after someone spends time browsing your site, or even if no one has visited for a while.

Not sure how you would use Klavyio in your store? Here are some ideas:

Send an abandoned cart recovery email after someone leaves items in their cart but doesn't purchase them. You can use the personalization features in Klavyio to show the specific products they left behind, so they're more likely to come back and buy.
Send a newsletter about new products or store promotions to your existing customers. This is a great way to let people know about things happening in your store.
Start building a segment of customers who have purchased from you before. Then send them exclusive offers that aren't available to anyone else.

Here's how it works:

Klaviyo takes all your customer data and allows you to build experience across email, owned channels and measure the results in revenue.
Klaviyo uses machine learning to analyze and group your customers into segments that are most likely to buy.
Klaviyo automatically creates personalized emails based on what each segment is most interested in.

That way, you know exactly what to send and when to send it.

If a customer adds a product to their cart but doesn’t check out, the abandoned cart email is triggered after some time. This mail includes a list of products that were left behind in the shopping cart. This is when customers return to their carts and complete the transaction in many cases.

Someone who adds a product to their cart is a qualified lead. You can use the abandoned cart email automation process to bring them back with their cart and complete their transaction.

Abandoned carts are triggered after a set period of time, usually between 60 minutes and 24 hours. The product list in the mail reminds them what they were doing and leads them back to the checkout page.

Zapier

Zapier is a web-based service that allows you to connect your favorite web apps and automate workflows—without the headache of learning how to code. It’s a great way to extend the functionality of existing apps.

Zapier uses a trigger-action model. A trigger starts a workflow, and an action ends it.

Zapier moves info between your web apps automatically so that you can focus on your most important work.

To use Zapier, you'll first need to select the app(s) you want to create an automation between. You can either search for your app (Shopify, Gmail, and so on) or scroll through the list of popular apps.

Here’s how Zapier can help you:

Add new leads to a drip campaign
Trigger follow-up emails after a purchase
Send predefined email responses
Forward contact form submissions to your inbox
Add new contacts to your email list

The best part? You don’t need any technical skills or a big budget. If you can point, click, and type, Zapier can help you automate your email marketing—and more.

For email marketing services, this means Zapier can listen for events and then trigger actions in other apps.

For example, when someone subscribes to your mailing list or when someone purchases something from your Shopify store, Zapier can be instructed to send the user's information to your CRM.

Or, if a new Google Sheets row is created with customer/user data—names, emails, phone numbers—Zapier can add that person as a subscriber to your mailing list automatically.

Integromat

Integromat is a powerful workflow automation platform with a focus on scalability, reliability, and flexibility. It enables you to connect Shopify triggers and actions to other apps, web services, or API endpoints.

The platform offers a range of capabilities such as complete control over data flow, API creation, and management tools for developers, as well as scenario builder for non-technical users.

Integromat also allows you to automate complex processes that would otherwise require hiring experienced developers.

Here are some of the things you can do using this integration:

Send out welcome emails, confirmations, and reviews as soon as your customers sign up to your store or place an order on it
Use different templates based on the product bought by each customer
Segment your subscribers based on their activity, location, and purchase history.

Takeaways

Shopify email automation can be your sales partner if you implement it wisely.

Email automation will probably become your best friend in the long run, especially when it comes to marketing. And if you're having a hard time deciding which strategy to go for, then think of this: email automation is designed to help you improve your sales experience and, ultimately, increase sales.

And it's not just about marketing. Email automation can be used throughout the customer journey to improve their experience as well.

Now that you know more about Shopify email automation, there's no reason not to research and learn more about it – because there is definitely a lot for you out there.

How to Choose a CMS – WordPress vs Ghost vs Shopify

Edan Ben-Atar — Wed, 02 Feb 2022 17:05:13 +0000

WordPress, Shopify, and Ghost are some of the most powerful and popular CMS platforms out there.

And you might wonder why so many people use them. Well, it's because they're easy to use, cost-effective, and highly efficient.

With WordPress, Shopify, and Ghost, you can create a website from scratch in a matter of minutes.

Tailored to your needs, these powerful website builders can help you achieve anything from building an e-commerce website to starting your own blog or showcasing your portfolio.

It's no wonder why so many businesses choose these platforms. But which one should you choose?

We can't simply say that one is better than the other, because there's no single solution that will work in every situation.

So in this article, we'll cover the three platforms and look at their strengths and weaknesses so that you can figure out what will work best for your particular situation.

If you Want to Build a Blog From Scratch – Use Ghost

If you are a blogger who is looking for an open-source platform, Ghost might be the perfect choice for you.

The fact that it’s open-source enables you to alter the code of the platform, customize it, and make it more suitable to your writing needs.

And even if you’re not a coder, you can get help from other users who are willing to contribute to the community by fixing bugs or adding new features.

Tutorials on how to install Ghost on your own web server are available online. You can also choose to go with a hosted plan, which allows you to use themes created by other users instead of relying on the default theme.

Ghost is a platform that is based on Node.js, and it runs using Node.js servers. It comes with a rich plugin system, allowing you to customize your blog to suit your own needs.

Ghost lets you to use Markdown instead of HTML for writing. This makes it easy for you to write directly in the browser window.

If you don’t know about Markdown, it is a lightweight markup language that allows you to write in rich text but with simpler code, as opposed to HTML.

In fact, one of the benefits of Ghost over other platforms is that your posts are written in Markdown rather than HTML or text files, which results in much cleaner code.

You Can Use Ghost as a Headless CMS

Ghost has a flexible architecture, which means it can be used as a headless CMS. In fact, it's one of the most popular headless content management systems in the JAMStack.

A headless CMS allows you to build a front-end website or application, such as a mobile app, with an API that calls the CMS for its data. You can deploy the API and your website or app to separate servers or environments without having to change anything within your content.

Since the API delivers data from the CMS, you will have full control over that data, including permissions, tags, and categories. If you need to make changes to your content, you will only have to make those changes on one end rather than both.

Headless CMSs are often used for building websites and applications with JavaScript frameworks such as AngularJS and React.js. However, if you need to render a dynamic site with multiple pages using a single API call, this type of CMS can be beneficial as well.

To use a headless CMS, you will need to learn how it works and how to utilize it through its API. This may require additional development resources, depending on your skill level.

This approach is gaining popularity among startups and agencies who want more control over the display of content while still retaining the ability to make updates through a central interface.

Advantages of Using Ghost

Ghost is a free, easy-to-use CMS that doesn’t require any kind of coding skills.

Along with simplicity, Ghost CMS comes with lots of out-of-the-box features which make it really appealing to bloggers and small businesses.

You can add multiple authors, set up collaborative writing, track analytics, create polls, customer support forums, manage templates, and much more using drag and drop features.

Things get interesting as you start using third-party apps on Ghost. There are numerous integrations available for installing apps like Google Analytics and Disqus comments.

Some other pros include:

It has a clean, minimalistic design. If you want your blog to be beautiful, then Ghost CMS is great for that.
Complete tools. You get all the tools that are required in creating a blog, starting from the installation to setting up the theme with the drag and drop features.
Customizable themes. The themes can be customized using the built-in theme editor that makes it really easy for anyone to modify them as per their needs.
Ghost community. If you’re stuck, you can find help from other Ghost users by going over their forums and asking questions.

If You Want to Take Your Website to the Next Level – Use WordPress

You can use WordPress as a simple blogging platform, but it is also a fully-featured content management system (CMS). It allows you to build custom websites and blogs if you want to take your business to the next level.

Because of its popularity, there is an active support community and lots of free training materials.

Tutorials for the basic functionality and more advanced features are widely available online.

WordPress is free, but if you need help installing it or customizing it for your needs, you can purchase web hosting from a reputable company. Hosting costs vary depending on the type of hosting service you choose.

You can install WordPress yourself or pay someone to do it for you. The WordPress website provides instructions on how to install the software on different server platforms.

Once installed on your server, WordPress will allow you to create your own blog page. You have complete control over the look and feel of your site through the use of themes, which are pre-built designs for the layout of your pages.

Themes are available for purchase or free download from the WordPress website. You can also design your own custom theme if you're up to the challenge.

You might want a more complicated site than what is provided by the basic WordPress installation. In that case, you can hire a designer to build you a customized theme or using an existing theme as a framework and add your own custom features through plugins. Plugins extend the features of themes with special design elements and programming functions.

Advantages of using WordPress

WordPress is by far the most customizable option in this list. It features the most comprehensive library of themes and plugins, allows you to edit the source code quite easily, and even write your own custom functionalities.

You can think of WordPress as the CMS that falls between Ghost and Shopify, as it allows you to run an eCommerce store and a blog at the same time by simply installing a compatible theme.

WordPress lets you take your blog to the next level and scale your eCommerce store as your business grows.

The downside is that sooner or later you will need a developer’s help. This is because the more plugins you install, the slower your website will get, and users hate slow websites (not to mention search engines).

Some other pros include:

Extremely cheap to get started with. You can get a WordPress website up and running for free, and basic hosting plans start as low as $18.96 per year.
Ability to assign user roles. At some point during your business growth cycle, you might need to bring in extra people to help you create, edit and publish content. WordPress comes with built-in user roles which will make your life a whole lot easier.
Best marketing plugins on the market. You can install one of the many SEO plugins available in the plugin directory. Some examples include Yoast or Rank Math. These plugins help you optimize your content (like articles, pages, and even product pages) and increase your chances of outranking your competitors.
A vast array of integrations. Chances are you will be using 3rd party SaaS products like Mailchimp or ActiveCampaign. Regardless of the service, you will find it extremely easy to integrate them with your website as almost all have created a WordPress plugin.
The biggest online library of resources. The WordPress community is by far the largest which makes it easy to find answers to all your questions regarding your installation. There are tens of thousands of websites and forums focused solely on WordPress websites featuring tons of information.

If You Want the Fastest Way to Start an eCommerce Business – Use Shopify

Shopify started in 2006 as an online store for snowboarding equipment. Back then, the CMS ecosystem was lacking a robust and easy-to-use solution, so the Shopify creators decided to code their own.

Needless to say, this was a hit. In the years that followed more and more stores have started to use the Shopify CMS. As of May 2021, more than 1.7 million businesses from some 175 countries use Shopify to run their businesses.

By far the simplest and fastest way to start an eCommerce business, Shopify is mainly used by nontechnical people that want to bring their brick and mortar stores online. In no more than a few minutes you can have your own website up and running and start accepting online payments.

But Shopify is also used by some of the biggest online stores on the Internet, which makes it a great option if you want to scale your business to the next level, and have the funds to do so.

Some of Shopify’s advantages:

Extremely easy to get started with. The CMS was built with ease of use in mind. Anyone can get a store up and running in no time. You don’t have to know how to code or even how to connect a domain to your website as Shopify does all that for you.
Compatible with most major third-party services. Shopify connects out of the box with the biggest third-party services, like Klaviyo for email marketing or Facebook Ads for paid advertising.
Plenty of apps in the app store. If you feel that your store needs additional functionality, like bundle discounts, for example, you will be happy to hear that there are tons of apps that can help you achieve this. Just be careful and look at their cost as they can go up rather quickly.

Some of Shopify’s disadvantages:

Can get pretty expensive. Shopify is extremely easy to start with, but that comes with a cost. The cheapest plan (Basic) starts at $29 per month, while the most expensive one (Advanced) reaches $299 per month. The main difference is the commission applied by Shopify on payments.
High payment fees. You have to take into account that Shopify charges up to a 2% fee on your transactions (on the Basic plan). This commission decreases with the plan to a minimum of 0.5% (on the Advance plan). In comparison, WooCommerce doesn’t charge you a percentage of your sales.
Shopify developers are expensive. If you want to customize your store beyond basic functionalities you will need the help of a developer, and they are not cheap. However, there are a multitude of apps available that can help you achieve your goals.
Most Shopify Apps have a monthly cost. You can find free apps in the app store, but most of them have a monthly cost (compared to a fixed one-time fee charged by the vast majority of WordPress plugins).
The blog functionality isn't great. Shopify is an eCommerce-centric platform so there’s no wonder that they haven’t spent too much time optimizing their blog functionality. Big stores choose to host their blogs on WordPress while keeping their storefront on Shopify.

In conclusion, you can use Ghost to start your blog almost instantly, or Shopify to configure a fast and secure online store. And, if you want to get the best out of both worlds, you might want to go with WordPress.

The ultimate WordPress guide is a free resource that will help you understand the basics and help you launch your new website in no time, so be sure to give it a read before you make the big decision of choosing a specific platform.

How to Set Up a Payment Gateway in Next.js and React with Razorpay and TailwindCSS

freeCodeCamp — Tue, 21 Dec 2021 18:16:10 +0000

By Manu Arora

If you have an e-commerce application, a payment gateway lets you process payments on your website on the fly.

With all the modern payment gateway solutions available these days, there are many ways you can integrate payments and charge your users for your product or services.

In this tutorial, we are going to build a landing page that lets the end user purchase products from a web application. The page looks like this:

Live Demo: Integrate Payments Source Code: Integrate Payments Source Code

Some of the popular payment gateways that are available are:

Today, we are going to learn how to integrate Razorpay with a Next.js (React) application and understand how the flow actually works.

Tech Stack

For our Stack, we are going to use the following technologies:

Next.js - A framework for React that gives access to serverless functions and React architecture.
TailwindCSS - A utility-based CSS framework for easy styling
Razorpay - A payment gateway system that lets users access payments.
Vercel - For hosting our Next.js application (if not already hosted)
Tailwind Master Kit - For easily accessible Tailwind Components

Project Setup

If you already have a project, then you can directly skip to the integration part of the article. If not, let's get started by creating a Git repository and hosting our project on Vercel.

How to Set Up a Next.js Repository and Website

First, head over to Vercel and create a hobby account for yourself. (If you're going to use it for a commercial project, make sure you buy their plan. Hobby accounts are just for testing and creating playgrounds.)

Once the account is created, click on New Project

Then, select Next.js from the available options and create a Git Repository on the platform itself.

Your site will be deployed within seconds and you will get a URL for the live website.

How to Set Up TailwindCSS

Now since the website is setup, you can directly go to GitHub, clone the repository, to run it in your local environment. For that, follow these simple steps:

Go to GitHub and find your newly created repository
Click on the code section and copy the repository URL.
Open your terminal on the desktop and write git clone . This will clone the repository in your local environment so that you can start working.
Once the repository is cloned/copied in your local environment, open the project in your favourite code editor (VSCode is the best in my opinion).
In the terminal, open the location of the application and write npm install. This will install all the related node modules.
You can start the local development server by writing npm run dev.

Now the project is up and running in your local environment. To access your website locally, open localhost:3000 in your browser and you will be able to see the boilerplate website already there for you.

Setting up tailwind is very simple. Their documentation makes it even simpler. Check out their docs for reference and more on TailwindCSS as a framework.

To setup Tailwind on your local environment, follow the below steps:

npm install -D tailwindcss postcss autoprefixer - This will install TailwindCSS along with other important dependencies for compiling and running your Tailwind code.
npx tailwindcss init -p - This will initialize a tailwind.config.js file that is just an object which can be manipulated according to the user's needs.
In the tailwind.config.js file, paste the below code which basically tells Tailwind to compile the code present in the /pages and /components directories.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Open the globals.css file present in the /styles directory and paste the following code. These code snippets import all the Tailwind related setup code:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Restart your website by quitting the terminal and writing npm run dev on the terminal. Now you're ready to harness the power of TailwindCSS.

Now that Tailwind and our website are setup, let's jump right into developing the page and integrating payments.

Landing Page Development

The landing page that we are going to use is directly taken from the Tailwind Master Kit that lets you access components built with TailwindCSS.

Let's break down the code and understand it better.

Navbar.js

import React from "react";
export const Navbar = () => {
  return (
    <div className="flex flex-row items-center  justify-between px-20 py-10">
      <div className="flex flex-row items-center">
        <h1 className="font-bold italic text-2xl text-white mr-10">Paymentsh1>
        <ul className="flex flex-row space-x-10">
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Pricing
            a>
          li>
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Product
            a>
          li>
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Team
            a>
          li>
          <li>
            <a
              href="#"
              className="text-gray-400 text-sm tracking-wide font-light"
            >
              Sales
            a>
          li>
        ul>
      div>
      <div className="flex flex-row space-x-10 items-center">
        <a href="#" className="text-gray-400 text-sm tracking-wide font-light">
          Sales
        a>
        <button className="bg-[#272A30] text-gray-300 px-8 text-sm py-2 rounded-md shadow-xl drop-shadow-2xl">
          Sign in
        button>
      div>
    div>
  );
};

Building the Navbar is simple. It's a Flexbox container with links and unordered list items aligned in a row.

The button, however, is interesting. It used the new TailwindCSS drop shadow class which drops a background shadow. (We can also use colored shadows in TailwindCSS 3.0+ versions - pretty cool.)

Hero.js

const Hero = ({ onClick }) => {
  return (
    <div className="relative z-10 flex flex-col md:flex-row mt-10 items-center  max-w-6xl justify-evenly mx-auto">
      <div className="md:w-1/3 mb-20 md:mb-0 mx-10">
        <h1 className=" text-white font-bold text-5xl mb-10">
          Integrate{" "}
          <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
            payments
          span>{" "}
          in less than 10 minutes.
        h1>
        <p className="text-sm text-gray-300 font-light tracking-wide w-[300px] mb-10">
          Learn how to integrate a Payment Gateway with your Next.js and React
          application.
        p>
        <div className="bg-gradient-to-r from-[#3e4044] to-[#1D2328] p-[1px] rounded-md mb-4">
          <button
            onClick={onClick}
            className="bg-gradient-to-r from-[#2E3137] to-[#1D2328] rounded-md w-full py-4 shadow-xl drop-shadow-2xl text-gray-300 font-bold"
          >
            Purchase Now!
          button>
        div>
        <div className="bg-gradient-to-r from-[#3e4044] to-[#1D2328] p-[1px] rounded-md">
          <button className="bg-gradient-to-r from-[#1D2328] to-[#1D2328] rounded-md w-full py-4 shadow-sm drop-shadow-sm text-gray-400 font-light">
            Read Blog
          button>
        div>
      div>
      {/* <div className="w-2/3 bg-white flex-shrink-0  relative"> */}
      <img
        className="w-full md:w-[36rem] h-full"
        alt="stripe payment from undraw"
        src="/payments.svg"
      />
      {/* div> */}
    div>
  );
};

The hero section contains our Purchase Now button which will initialise the payments for us (we'll look at the implementation in the next section).

The layout contains two sections: the Left section contains all the text and the Right Section contains a large image (taken from Undraw, a free and open source illustrations website).

The onClick action on the button is important since it is responsible for triggering the action that will initialise the payments. The onClick is nothing but a callback that calls the function which is passed down as a prop to the component.

That's pretty much it for the UI part. Let's jump into the payments section and understand how to setup a developer account on Razorpay and use their SDK to make payments on our website.

How to Set Up a Razorpay Account and Retrieve API Keys

For integrating payments (that is, receiving payments on our website), we need to have two things:

A Razorpay account
A set of API Keys that lets us access their services.

Let's create an account and retrieve the API keys.

Head over to Razorpay and sign up for an account
After signing up you can access the Dashboard where you will find all the necessary details that are required for integrating payments.
For now, we will be in Test mode so that we can test our payments before we actually go live.
In the left panel, scroll down to Settings - There you will find the API keys section along with the configurations you can make to your payments UI.
Since you will be doing it for the first time, click on Generate API Keys and the download will automatically start. The downloaded file contains Razorpay API Key and Razorpay API Secret.

Now you're all set with the API keys and setting up the platform. Let's jump directly into how to actually trigger the Razorpay API and make payments.

How to Integrate Payments with Razorpay

For our payments to be integrated, we need a button click that actually initializes the Razorpay checkout module. For this, we already have a button Purchase Now the calls a function onClick that is nothing but a callback. Let's see the actual implementation and understand the code behind it.

To initialise a payment, we need to add Razorpay's checkout script into our code. In React, we can simply do it using the document.body.appendChild(script) code.

initializeRazorpay()

const initializeRazorpay = () => {
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/checkout.js";

      script.onload = () => {
        resolve(true);
      };
      script.onerror = () => {
        resolve(false);
      };

      document.body.appendChild(script);
    });
  };

Now, we are using a promise to achieve this task. We do this because later on, we are going to use the initializeRazorpay() in such a way that every time Purchase Now is clicked, the payments are initialised. We simply have to await this function to create and append a script into the DOM.

Let's look at the main function which is responsible for creating and initializing payments on the page.

makePayment() function

const makePayment = async () => {
    const res = await initializeRazorpay();

    if (!res) {
      alert("Razorpay SDK Failed to load");
      return;
    }

    // Make API call to the serverless API
    const data = await fetch("/api/razorpay", { method: "POST" }).then((t) =>
      t.json()
    );
    console.log(data);
    var options = {
      key: process.env.RAZORPAY_KEY, // Enter the Key ID generated from the Dashboard
      name: "Manu Arora Pvt Ltd",
      currency: data.currency,
      amount: data.amount,
      order_id: data.id,
      description: "Thankyou for your test donation",
      image: "https://manuarora.in/logo.png",
      handler: function (response) {
        // Validate payment at server - using webhooks is a better idea.
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature);
      },
      prefill: {
        name: "Manu Arora",
        email: "manuarorawork@gmail.com",
        contact: "9999999999",
      },
    };

    const paymentObject = new window.Razorpay(options);
    paymentObject.open();
  };

The makePayment() method is responsible for initialising and opening the Razorpay popup.

The makePayment() function does the following operations:

Initializes the Razorpay Checkout script and appends it to the body. This was handled by the initializeRazorpay method as we saw earlier.
Makes a call to the /api/razorpay.js serverless function. (This we will talk about in a minute).
Creates an Object which has 4 important keys:
1. currency - The currency in which we want the transaction to happen
2. amount - The amount in which the transaction has to happen. Note that it has to be the smallest denomination. Example if you're from the USA, then the amount will be in cents.
3. order_id - This will be generated from the serverless API which we are going to talk about in a minute.
4. handler - When the payments are successful, this callback function is called.
Finally, a paymentObject is created with the options passed down as the parameters to the window.Razorpay method. This is available to us because of the checkout script that we looked at before.

We looked at the above makePayment() method and saw a line of code which is:

const data = await fetch("/api/razorpay", { method: "POST" }).then((t) =>
      t.json()
    );

But what does it mean?

Next.js allows us to access serverless functions with the help of apis that are available to us in the api folder within Next.js.

The serverless APIs are nothing but Lambda Functions that act as a back-end for our JAMStack applications. Here, we can write our back-end related code easily without having to create a separate back-end.

Here, we need serverless because the order_id that we saw in the makePayments() code is unique and has to be generated at the backend. Not only this but the amount and currency also comes from the backend. This is to ensure that no one can manipulate the amount and the currency and the portal is secure for payments.

Let's have a look at the serverless API code and understand it better.

/api/razorpay.js

const Razorpay = require("razorpay");
const shortid = require("shortid");

export default async function handler(req, res) {
  if (req.method === "POST") {
    // Initialize razorpay object
    const razorpay = new Razorpay({
      key_id: process.env.RAZORPAY_KEY,
      key_secret: process.env.RAZORPAY_SECRET,
    });

    // Create an order -> generate the OrderID -> Send it to the Front-end
    const payment_capture = 1;
    const amount = 499;
    const currency = "INR";
    const options = {
      amount: (amount * 100).toString(),
      currency,
      receipt: shortid.generate(),
      payment_capture,
    };

    try {
      const response = await razorpay.orders.create(options);
      res.status(200).json({
        id: response.id,
        currency: response.currency,
        amount: response.amount,
      });
    } catch (err) {
      console.log(err);
      res.status(400).json(err);
    }
  } else {
    // Handle any other HTTP method
  }
}

This of razorpay.js as your route which leads to /api/razorpay. Every file you create in the API folder becomes a serverless route. Just like we create APIs in the back-end, we create files here in the APIs folder which becomes a route for us.

For example: let's say you create a file in the /api folder named posts.js. So the route will become /api/posts which can return anything you want depending upon the use case.

For our case, we need to make a POST request to our back-end that will create an order_id for us along with amount and currency that can be returned to the front-end for making payments.

Let's understand the flow for this API.

First we need to install the razorpay module along with shortid for generating short unique ids. To do that, head over to your terminal and write npm install razorpay and npm install shortid
Now, to access a POST request, we check the request object and access the method by using the below snippet:

export default async function handler(req, res) {
  if (req.method === "POST") {
    // Initialize razorpay object
    const razorpay = new Razorpay({
      key_id: process.env.RAZORPAY_KEY,
      key_secret: process.env.RAZORPAY_SECRET,
    });

    // rest of the code...
}

Here, request.method checks for the method. If the method is POST we go ahead and initialize the Razorpay object.
The Razorpay object takes in 2 parameters: key_id and key_secret. Remember when we downloaded the keys from Razorpay dashboard? Let's put them to use.
Open/create the .env file in your folder structure's root and paste the following code:

RAZORPAY_KEY=YOUR_KEY_HERE
RAZORPAY_SECRET=YOUR_SECRET_HERE

Here, you can plug in your API key and secret and you will be good to go.

Note: Make sure you restart your development server – otherwise the changes won't be reflected.

Once the razorpay object is setup, it takes in three important options: receipt, amount and currency.

const payment_capture = 1;
    const amount = 499;
    const currency = "INR";
const options = {
      amount: (amount * 100).toString(),
      currency,
      receipt: shortid.generate(),
    };

Note that amount and currency are being declared in our back-end so that there's no way for attackers to tamper with it.

Once the options are setup, we can create orders with Razorpay's _razorpay_._orders_.create(options) method.

try {
      const response = await razorpay.orders.create(options);
      res.status(200).json({
        id: response.id,
        currency: response.currency,
        amount: response.amount,
      });
    } catch (err) {
      console.log(err);
      res.status(400).json(err);
    }

Here, we simply await the create() method provided by Razorpay. When the create method is successful, we get an id which is nothing but the order_id that we need to supply to the front-end in order to generate unique payments.

Once everything is successful, we send a 200 response with id, currency and amount fields. This is all what is required by the front-end to process payments.

How to Make Payments with Razorpay

Once everything is integrated and is in place, we can start using Razorpay's charging methods – there are various options available. With this, you can start charging for your services and products by simply accepting payments on your website.

The whole popup is customisable and can be edited directly from Razorpay's dashboard portal.

Since you're in Test mode, to start using their services in production, you need to complete their Identification process by submitting your proof documents and simply toggle between test mode and live mode.

That's all you need to do from the coding side to make the transition from test to live.

Environment Variables

To make sure that our changes are reflected in our live production website, we need to add the same environment variables that we added in the code on the Vercel platform as well.

For that:

Head over to Vercel and open your project
Click on settings
Click on environment variables.
You will get 2 input fields - Name and Value.
First, enter RAZORPAY_KEY and add the API key
Second, enter RAZORPAY_SECRET and add the secret value
Redeploy the website and you will be able to make payments in the live environment as well.

Live Demo and Source Code

The entire source code for the application can be found here.

The live demo of the website is here.

Conclusion

Integrating payments is easy, thanks to Razorpay's excellent documentation that is easy to understand.

I enjoyed coding this website and integrating payments. You can also see a snippet of the code at my website: Manu Arora's Code Snippets

If you liked this blog, try implementing it in your own website so you can reach out to your end-users and make payments an easy task for yourself.

If you'd like to give any feedback, reach out to me at my Twitter handle or visit my Website

Also thanks to Tailwind Master Kit for the beautiful Landing Page UI.

Happy Coding. :)

How to Create an Excel File that Pulls Customer Data with WooCommerce and Python

Marco Venturi — Fri, 08 Oct 2021 15:15:28 +0000

“Hey, could you please send me our customers' emails? We’re about to launch a new marketing campaign and…we need them ASAP.”

If you work in the Web department on a corporate level, you've probably heard this sentence hundreds of times. So, today I want to share how I solved this issue for a company I worked at.

What Was the Request?

We had an e-commerce app built with WooCommerce, that got thousands of orders every day worldwide. To register, users had to add their first name, last name, and email address.

Our marketing department asked my team to provide them with the email address and first names of all our customers to launch a new campaign.

I expected them to ask for a CSV file to upload contacts massively to their marketing platform. Instead, they told me they needed an Excel file since they had to edit it before going ahead with the campaign launch.

Once they assigned me the Jira issue, I was ready to start.

Analyzing the Problem

WooCommerce provides users with the export functionality to get customers' data but it doesn’t generate an Excel file. It generates a CSV or an XML file.

When you work with a tool like WordPress, the first option you think about is using a plugin and get what you need.

I found a few options on the WordPress plugin directory, but there is a lot to consider every time you install a new plugin in your instance. You have to think about maintenance costs (consider every time a developer works on it, they log hours that affect your budget), security vulnerabilities, and – last but not the least – purchase approval can take a long time.

I also considered a second option: downloading the CSV via the user interface and turning it into an Excel file by using one of the thousand services you can find online.

But using third parties services could break critical security and privacy policies and the final result is not always reliable. So I decided to go no further in this direction.

In the end, I thought developing a script was the best and fastest option to solve this task.

WordPress provides developers with APIs. Many other plugins from the WordPress system provide APIs as well, and WooCommerce is not an exception. The documentation is robust and it offers links to libraries for the most used languages such as Node.js, Python, PHP, and Ruby.

I decided to go with Python and use this technology to develop a script that generates an Excel file with the following structure:

Two columns: first name and email
One row per customer

I chose Python for several reasons: there are hundreds of libraries that can help you get get the job done, it is flexible, and it is very useful when it comes to handling data.

I also decided to use Pandas and Openpyxl to handle data and create the Excel file.

Before coding, let’s get what we need

To work with the WooCommerce API, I need to generate the APIs keys to work with. You can get more info on WooCommerce official documentation.

First, you need to log into your WooCommerce instance, and then go to WooCommerce > Settings > Advanced > REST API.

Then I'll give it a brief description, choose the user I want to generate the API for, choose the permissions granted (Read/Write or both), and then hit “Generate API key”.

Next, I’ll get the Consumer Key and the Consumer Secret:

How to Prepare the Environment

The very first thing I did was add the necessary libraries to develop my script. I started with the Python library for WooCommerce. To install it, I ran this command:

pip install woocommerce

Good. Now I'll go ahead and install Pandas, a data analysis and manipulation tool for Python:

pip install pandas

After that, I installed Openpyxl, a Python library to read and write Excel files:

pip install openpyxl

Let’s code

I made the API call using the API function provided by the WooCommerce Python library and I stored it in a variable. Then I passed the function the base URL of my WooCommerce website, the consumer key, the consumer secret, and the version.

wcdata = API(
    url='',
    consumer_key='ck_XXXXXXXXXXXXXXXXXXXX',
    consumer_secret='cs_XXXXXXXXXXXXXXXXXXXX',
    version='wc/v3'
)

Then I used the GET function to call the "customers" endpoint and I created locally a JSON file (“contacts.json”) with the data I got from the endpoint I called right before:

newJson = wcdata.get('customers').json()
with open('contacts.json', 'w') as f:
    json.dump(newJson, f, ensure_ascii=False, indent=4)

I converted it to a Pandas object and stored it in the "df_json" variable:

df_json = pd.read_json('contacts.json')

I used the to_excel() function to turn the object into an Excel file. I passed the function three arguments:

The name of the file I was about to create
The index, set to “false” since I didn't want the record id to be printed on my file
The columns I wanted to print on my file (first_name and email)

df_json.to_excel('customers_contacts.xlsx', index=False, columns=('first_name', 'email'))

I ran the script and I got this:

That’s it. This is how I created an Excel file with customers' emails and first names with WooCommerce APIs and Python in less than 20 lines of code.

Of course, it is a script you can run via the command line when needed or you can also automate it to regularly generate reports about the e-commerce you and your team are running.

Final thoughts

I also wanted to share some other content I found on the web while studying to develop this script.

The first one is a Stack Overflow question. It helped me optimize my code while creating the JSON file. I really appreciated the chosen question, especially when it suggested how you can write a "nicer" JSON file on a modern system.

The second one is about Pandas. If you write Python code, one day or another, you'll have to deal with data and their manipulation. This article by Erik Marsja explains really well how you can convert your JSON file to Excel with Pandas. It provides readers with several tips on how they can use this powerful library to display the data they want in an efficient and effective way.

Feel free to share this post if you found it useful! You can also find the full code on this Github repo.

How to Develop a Reusable eCommerce Platform

freeCodeCamp — Wed, 30 Dec 2020 19:48:43 +0000

By Ramón Morcillo

This is a story about my team’s hard work developing not a single eCommerce platform, but a reusable one for different owners. We kept the same codebase, look, and feel, and made it highly customizable.

I will conclude with what we learned from the process. I think our takeaways will be a useful learning resource for other software developers out there (and for ourselves in future projects, as well).

I will try to focus on the relevant parts as much as possible to make it easier to understand. Having said this, a bit of background is needed to go through this article.

Context of the project
The first MVP
Implementing GraphQL
Architecture and Tech Stack
The second MVP
Conclusion and lessons learned
Final thoughts

Context of the project

The client we were developing the platform for was an eLearning company which was composed of 3 main sub-companies.

For the past few years, the sub-companies had been operating mostly independently. But now they were trying to create a standardized way of doing things, so they could grow together in the best way.

The project was an ambitious one. Creating an ecommerce platform that would work for all the sub-companies wasn’t easy to design or to implement. There were a large number of unsolved questions they had, which made it very hard to estimate.

The first MVP

To tackle this difficult challenge, we started from the bottom with one of the 3 sub-companies – let’s call it sub-company H. In fact, it wasn’t one of the main sub-companies, it was a sub-company from a sub-company.

To explain it better, if we name the 3 main sub-companies L, N, and P, then H was a sub-company of N.

Being a sub-sub-company didn’t mean the platform would be simpler to develop. It was quite the opposite, actually, given all the features proposed for the MVP.

Main company structure

While the main goal was for a user to be able to purchase a product (seems quite obvious), there were too many dependencies with other services to accomplish this seemingly simple MVP.

Part of the product and order information came from another team’s domain, the Integrations team (I will call it team In). They communicated with Swell and Klopotek, an ecommerce system where we stored the product's information along with the order’s status.

The discounts were also provided by team In’s, to which we had to subscribe and then calculate the final product price according to the user info and privileges before displaying it.

To make product content like images or descriptions accessible and customizable for the client we retrieved it through Contentful, a content platform where clients were able to manage it in an easy way.

We managed the payment with Stripe, a payments service, and then we communicated with team In to update the order status on Swell.

The service available for the user to authenticate should be agnostic to the owner and reusable on all sub-companies. It had to be provided by another team, yet in the end, we actually developed it ourselves.

And to put the icing on the cake, we also had to implement the user tracking with Segment, a popular service to collect user events from web and mobile apps.

Here is a simple diagram of what I have been describing which might make it easier to understand. I have grouped the microservices architecture in just Backend and Frontend to keep it simple.

MVP Architecture overview

Why We Chose GraphQL

To accomplish our goals for the project, we had to provide the frontend with a unique source of truth of the product’s core information from the backend.

Therefore the only thing that we aimed to have different from one store’s frontend to another would be the designs and the content from Contentful.

Regarding these designs and their implementations on React, we planned to use a shared-components-library.

Therefore, what is GraphQL doing here and why did we decide to go for it?

Well, in case you don’t know how GraphQL works, essentially it lets you define a Schema with all the properties and queries that could be made to your product. Then it lets you serve it to the frontend to let it decide what to request without the backend having to create an endpoint for each of those requests (like in REST services).

To learn more about it, check out this tutorial I wrote to explain it. It teaches you how to use it with Node.js. Also, their docs are worth checking out.

This meant that each of the shops would request the data they needed from the product just by looking at the Schema, the source of truth.

Thanks to this fact we would not have to implement different sources of data in the backend for each shop. This gave the frontend the power and responsibility (the first involves the second 🕷) to request the product data needed to display at each interface.

With great power comes great responsibility. — Stan Lee

Just to be clear, if we had decided to go with REST we would have needed to create different endpoints for each of the shops. Or we would have had to make the frontend retrieve all the product data in each shop and then decide which properties to display. This means it would've had to store unnecessary data in the frontend that would only add noise.

Or even worse, we would have had all the shops’ backend services deployed for each one of the frontend shops. This would've used unnecessary resources and increased the cost considerably.

Here is why we took this initial approach. The worst part, in my opinion, would've been the waste of time from maintaining and hardly refactoring all the mess that we would have created.

Furthermore, by making a single request on-demand, the payload was lighter, and therefore, the performance over the network was improved.

Anyway, as with every problem, there were other approaches we could've taken on the way to developing this project and its architecture. But at that moment this one seemed to us the best one.

Architecture and Tech Stack

The microservices architecture mainly consisted of Node.js services hosted on Azure K8s clusters. Depending on their needs and the data they worked with, they did or didn't have a MongoDB, PostgreSQL, or Redis database associated.

The asynchronous communication between them was handled mainly with Azure Service Bus topics and subscriptions through a publish/subscribe messaging communication model.

The main difference with common messaging queues is that you can have more than one receiver, so you do not have multiple queues to receive messages in more than one service.

Azure Service Bus messaging Queues. Source

Azure Service Bus messaging Topics. Source

On the frontend part, the sites were developed with React. Sometimes we used Next, and other ones we built from scratch with Create React App, depending on the complexity and the requirements of each.

We moved from Redux, used in previous projects, to the official Context API to manage most of the state.

Here are the main services and their functionalities for the first MVP architecture:

shop-web-app: The client shop application.
gateway-api-service: Proxy service to receive requests from the client and redirect them to the corresponding services.
cms-api-service: Service to retrieve and serve the content from Contentful
catalog-api-service: Service that subscribes to team In messages and persists the product core data to serve it later through GraphQL.
orders-api-service. Service that handles all the payment business logic
auth-api-service: Provisional service to implement the user authentication to be able to buy products.
auth-web-app: The client for the auth service.
integrations-ecommerce-api-service: service from the integrations domain that handles the payments. Although this service was not in our domain we developed it together to increase the delivery speed and free them from extra work.

First MVP architecture

To deploy and update the resources needed on Azure we used Terraform, which let us define infrastructure as code and manage their life cycles on the K8s clusters. We also worked with Azure DevOps as our CI & CD system.

On the services, we used Systemic, a Node.js framework for minimal dependency injection that lets you create components and their dependencies in a system. Each component handles a separate object from the domain such as the routing, controller, services, database, and so on in an agnostic way from the others.

Apollo was our choice to implement GraphQL. It provided us with a data graph layer to easily connect both frontend and backend.

Again, to learn more about it check out their docs or this tutorial.

Finally, we hosted the code on GitHub to make use of features like Pull Requests to review our code properly before implementing it.

The second MVP

An MVP (Minimum Viable Product) is the first prototype you create and deliver in a project. This means that there is usually just one, and when you create it you start implementing new features on it.

So, why did we focus on a second MVP for the same project? Well, when we reached a “stable” version of the first one, the client realized that we needed to start with the main sub-company stores. They decided to stop the sub-sub-company H store development to focus on the development of the new ones.

This was mainly because to some services ended their support for the sub-companies in the coming months, meaning that their stores had to be developed first.

Graphical representation of how we felt with the second MVP

Although we tried to make a proper estimation for the first MVP, we surpassed its deadline since some unplanned issues appeared along the way. Thus, when we were told that the new deadline would be even sooner, we decided to take a different approach to reach it on time.

We decided to develop more than one store at the same time, which was a double-edged sword approach.

On one hand, we would see on the go how well the reusability aspect of our platform worked while refactoring it. We would also end up with more than one store in the end.

On the other hand, we would have to set up and maintain the environments and resources of multiple shops. Plus we would have to implement their designs which would slow us down, meaning we might not reach the deadline on time, again.

We saw this MVP as an opportunity to start over and improve our codebase. So we added TypesScript and Styled-Components to our React application.

I have to admit that I was very happy when we made these choices because I had been working with that stack on my own projects. So now I was able to learn more and get even better at it.

Fortunateluy, we were able to reuse most of the code from the previous MVP for the React apps and the backend services. But not everything was a bed of roses.

Not all of us were used to working with this new stack and it slowed us down at the beginning. Furthermore, with the same stack, we started developing a React components library for all the platforms, which, even though it was planned for the first MVP, never saw the light.

By that time, the team in charge of the user authentication service started working on it so we stopped its development and just implemented it on the site.

In addition, we started the development of a products search service (search-api-service) with Azure Cognitive Search.

After all the changes mentioned above the architecture evolved this way.

Second MVP architecture

Conclusion and lessons learned

As I am writing this, the platform isn’t finished yet. But it has been a great challenge to get where we are.

We have learned some valuable lessons that can be useful to others, not just about the stack and architecture described above but about the way we worked as a team.

Innovate the stack

Working with new technologies can be risky and less comfortable than sticking with old and well-known ones. But innovation and adaptability is the right way to go so you don't get left behind in Software Development.

One of the most important points when you upgrade your stack or adopt a new one, apart from checking the proper way to do so following standards, is being sure the team is comfortable working with it,. Not just at the beginning, either, but during the whole process to make the transition easier.

Don’t underestimate, promise less, deliver more

We happily estimated the first MVP and agreed to deliver a great number of features. We ended up needing more time because of all the issues that appeared on the way and _had to learn to say “no” sometimes.

On the second MVP, we didn’t estimate that far ahead in time and didn’t commit ourselves to features we weren’t sure we could deliver within the time expected.

Because of this, we were able to work less stressed, have a better mood, deliver better code, and improve the client's feelings about the project since they weren’t disappointed with the progress.

Teamwork inside the team.

We realized that the best way to progress and develop was to feel comfortable – not just with the technologies but, most importantly, our teammates. Some of the measures that improved our relationship and teamwork were:

Team democracy.

No matter the work we were doing at the moment, all of us had the same voice and our opinion counted the same when making a choice. This was key when we discussed the adoption of the new stack and the practices we would follow.

Reviewing code.

Feedback is one of the best ways to improve not only the code itself but the way you write it too. That's why we decided to work with GitHub Pull Requests to implement most of the features.

Working with them not only improved our code base but also made us aware of how the features were being implemented in other areas, avoiding catchup meetings and helping us keep track of the full project scope.

We refined this system little by little with features like a minimum number of reviewers to merge them or subscribing to them through slack.

Helping and asking for help.

In my opinion, this one is a must. The team must lose the fear of asking for help if they get stuck. At the same time, they must be willing to help others when they ask for it.

I am happy to say that we were able to reach this balance and our work improved in many ways. The next point, pairing, was key in losing the fear of asking for help and getting to know each other better.

Pairing as much as possible.

At this point in software development, the advantages of doing pair programming are quite well known. We paired not just to deliver the features in a faster and better way of doing things, but to learn from each other's way of coding.

Each week, we decided the pairing tasks and teammates to implement them. But if someone needed or wanted to pair, we just asked for it and moments after a teammate offered to help.

Paying attention to feedback.

The sprint retrospectives were the perfect moment to review all the things that went well, those that went wrong, to propose changes, and to look forward to improvement. Therefore the more we shared our opinions the more issues we could approach and solve.

Teamwork with other partners.

We were dependent on other teams' work – so having a good relationship with them was also an important point in our development process.

Communication was the key point: the more we communicated the more we improved,. And thanks to this, our goal was to be one whole team. Here are some actions we followed in order to enhance this communication:

Have a private place just for us. We created a separate channel to talk about the progress and solve any questions or doubts as soon as possible without extra meetings.
Quick meetings. A meeting once a week worked great to check the progress on the main issues. But we did not always wait for this one meeting, and had a quick call whenever an issue needed to be discussed.
Stay updated on the overall progress. We had a teammate from our team attending their daily standups and one of them at ours who updated the rest of the team if needed.

Here is some actual footage of us and the Integrations Team:

Make the client feel like part of the team.

At the beginning of the first MVP, there were too many clues and too little communication to clarify them so we were blocked sometimes or had to set up time-wasting meetings for these issues.

The core of the problem, like most problems in life, was a lack of communication. So we solved it by increasing our communication, asking questions directly to the client, inviting them to retrospectives, daily standups, and other meetings even when they were not required.

This helped keep the client updated as much as possible. In the end, the more we communicated the more we made them feel part of the team, and the better we worked together.

Final thoughts

I want to first thank my teammates. It has been a pleasure to work with them, starting each day eager to have fun together developing the project.

On the same level, thank you to the teammates from other teams who always gave a helping hand when requested.

I'm also thankful for the opportunity to participate in the full end-to-end implementation of the project from which I learned so much. I solved issues on Front, Back, and DevOps such as setting up environments, pipelines, messaging between services, persisting and retrieving data, serving it to the frontend, and implementing the interfaces to display it.

Finally, I am thankful for having the chance to work and get better at technologies that I was using on side-projects like GraphQL or TypeScript.

I hope you enjoyed this article. You can read it too on my site along with others! If you've got any questions, suggestions, or feedback in general, don't hesitate to reach out on any of the social networks from my site.

E-commerce APIs Explained – An Overview of API Integration and its Benefits

freeCodeCamp — Fri, 20 Nov 2020 21:42:31 +0000

By Rashmi Sharma

Technology is fast-paced and continually shapes and affects the eCommerce industry.

With the rise of technologies such as the internet of things (IoT), artificial intelligence (AI), augmented reality/virtual reality (AR/VR), and blockchain, the e-Commerce world has seen many advancements.

But among the dozens of E-commerce-related technologies, there is one that connects them all. APIs are gradually improving eCommerce applications and websites by connecting them with each other.

eCommerce APIs help developers transfer information from one software to another and then use this data in a single user interface.

APIs work as an extensible platform that integrates with various solutions so companies can take advantage of their existing functionality without building features from scratch.

The Benefits of API Integration for an E-commerce Platform

APIs help integrate several platforms with one another. For example, you can integrate your E-commerce website with a shipping provider's account and import your data for orders and shipments. This way, you can streamline your shipping operations on one platform.

E-commerce fulfillment APIs can help businesses automate, coordinate, manage, and streamline their operations with features such as order fulfillment, courier management, labeling, invoicing, printing shipment information, tracking, and confirmation notifications.

So if you want to establish a solid platform for your E-commerce business, you will need to integrate an API in your shipping and logistics software solution.

It's Extensible

APIs connect different software components and enable them to interact with each other by receiving requests and sending responses.

It extends the functionality of an application or website, helping you get work done faster. It also simplifies information sharing.

Increased Security

APIs enhance the security of software systems by letting users request data from your systems. The API protects your E-commerce data with security measures such as encryption.

Reusability

APIs can be reused across platforms and applications because they are built using a service-oriented approach.

Reusable programs reduce the time and effort developers must spend on the project which in turn increases their productivity.

Scalability

APIs enable you to connect to any new system without making any changes in the original system, program, or hardware.

It just takes a few lines of code to connect with any new system and offers scalability to handle more complex transactions.

Synchronization

Due to API integration, you can pick and choose elements of your online store from other applications and programs to create a platform according to your specific business needs. This way you can synchronize your operations workflow in a logical manner.

Through integrated systems, one company can connect to other companies’ software and applications to manage their data, shipping channels, products and services which best meet their needs.

So as you can see the API revolution involves all of us.

Now let's learn about three common types of API models that get data from systems, turn data into processes, or create an experience.

3 Common Types of API Models

Image Source: MuleSoft

When you use API-led integration, you can improve the way users interact with new devices and technology shifts.

You can improve the E-commerce fulfillment processes through multichannel selling, inventory management, shipping, or creating personalized experiences across different channels. And there are three types of models you can use to build these APIs.

Experience APIs

These APIs are utilized for data reconfiguration so that the same data can be presented in multiple formats based on users’ needs.

Experience APIs create a common data source for each channel instead of setting up separate integrations for each channel.

Process APIs

These APIs are implemented when integrating different systems of an IT ecosystem. They help create independent data source points to avoid data silos within a single system or across systems.

They don’t rely on other systems where the data is to be delivered. This means that Process APIs help businesses looking to expand their current IT infrastructure.

System APIs

System APIs hide the complexity of the core systems such as FTP servers, ERP, CRM, or legacy systems. These types of APIs typically provide a way to access systems for data and record integration present in the business.

Now I will discuss some E-commerce APIs that can enhance your site’s functionality and improve your customers' experience.

The Different Types of E-commerce APIs

Image Source: ProgrammableWeb

API integration lets developers integrate various functionality of their systems directly into online stores. This helps streamline the order fulfillment, shipping, and delivery processes.

There are hundreds of E-commerce APIs for developers to browse through. Some of them are available for adding orders, shipping, tracking, getting products, viewing, buying and selling, and even creating marketing segments, and plenty of other tasks.

Here I'll highlight some of the most popular and useful.

Product information API

A product information API allows you to extract product details from a database of products that includes information about product descriptions, product ID, product titles, product specs, product images, pricing, the number of products, and more.

Orders API

Orders APIs include details about orders that are created from your channel. This API syncs order import and export status and displays a list of all created and available orders in your account.

A user can sort and filter the order data according to the date of packaging and shipping.

You can also cancel orders, return orders, create bulk import orders, and add inventory for an ordered product. Further parameters can be added as required.

Inventory API

You can use this API to sort and filter inventory data and check the inventory details of a product's SKU. With this API you can also update product inventory details for a specified product.

Shipping API

This API lets you automate the process of shipping. It allows you to connect with the logistics providers and you can track details from the product sale through the package being delivered to a customer. It can also automate the process of creating packaging invoices and labels.

The Shipping API allows you to choose from multiple carriers based on their delivery time, rates, and location. Shipment tracking is also possible with this type of API. It enables you to integrate order tracking information into a mobile application or website or via an email or a text message.

Couriers API

Use this API to check for courier options and serviceability in a particular region and create a request for the pickup of your order.

You can also use this API to assign a unique tracking number to your shipment that helps you track the shipment and get details about it.

Wrapper API

You can use this all in one API to create an order, ship an order, and generate labels and invoices for the same order. With this API you can do multiple tasks in one go.

Channels API

The channel API gives you details about all the integrated channels in your account (for example Shopify, Magento, Opencart, WooCommerce, or Amazon marketplace).

The API assigns a unique channel id at the time of order creation that can be used to select or specify a custom channel for your account. This API also shows a list of all the channels already integrated into your store’s account.

Catalog API

With this API you can create, edit, and manage your product catalog within a few minutes. It also supports integration with other key systems of your business such as order fulfillment, inventory management, and reporting & analysis.

Authentication/Login API

The authentication or login API is the access authorization that you need to access the resources of a shipping provider's site. This login API helps the channel owner validate that you are a valid user.

Payment API

With the payment API you can create an application for the checkout process that accepts payment through credit card or debit card. The Payment API can be programmed according to your existing payment gateway.

Validation API

The Validation API helps verify the address and other customer details that they enter on the website.

The API verifies the address and identifies a new customer or existing customer and decides the possible deliverability issues. This API automates the validation and correction of address issues and also eliminates the hassle of verifying documents.

Marketing API

A useful API to automate email marketing functions and segmentation based on the customer'ss buying behaviors, purchase history, location, and other criteria.

How Do E-commerce APIs Work?

Image Source: ProgrammableWeb

As mentioned above, APIs allow you to interact with your site and other systems under the hood and display this information to customers.

These APIs are useful for E-commerce websites because there are tons of requests, responses, and logic that you need to handle at the same time.

These API's are commonly based on REST architecture and use the HTTP request methods to make a request for information to the server.

REST APIs use a simple URL and are lightweight to implement with almost any tool. Developers get a set of search and query tools with the REST API that helps them gain deeper access to a website's data.

REST APIs also support OAuth 2.0 authentication for security purposes (which is also used in popular apps such as Facebook and Google). Additionally, the REST API supports cross-platform development and a wider range of programming languages.

Developers can integrate E-commerce APIs into a website by using the following information.

Resources refers to an object that determines the relationship to other resources and methods that operate on it.
Endpoints are touchpoints of interaction of APIs with another system.
HTTP Methods are the allowed interactions that include GET for retrieving resources, POST for creating resources, and PUT for changing or replacing resources.
Parameters are criteria that have a name, value type, and description to determine the type of action you want to take on the resource.
The Sample Request and Response Objects identify inputs and outputs of a resource.

End Note

E-commerce shipping and order fulfillment can be much easier if you use API integration and the right technology.

At the end of the day, every decision you make about your E-commerce business should help you achieve your goals. As far as shipping and order fulfillment is concerned, using E-commerce APIs achieves both of these objectives.

So what are you waiting for? Get started using E-commerce APIs now!

Need some help? You can get in touch with the Shiprocket team to learn more about possible solutions.

Thank you for reading!

How I Built a Mobile App for Online Shopping Amid the COVID-19 Lockdown

freeCodeCamp — Mon, 08 Jun 2020 12:00:00 +0000

By Ogbeta Ovokerie

When many stores that sell nonessential items were ordered to close in March by government decrees, consumers moved their shopping online. U.S. online sales increased 49% in April over the prior year, according to Adobe Analytics.

The increase in sales was not particularly significant on desktop. But mobile shopping apps such as Instacart saw an increase of about 650% (wow!) in new mobile app users (in the U.S alone) between March and April.

So, in order for e-Commerce stores to take full advantage of the increase in online shoppers during the Coronavirus pandemic, they should have a native mobile app.

In this tutorial, I will be developing a native mobile Android app using the Woocommerce theme. I will also explain why I went for a native mobile app (instead of a hybrid app or a progressive web app) and the Woocommerce theme. Even better, I will start with some research data to show just how important it is for an e-Commerce store to have a mobile app.

Traffic to brick-and-mortar stores has almost vanished

Is there anybody out there?

Consumer surveys suggest that the shift to online shopping will continue as long as COVID-19 remains a threat. A survey of 1,200 consumers in late March 2020 found that 90% of shoppers were hesitant to shop in stores because of the Coronavirus pandemic. And 45% expected online shopping would be a necessity for them during the crisis.

A separate survey in April found that 55% of online consumers said they were ordering more online than they were before the virus hit, up from 26% in March. And 22% said in April they were ordering a lot more online, as opposed to only 6% in March.

If the pandemic continues to linger, there could be a big shift to online shopping during retailers’ two biggest seasons of the year – back-to-school and holiday shopping. 23% of retailers surveyed in March planned to shift resources as a result of the Coronavirus outbreak.

Retail has been forced to make some major changes. As all non-essential businesses were urged to shut down, and foot traffic into brick-and-mortar retail stores all but vanished. Even with staggered re-openings, the importance of having e-Commerce functionality is clearer than ever.

The pandemic proved the need for businesses of all types to be flexible and ready for anything, and the need for them to take the digital leap. e-Commerce will be front and center for the new normal.

But my client has a responsive website!

A number of trends are converging that make website owners want a native mobile app. The main goal of every website owner is to add value to the business by reaching more users. I think it will come as no surprise that mobile phone usage is on the rise and more people interact with their mobile phones than with desktops.

In order to tap into this market of mobile phone users, we need to know which types of apps these mobile phone users interact with the most (progressive web apps, hybrid apps, responsive mobile websites, or native apps). Luckily for us the people at Go-Globe did an analysis: a whopping 85% of mobile users interact with native mobile apps the most.

There are a number of other reasons why companies should have a native mobile app to meet the needs of the growing number of online shoppers amid the coronavirus pandemic. Let's explore them now a bit more.

They offer a better experience to loyal website visitors

Mobile sites are great for discovery. But loyal users – those that come back more often – want to have an app. People use apps more than they use search on mobile devices. A brand (that is, an app) on a user’s home screen is a constant reminder of a site and its content.

They connect directly with website visitors

A brand can be on all social channels, but only a fraction of users will ever see its message. Emails can also be sent, but with a 25% open rate, only a fraction of the audience will be reached.

A branded mobile app gives a direct line to users, ultimately retaining users and turning casual visitors into loyal users.

They make use of mobile device features

Native mobile apps have the advantage of utilizing features of a mobile phone like the camera, contact list, GPS, phone calls, accelerometer, compass, and etc. Such device features, when used within an app, can make the user experience interactive and fun.

Moreover, these features can also reduce the efforts users would have to make otherwise. For instance, users that would like to know the location of a business can use the GPS/navigation to easily find it (especially useful in food apps).

These features can also significantly shorten the time users take to perform a certain task in an app, and can even boost conversions.

Mobile websites, PWAs, and hybrid apps can also use some of the device's features. Still, there are technological constraints or limits in utilizing all the features of a device which native mobile apps can use easily.

They give you the ability to work offline

This is probably the most fundamental difference between a mobile website and an app. Although native mobile apps might require internet connectivity to perform most of their tasks, they can still offer basic content and functionality to users in offline mode.

Let’s take the example of an e-Commerce website – the app can provide features like tax and installment calculation, and determine a user's spending limit. These features can work even without the help of an internet connection.

Even though mobile websites, PWAs, and hybrid mobile apps can use caching to load web pages without an internet connection, they can only offer limited functions.

They help increase brand presence

Users spend a substantial amount of their time on mobile devices. It’s safe to say that many users see the apps they’ve installed on their devices almost every day.

This regular encounter can be viewed as a branding opportunity for the apps. Even when users are not actively using a mobile app, they are still reminded of the brand associated with the app. The app's icon acts like a mini-advertisement for the brand.

The presence of an app on a user’s device helps influence their perception about a brand subconsciously. This behavior can be linked to the Signal Detection Theory, which suggests that users still process ads they’ve ignored at some level subconsciously.

Apps can work faster than websites

A well-designed mobile app can perform actions much quicker than a mobile website.
Apps usually store their data locally on mobile devices, in contrast to websites that generally use web servers. For this reason, data retrieval happens swiftly in mobile apps.

Apps can further save users’ time by storing their preferences and using them to take proactive actions on their behalf.

There is also a technical justification as to why mobile apps can work faster. Mobile websites use JavaScript code to perform most of their functions. And some of the frameworks that mobile apps use can run almost five times faster than JavaScript!

While all this is happening in the background, users get to complete actions more quickly on the front end of mobile apps, again contributing to a delightful user experience.

They increase SEO potential for a website

Mobile apps can be advantageous in two ways – for in-app content and website content as synonymous words will be used in the content for products and services. Google these days rank in-app content too and you can modify your content in your application to help you with your website SEO.

Mobile app spending is expected to double by 2024, despite the economic impacts of COVID-19

According to a revised 2020-2024 market forecast, worldwide consumer spending in mobile apps is projected to reach $171 billion by 2024. This is more than double the $85 billion from 2019.

This total, however, is about $3 billion (or 2%) less than the forecast the firm had released prior to the COVID-19 outbreak.

Mobile App Spending

Still, it's notable that even the slowest-growing regions on both Apple's App Store and Google Play will see revenue that's over 80% higher than their 2019 levels by the year 2024. The app stores will also hit several milestones during the next five years.

For starters, global spending in mobile apps will surpass $100 billion for the first time in 2020, growing at approximately 20% year-over-year to hit $102 billion. This indicates that website owners do not just get more customers, but more paying customers that are willing to spend.

They reach out to a younger audience

The stats indicate that 18-24 years olds are the most active mobile app users.

Still not convinced? Let these statistics do the talking:

77% of Americans own a smartphone.
Over 230 million U.S. consumers own smartphones.
Around 100 million U.S. consumers own tablets.
79% of smartphone users have made a purchase online using their mobile device in the last 6 months.
e-Commerce dollars now comprise 10% of all retail revenue.
80% of shoppers used a mobile phone inside of a physical store to either look up product reviews, compare prices, or find alternative store locations.
An estimated 10 billion mobile connected devices are currently in use.
Mobile app users spend an average 201.8 minutes per month shopping, compared to 10.9 minutes/month for website users.
58% of millennials mentioned that they preferred purchasing through apps.

Ignoring these trends in mobile e-Commerce (referred to as m-Commerce in the industry) evolution means potentially missing out on more and more profit as these trends continue.

Enough talk! Let’s write some code

All native mobile apps are just a bundle of code written in Java, Kotlin, Objective-C, or Swift that manipulate data and resources (.png, .xml files). The manipulated data can be retrieved from the mobile device’s sensors such as the screen, camera, storage memory, GPS, speakers, accelerometer, compass, or from a server.

In this tutorial we will be using the following tools:

JSoup (a Java library): JSoup is an HTML parser which can directly parse a URL, HTML text content, and provides a set of very convenient API interfaces to manipulate data.
Android Studio: This is the official tool for writing and compiling Android apps in Java or Kotlin and produces ready to install .apk files. All code in this tutorial will be written in Java.
Woocommerce Plugin: This is the most popular e-Commerce plugin for WordPress. So building a mobile app for the most popular e-Commerce plugin seems like a good idea.

Getting and Manipulating Data from the Server

Data will be gotten from the server using a RESTful API. WooCommerce (version 2.6+) is fully integrated with the WordPress REST API. This allows data to be created, read, updated, and deleted using requests in JSON format. It uses WordPress REST API Authentication methods and standard HTTP verbs which are understood by most HTTP clients.

I will be using the API version 2, v2 which is available for Woocommerce version 3.0.x or later and WordPress version 4.4 or later.

The default response format is JSON. Successful requests will return a 200 OK HTTP status. Some key information about responses are:

Dates are returned in ISO8601 format: YYYY-MM-DDTHH:MM:SS
Resource IDs are returned as integers.
Any decimal monetary amount, such as prices or totals, will be returned as strings with two decimal places.
Other amounts, such as item counts, are returned as integers.
Blank fields are generally included as null or empty string instead of being omitted.

Most requests made to the Woocommerce REST API have to be authenticated using pre-generated keys (consumer key and consumer secret). New keys are generated through the WordPress admin interface. Just go to WooCommerce > Settings > API > Keys/Apps.

Click the "Add Key" button. In the next screen, add a description and select the WordPress user you would like to generate the key for. Then click the "Generate API Key" button and WooCommerce will generate REST API keys for the selected user.

Now that keys have been generated, you should see two new keys. These two keys are your Consumer Key and Consumer Secret.

We then create a URL which will include the business website and the API endpoint from which the data in JSON format will be returned.

Using the Jsoup library, we connect to the URL (website + API endpoint) and add the API keys (consumer key and consumer secret) with other parameters of the API endpoint. Almost all endpoints accept optional parameters which can be passed as a HTTP query string parameter:

public static final int JSOUP_CONNECTION_TIMEOUT = 100000;

String websiteUrl = "www.freecodecamp.shop"; //example website doesn't exist
//This API lets you retrieve all product categories
String apiExtension = "/wp-json/wc/v2/products/categories";
//Map to store our parameters in a key value format
HashMap data = new HashMap<>();
data.put("page", String.valueOf(page)); // API parameter to get the current page of the collection. Default is 1.
//add API keys for authentication
data.put("consumer_key", getKey());
data.put("consumer_secret", getSecret());

//concatenate both websiteUrl and apiExtension to form the requestUrl
String requestUrl = websiteUrl + apiExtension

try {
    Connection.Response response = Jsoup.connect(requestUrl).timeout(JSOUP_CONNECTION_TIMEOUT).followRedirects(true)
        .ignoreContentType(true)
        .data(data)
        .execute();

    String json = response.body();
    //parse json string to get needed data.

} catch (Exception e){
    //catch both JSONException and IOException
}

The getKey() and getSecret() methods just return the API keys:


    public static String getKey() {
        return "ck_a89d59d7441f027df0d91f01c9e2dcaxxxxxxxxx";
    }

    public static String getSecret() {
        return "cs_c3f8fe620bd5b1cb3567712eb843609xxxxxxxxx";
    }

But wait...for some websites, when I run this code it gives me the error 401 Unauthorized. This is an authentication or permission error, due to incorrect API keys...so what gives?

Sure, the above code only works for secured websites with the HTTPS protocol, whereas unsecured websites which use the HTTP protocol will need to encrypt the API keys before sending them.

What does that mean, exactly? HTTPS is HTTP with encryption, as HTTPS uses TLS (SSL) to encrypt normal HTTP requests and responses. This makes HTTPS far more secure than HTTP. A website that uses HTTP has http:// in its URL, while a website that uses HTTPS has https://.

You must use OAuth 1.0a "one-legged" authentication to ensure your REST API credentials cannot be intercepted by an attacker. The required parameters are _oauth_consumer_key, oauth_timestamp, oauth_nonce, oauthsignature and _oauth_signaturemethod.

We will create a method that will get these encrypted parameters as a HashMap. The method, getAuthenticationPrams(String url, HashMap mData) will accept a request URL (website URL + API extension) and any parameters that we might want to add to the API extension.

Here we collect and normalize our parameters, which includes all oauth*_ parameters except for the _oauthsignature itself.

public static HashMap getAuthenticationParams(String url, @Nullable HashMap mData){
    HashMap data = new HashMap<>();
    if(url.startsWith("http://")){
        String nonce = new TimestampService().getNonce();
        String timestamp = new TimestampService().getTimestampInSeconds();

        data.put("oauth_consumer_key", getKey());
        data.put("oauth_signature_method", "HMAC-SHA1");
        data.put("oauth_version", "1.0");
        data.put("oauth_nonce", nonce);
        data.put("oauth_timestamp", timestamp);

        if(mData != null)
            data.putAll(mData);

        String firstBaseString = "GET&" + urlEncoded(url);
        String generatedBaseString = formatQuery(data);

        ParametersList result = new ParametersList();
        result.addQuerystring(generatedBaseString);
        generatedBaseString = result.sort().asOauthBaseString();
        String secondBaseString = "&" + generatedBaseString;

        if (firstBaseString.contains("%3F")) {
            secondBaseString = "%26" + urlEncoded(generatedBaseString);
        }
        String baseString = firstBaseString + secondBaseString;
        String signature = new HmacSha1SignatureService().getSignature(baseString, getSecret(), "");
        data.put("oauth_signature", signature);

    } else{
        data.put("consumer_key", getKey());
        data.put("consumer_secret", getSecret());

        data.putAll(mData);
    }

    return data;
}

The TimestampService class generates a timestamp and nonce for the _oauthnonce and _oauthtimestamp parameters.

import java.util.Random;

public class TimestampService {
    private Timer timer;

    /**
     * Default constructor.
     */
    public TimestampService() {
        timer = new Timer();
    }

    public String getNonce() {
        Long ts = getTs();
        return String.valueOf(ts + timer.getRandomInteger());
    }

    public String getTimestampInSeconds() {
        return String.valueOf(getTs());
    }

    private Long getTs() {
        return timer.getMilis() / 1000;
    }

    void setTimer(Timer timer) {
        this.timer = timer;
    }

    /**
     * Inner class that uses {@link System} for generating the timestamps.
     *
     */
    static class Timer {
        private final Random rand = new Random();
        Long getMilis() {
            return System.currentTimeMillis();
        }

        Integer getRandomInteger() {
            return rand.nextInt();
        }
    }

}

The formatQuery(HashMap mData) method formats the parameters into query parameters which are a set of parameters attached to the end of a url. The urlEncoded(String url) method translates the given string into an application/x-www-form-urlencoded format using a specific encoding scheme. This method uses the supplied encoding scheme to obtain the bytes for unsafe characters.

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

    private static String formatQuery(HashMap mData){
        int i = 0;
        StringBuilder param = new StringBuilder();
        for(String key : mData.keySet()){
            if(i > 0){
                param.append("&");
            }
            param.append(key);
            param.append("=");
            param.append(mData.get(key));
            i++;
        }

        return param.toString();
    }

    private static String urlEncoded(String url) {
        String encodedurl = "";
        try {
            encodedurl = URLEncoder.encode(url, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        return encodedurl;
    }

The ParametersList class takes the formatted query and then encodes it using the OAuthEncoder class. The values that start with oauth*_ need to be encoded into a string which will be used later on. The process to build the string is very specific:

Percent encode every key and value that will be signed.
Sort the list of parameters alphabetically by encoded key.
For each key/value pair:
Append the encoded key to the output string
Append the = character to the output string
Append the encoded value to the output string
If there are more key/value pairs remaining, append an & character to the output string.

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Map;


public class ParametersList {
    private static final char QUERY_STRING_SEPARATOR = '?';
    private static final String PARAM_SEPARATOR = "&";
    private static final String PAIR_SEPARATOR = "=";
    private static final String EMPTY_STRING = "";

    private final List params;

    public ParametersList() {
        params = new ArrayList();
    }

    ParametersList(List params) {
        this.params = new ArrayList(params);
    }

    public void add(String key, String value) {
        params.add(new Parameter(key, value));
    }

    public String asOauthBaseString() {
        return OAuthEncoder.encode(asFormUrlEncodedString());
    }

    public String asFormUrlEncodedString() {
        if (params.size() == 0) return EMPTY_STRING;

        StringBuilder builder = new StringBuilder();
        for(Parameter p : params) {
            builder.append('&').append(p.asUrlEncodedPair());
        }
        return builder.toString().substring(1);
    }

    public void addAll(ParametersList other) {
        params.addAll(other.params);
    }

    public void addQuerystring(String queryString) {
        if (queryString != null && queryString.length() > 0) {
            for (String param : queryString.split(PARAM_SEPARATOR)) {
                String pair[] = param.split(PAIR_SEPARATOR);
                String key = OAuthEncoder.decode(pair[0]);
                String value = pair.length > 1 ? OAuthEncoder.decode(pair[1]) : EMPTY_STRING;
                params.add(new Parameter(key, value));
            }
        }
    }

    public boolean contains(Parameter param) {
        return params.contains(param);
    }

    public int size() {
        return params.size();
    }

    public ParametersList sort() {
        ParametersList sorted = new ParametersList(params);

        Collections.sort(sorted.params);
        return sorted;
    }
}

public class Parameter implements Comparable<Parameter> {
    private final String key;
    private final String value;

    public Parameter(String key, String value) {
        this.key = key;
        this.value = value;
    }

    public String asUrlEncodedPair() {
        return OAuthEncoder.encode(key).concat("=").concat(OAuthEncoder.encode(value));
    }

    public boolean equals(Object other) {
        if(other == null) return false;
        if(other == this) return true;
        if(!(other instanceof Parameter)) return false;

        Parameter otherParam = (Parameter) other;
        return otherParam.key.equals(key) && otherParam.value.equals(value);
    }

    public int hashCode() {
        return key.hashCode() + value.hashCode();
    }

    public int compareTo(Parameter parameter) {
        int keyDiff = key.compareTo(parameter.key);

        return keyDiff != 0 ? keyDiff : value.compareTo(parameter.value);
    }
}

import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;
import java.util.regex.Pattern;


public class OAuthEncoder {
    private static String CHARSET = "UTF-8";
    private static final Map ENCODING_RULES;

    static {
        Map rules = new HashMap();
        rules.put("*", "%2A");
        rules.put("+", "%20");
        rules.put("%7E", "~");
        ENCODING_RULES = Collections.unmodifiableMap(rules);
    }

    private OAuthEncoder(){}

    public static String encode(String plain) {
        String encoded = "";
        try {
            encoded = URLEncoder.encode(plain, CHARSET);
        }
        catch (UnsupportedEncodingException uee) {
            throw new OAuthException("Charset not found while encoding string: " + CHARSET, uee);
        }
        for(Map.Entry rule : ENCODING_RULES.entrySet()) {
            encoded = applyRule(encoded, rule.getKey(), rule.getValue());
        }
        return encoded;
    }

    private static String applyRule(String encoded, String toReplace, String replacement) {
        return encoded.replaceAll(Pattern.quote(toReplace), replacement);
    }

    public static String decode(String encoded) {
        try {
            return URLDecoder.decode(encoded, CHARSET);
        }
        catch(UnsupportedEncodingException uee) {
            throw new OAuthException("Charset not found while decoding string: " + CHARSET, uee);
        }
    }
}

public class OAuthConstants {
    private OAuthConstants(){}

    public static final String OUT_OF_BAND = "oob";
}

public class OAuthException extends RuntimeException {

    /**
     * Default constructor
     * @param message message explaining what went wrong
     * @param e original exception
     */
    public OAuthException(String message, Exception e) {
        super(message, e);
    }

    /**
     * No-exception constructor. Used when there is no original exception
     *
     * @param message message explaining what went wrong
     */
    public OAuthException(String message) {
        super(message, null);
    }

    private static final long serialVersionUID = 1L;
}

The collected values (oauth*_ parameters + API extension parameters) must be joined to make a single string, from which the signature will be generated. This is called the signature base string in the OAuth specification.

To encode the HTTP method, request URL, and parameter string into a single string:

Set the output string equal to the uppercase HTTP Method (GET in this example).
Append the & character to the output string.
Percent encode the URL and append it to the output string.
Append the & character to the output string
Percent encode the parameter strng and append it to the output string.

The HmacSha1SignatureService class generates the signature using the signature base string and your consumer secret key with an & character with the HMAC-SHA1 hashing algorithm.

import android.util.Base64;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;


public class HmacSha1SignatureService {
    private static final String EMPTY_STRING = "";
    private static final String CARRIAGE_RETURN = "\r\n";
    private static final String UTF8 = "UTF-8";
    private static final String HMAC_SHA1 = "HmacSHA1";
    private static final String METHOD = "HMAC-SHA1";

    public String getSignature(String baseString, String apiSecret, String tokenSecret) {
        try {
            return doSign(baseString, OAuthEncoder.encode(apiSecret) + '&' + OAuthEncoder.encode(tokenSecret));
        }
        catch (Exception e) {
            throw new OAuthSignatureException(baseString, e);
        }
    }

    private String doSign(String toSign, String keyString) throws Exception {

        SecretKeySpec key = new SecretKeySpec((keyString).getBytes(UTF8), HMAC_SHA1);
        Mac mac = Mac.getInstance(HMAC_SHA1);
        mac.init(key);
        byte[] bytes = mac.doFinal(toSign.getBytes(UTF8));
        return bytesToBase64String(bytes).replace(CARRIAGE_RETURN, EMPTY_STRING);
    }

    private String bytesToBase64String(byte[] bytes) {
        return Base64.encodeToString(bytes,Base64.NO_WRAP);
    }

    public String getSignatureMethod() {
        return METHOD;
    }
}

/**
 * Specialized exception that represents a problem in the signature
  */
public class OAuthSignatureException extends OAuthException {
    private static final long serialVersionUID = 1L;
    private static final String MSG = "Error while signing string: %s";

    /**
     * Default constructor
     *
     * @param stringToSign plain string that gets signed (HMAC-SHA, etc)
     * @param e original exception
     */
    public OAuthSignatureException(String stringToSign, Exception e) {
        super(String.format(MSG, stringToSign), e);
    }

}

That's it! Now you can connect to any e-Commerce website that uses the Woocommerce plugin without installing any other plugin. Using the WordPress REST API you can get/manipulate the data you want using its API endpoints. The endpoints I used are:

/wp-json/wc/v2/customers - lets you create a new customer after you have verified them through the signin/login screen of the app.
/wp-json/wc/v2/payment_gateways - lets you retrieve and view all the available payment gateways
/wp-json/wc/v2/products - helps you view all the products that have been sold on the website
/wp-json/wc/v2/shipping/zones - helps you create a new shipping zone
/wp-json/wc/v2/settings/general/woocommerce_currency - gets the currency used
/wp-json/wc/v2/orders - helps you create a new order
/wp-json/wc/v2/products/categories - lets you retrieve all product categories
/wp-json/wc/v2/coupons - helps you list all the coupons that have been created by the website administrator

Here's my final mobile app:

My Final Product

Resources that Makes the App Look Pretty

In finalizing your native mobile app creation, you will need a UI/UX which the user will interact with to manipulate the data gotten from the WordPress server. Luckily, the people at Wsdesign have some free and ready to use templates that you can download.

I hope that you found this article useful and it was able to help you learn and build an awesome app today. If you really liked it, please do share it on all social media platforms.

ecommerce - freeCodeCamp.org

How to Build Your First Shopify App: A Beginner’s Guide

What We’ll Cover

What Is a Shopify App?

How Shopify Apps Work

Setting Up Your Development Environment

Understanding Shopify APIs

Case Study One: Bundle and Discount Apps

Case Study Two: Printful and Order Fulfilment

Case Study Three: Shiprocket and Shipping Rates

Testing Your Shopify App

Preparing for the Shopify App Store

Conclusion

How to Build a Vue E-commerce App Using MSW

Table of Contents

What is a Mock Server?

How to Set Up a Vue E-commerce App

Getting Started With Vue E-commerce App

How to Build an E-commerce App Using Vue 3

How to Build the User Interface

Conclusion

Some helpful guides for e-commerce product development:

How to Build a Digital Products Store with Medusa and Next.js

Table of Contents

What is Medusa?

Prerequisites

Starting Out

How to Set Up TypeScript Type Definitions

How to Incorporate e-Book Previews into the Product Details

How to Offer e-Book Previews

How to Adjust the Product and Shipping Details

How to Add Product Details

How to Adjust the Shipping Details

How to Simplify the Checkout

How to Deliver Digital Products

Mission Accomplished!

How to Build a Shopping Cart with React and TypeScript

Let’s sketch 🙃

TL;DR

What’s a Shopping Cart?

The Plan for Our App

Application features

Tech Stack

How to Build the App

📦 Dependencies

🧑🏻‍💻 Installation

🏗️ Project Structure

🛠️Components

🧩 How to Build the Header

Header Shrinking

🧩 How to Build the Product List

An error occurred when fetching data. Please check the API and try again.

Products

{product.title}

🧩 How to Build the Cart

Cart

{product.title}

Cart

{product.title}

🧩 How to Build the Footer

🧪 Testing the App

🧠 What is LocalStorage?

How to Automate Unit Testing with GitHub Actions

Conclusion

Component-Based Architecture in Medusa – How to Build Robust User Interfaces

Benefits of Component-Based Architecture

Understanding the Medusa Framework

The Medusa Backend

The Medusa Frontend

Server

Storefront

Admin Panel

How to Set Up the Medusa Admin Dashboard

How to Enable the Admin Plugin in the Medusa Configuration File

Understanding Medusa's Component-Based Architecture

Medusa vs Shopify

Customization and Flexibility

Hosting and Infrastructure

Pricing

Ecosystem and App Integrations

How to Set Up Medusa with `create-medusa-app`