Learn about the technology I use every day though step by step tutorials. Free content covering JavaScript, React, Node and WordPress - some of the most popular technologies used on the web today.

thumbnail_blog.jpg

blog.jpg

Blog Posts

Coming Soon. In each course we will build a complete, full stack web application from scratch using the latest web technologies. Level up your web development skills through these affordable courses.

thumbnail_courses.jpg

courses.jpg

Courses

thumbnail_social-media.jpg

social-media.jpg

Hi, my name is Ben. My goal with this website is to move everything I know about programming from my brain to my blog. 

thumbnail_learn-to-code.jpg

learn-to-code.jpg

Benjamin Brooke

Learn the most popular tech in web development - JavaScript, React, PHP, Linux and more. Read free coding tutorials today or take an affordable, in depth course.

Benjamin Brooke | Web Development Blog + Courses

We transform your idea into a fully-functional, modern website taking advantage of the latest web technologies. Let us handle the entire process.

thumbnail_development.jpg

development.jpg

Design, Development & Deployment

Search Ranking is make or break in modern business. We evaluate your website and make the changes necessary to increase traffic and sales.

thumbnail_seo.jpg

seo.jpg

Search Engine Optimization

We work with all the major eCommerce platforms in addition to custom sites. Payment processing, data management, digital marketing, email, SMS & more.

thumbnail_ecommerce.jpg

ecommerce.jpg

eCommerce Expertise

## About This Visualization

This chart summarized sample sales by brand and manufacturer for my current employer. Samples of fabric and wallpaper can be purchased at a relatively inexpensive price before committing to the larger financial commitment of purchasing yardage or rolls. 

The chart has two modes - brand and manufacturer. Our website sells over 70 distinct brand names, but many of these brands can be grouped my manufacturer. Generally, business relationships are on the manufacturer level, while customers are more concerned with purchasing products based on the brand level.

In brand mode, each bubble represents a brand. The radius, and therefore the size, of the bubble is determined by the number of samples sold. In manufacturer mode the same rules apply, with each brand being folded into its manufacturer.

The chart can also be filtered by manufacturer to drill down and examine specific brands.

The result is an overview of performance in sample sales.

## How This Visualization Was Created

I used the online platform [Observable](https://observablehq.com/product) to help create this visualization. Observable makes it easier to quickly share ideas and code, especially when it comes to interactive data visualizations. It is also relatively easy to take parts of an Observable project and embed them into a website, like I have done here.

The primary library used to create this bubble chart visualization is [D3](https://github.com/d3/d3). Data Driven Documents is a JavaScript library that supplies many of the tools needed to organize data and eventually render interactive SVG elements that represent that underlying data.

I used the WooCommerce REST API to crawl through orders and pull out the relevant line items for samples. I built a simple script with Node that consumed the orders for this year and output a CSV file with the order number, product SKU, and product name for each sample line item.

This is the exact script I used to gather raw data from the WooCommerce REST API (is built into every WooCommerce site). Samples are something of a custom product type, so I had to take that into consideration. Essentially, the sample is a singular product, with specific meta data assigned dynamically to describe it. This Node script was created separate and apart from the Observable notebook.

```js
require('dotenv').config()
const WooCommerceRestApi = require('@woocommerce/woocommerce-rest-api').default
const { createWriteStream } = require('fs')

// Establish WooCommerce REST API connection
const WooCommerce = new WooCommerceRestApi({
  url: 'https://example.com',
  consumerKey: process.env.WOOCOMMERCE_KEY,
  consumerSecret: process.env.WOOCOMMERCE_SECRET,
  version: 'wc/v3',
})

// Create write stream to CSV file
const writer = createWriteStream('data.csv')
writer.write(`order,sku,name\n`)

async function main() {
  var page = 1

  while (page <= 124) {
    const res1 = await WooCommerce.get(`orders`, {
      per_page: 100,
      page,
    })

    for (let order of res1.data) {
      for (let item of order.line_items) {
        if (
          item.name === 'Sample' &&
          item.meta_data[0].hasOwnProperty('key') &&
          item.meta_data[0]['key'] === 'Name' &&
          item.meta_data[1].hasOwnProperty('key') &&
          item.meta_data[1]['key'] === 'SKU'
        ) {
          let name = item.meta_data.find((el) => el.key === 'Name')['value']
          let sku = item.meta_data.find((el) => el.key === 'SKU')['value']

          writer.write(`"${order.id}","${sku}","${name}"\n`)
        }
      }
    }

    page += 1
  }
}

main()
```

The resulting CSV file can be directly attached to an Observable notebook, or can be placed into a public Gist and imported via URL.

Within Observable I am able to dynamically change the data powering the visualization by using the `groupBy` variable. This `groupBy` is attached to the radio button inputs above.  

```js
sampleData = {
  const data = []
  const raw = await d3.csv('https://gist.githubusercontent.com/benjaminadk/cafbad398de0a1f8c49a5446f417beb1/raw/7c61ae88021f37a972961a4071dc62b309f7c018/ladc-sample-sales.csv')

  for(let r of Array.from(raw)) {
    for(let b of brands) {
      let mod = groupBy === 'brand' ? b.name : b.manf
      if(r.name.startsWith(b.short)) {
        if(data.find(el => el.brand === mod)) {
          data.find(el => el.brand === mod)['samples'] += 1
        } else {
          let id = groupBy === 'brand' ? b.abbr : manufacturers.find(el => el.name === b.manf)['id']
          data.push({id, brand: mod, manf: b.manf, samples: 1})
        }
      }
    }
  }

  return data
}
```

thumbnail_b22.jpg

b22.jpg

A bubble chart visualization built with D3 that summarizes the sample sales by brand and/or manufacturer for quarters 1 and 2 of 2021.

D3 Visualization | Bubble Chart - LADC Sample Sales

This is the first in a series of posts that will describe software I have built for my full time employer. In addition to a technical overview of the software, these posts give me an opportunity to reflect on how my work impacts the day to day operations at work.

## Summary

This article describes why and how I created a JavaScript application that automates a large portion of order placement for my employer. I believe that my app saved my employer from having to hire at least 1 full time data entry level employee at a salary I would estimate at $30 - $35K per year. In reality, the automation also freed up existing employees to pursue other tasks that benefit the company. We are a small eCommerce website in the process of leveling up.

I am proud of the application, for its simplicity and effectiveness in solving a problem, and of course it makes me look valuable in the eyes of my employer. Despite all these facts, I can't help but calculate my financial gain versus that of my employer and be a little frustrated. I suppose that is a common grievance in just about every line of work.

## The Problem

The essential problem is dealing with growth. Systems that work one day, utterly fail as they are forced to scale up.

Our eCommerce business sells high-end fabrics and wallpaper, from multiple suppliers, that were traditionally only available to interior designers. A typical purchase can range from a few hundred to thousands of dollars. Since these purchases involve a substantial financial commitment, we offer samples for $5 a piece. These enable customers to experience the material first hand, and allow them to make a more informed choice. This is an industry standard. It is a valuable service for the customer and also provides a revenue stream for the business.

> Despite my employer being very polite, and profusely apologizing to me every time I was asked to help pitch in with sample ordering, I couldn't help but feel that the work was beneath my position, to say nothing of the waste of resources. After all, my time is better spent improving the website.

Once we received a sample order through our website, a salesperson would then order the sample from the supplier. Suppliers either have an online interface to enter customer and product information or require an email with all these details (small companies without website forms). 

This system was fine with low volume, but did not scale well. As sales grew, our main sales staff was too busy selling regular orders so we hired a full time person specifically to process sample orders. As orders continued to grow, I was occasionally asked to help out for a couple hours a day at first, and eventually devote entire works days to ordering samples. I quickly realized these online interfaces were designed for individual interior designers, not for bulk purchasers. They were slow and inefficient. On top of that, the work was boring - basic copy and paste data entry.

<img src="v1624759454/b21_1_fa7a6bcd40.jpg" alt="Data Entry Satire" width="1024" height="576" />

Eventually, we attempted to hire a second samples processer. Two separate people quit after two days, presumably once learning what the job really entailed.

At our lowest point we were 10 days behind in placing these sample orders. At a certain point, blaming everything on the pandemic wasn't cutting it. We started to get phone calls from customers who wanted to know why they hadn't received their order. This served to slow us down even more, with our samples person spending more time on the phone than ordering samples.

## Potential Best Solutions

The person who signs the paychecks at my company - the Boss - came to be and asked what we could do about this. 

> I said we need to batch orders. 

Unfortunately, only one of our suppliers had an [EDI system](https://en.wikipedia.org/wiki/Electronic_data_interchange) set up. This is the ideal solution, and amounts to batch ordering. In this scenario we would be responsible for uploading a document in some previously agreed to format that contained all the orders for a given day.

Another solution is to outsource. As a programmer and problem solver, I am always against this option - at least initially. If someone else has a solution that involves some sort of code, I know that I can also come up with something. There is also added cost and a loss of control over the process. On the other hand, it could be a great solution in some cases. I don't really know first hand.

Since EDI was basically off the table, we had to come up with something else.

## The Solution We Used

A few weeks after I was sucked into this problem, the solution fell into my lap.

We were experiencing issues with the order interface on a popular manufacturer's website. Basically, the there were critical errors that made it impossible for us to order samples. When we reached out to the company in question they decided we should just email our orders and that they were giving us a dedicated person on their end to make sure our email orders were placed. This service was granted based on our high volume. 

I thought, what if everyone did that for us?

Quickly and persuasively our management reached out and got all of our suppliers to agree to this email model. Now I had the conditions present to create a sample order application.

## The Development Process

In order to simplify and speed up the development process I decided to lean on my preferred language of JavaScript and designed a [Node](https://nodejs.org/en/) based command line application. This application would take user input in the form of an order number and some option flags, then consume our REST API to gather order details, format a text email, and then use the SendGrid API to send out multiple emails to our suppliers in rapid fire succession. It is not uncommon for a single order to require 5 or more separate emails since we sell product from so many suppliers.

Alternatively, I could have designed custom PHP code, or what is commonly called a plugin, to work with our [WooCommerce](https://woocommerce.github.io/) (WordPress) based website directly. Perhaps, this will be the eventual, long term solution, but I decided against this initially, since it would take longer to develop. On the other hand, if its not broke don't fix it. 

With my Node CLI approach, I was able to write the script to solve all our problems in less than half a day.

<img src="v1624931172/b21_2_ad51d34350.jpg" alt="Samples" width="1182" height="863" />

## How It Works

I already had a command line application for work related tasks so integrating this order placement functionality into this preexisting framework made sense. For as basic introduction into creating command line applications with Node, check out my article [How To Build a Command Line Application With Node](/blog/how-to-build-a-command-line-application-with-node/). 

The CLI is built with a great framework called [Commander](https://github.com/tj/commander.js) that allows me to create a main command with multiple subcommands. Each subcommand is responsible for a different task and can accept a number of inputs in the form of flags. Flags can pass Strings, Numbers or Booleans to the underlying business logic.

### Command Structure

For this application to work it requires a number of inputs. First and foremost is the order number from our WooCommerce system. In addition, the application also has a test mode, that prints out all the emails before sending them. This is a great feature to make sure that all order items are being processed and that everything is formatted correctly and being sent to the proper destination. There are some other options, but in the interest of time I will omit those from this discussion.

The final command that is entered into the terminal might look something like this.

A generic version

```bash
main-command subcommand --flag1 input1 --flag2 input2
```

A real world example. Note that flags have a long and short form, differentiated by a single dash and single letter `-f` or double dash and word `--flag`. 

```bash
ladc samples -o 1023356 -t
```

The above example would trigger a test for order number `1023356`.

The code is fairly simple using Commander. The framework allows you to define your flags, which also appear when the `help` command is triggered, and also parses them to be used as variables in your business logic.

```js
#!/usr/bin/env node

const program = require('commander')

program
  .option('-o, --order <number>', 'Order number to process')
  .option('-t, --test', 'Enable test mode', false)
  .parse(process.argv)

async function main() {
  const {
    order,
    test
  } = program

// use variables in logic...
}

main()
```

### Dependencies

Besides Node itself and the previously mentioned Commander CLI framework my application requires three libraries - the [WooCommerce REST API](https://github.com/woocommerce/woocommerce-rest-api), [SendGrid Mail API](https://github.com/sendgrid/sendgrid-nodejs) and the [Klaviyo API](https://github.com/klaviyo/node-klaviyo). We already had a paid SendGrid account for some transitional emails, but even their free tier allows a generous number of emails per day.

### Fetching The Order Data

The first step in the business logic is to use the WooCommerce API to lookup with data associated with order number supplied to the command line. This data includes all the relevant customer information - name and shipping address, as well as the line items the application will loop through looking for, and grouping samples by manufacturer.

```js
const WooCommerceRestApi = require('@woocommerce/woocommerce-rest-api').default

const WooCommerce = new WooCommerceRestApi({
  url: 'http://example.com',
  consumerKey: process.env.WOOCOMMERCE_KEY,
  consumerSecret: process.env.WOOCOMMERCE_SECRET,
  version: 'wc/v3',
})

async function main() {
   const {
    order,
    test
  } = program

   try {
      const res = await WooCommerce.get(`orders/${order}`)
      const { first_name, last_name, address_1, address_2, city, state, postcode } = res.data.shipping
      const items = res.data.line_items

      for (let item of items) {
         // 1. check if item is a sample
         // 2. if it is a sample, group by manufacturer
      }
   } catch(error) {
      // log it or do something else...
  }
}

main()
```

### Example WooCommerce Order JSON Object

Straight from the documentation. 

```json
{
  "id": 727,
  "parent_id": 0,
  "number": "727",
  "order_key": "wc_order_58d2d042d1d",
  "created_via": "rest-api",
  "version": "3.0.0",
  "status": "processing",
  "currency": "USD",
  "date_created": "2017-03-22T16:28:02",
  "date_created_gmt": "2017-03-22T19:28:02",
  "date_modified": "2017-03-22T16:28:08",
  "date_modified_gmt": "2017-03-22T19:28:08",
  "discount_total": "0.00",
  "discount_tax": "0.00",
  "shipping_total": "10.00",
  "shipping_tax": "0.00",
  "cart_tax": "1.35",
  "total": "29.35",
  "total_tax": "1.35",
  "prices_include_tax": false,
  "customer_id": 0,
  "customer_ip_address": "",
  "customer_user_agent": "",
  "customer_note": "",
  "billing": {
    "first_name": "John",
    "last_name": "Doe",
    "company": "",
    "address_1": "969 Market",
    "address_2": "",
    "city": "San Francisco",
    "state": "CA",
    "postcode": "94103",
    "country": "US",
    "email": "john.doe@example.com",
    "phone": "(555) 555-5555"
  },
  "shipping": {
    "first_name": "John",
    "last_name": "Doe",
    "company": "",
    "address_1": "969 Market",
    "address_2": "",
    "city": "San Francisco",
    "state": "CA",
    "postcode": "94103",
    "country": "US"
  },
  "payment_method": "bacs",
  "payment_method_title": "Direct Bank Transfer",
  "transaction_id": "",
  "date_paid": "2017-03-22T16:28:08",
  "date_paid_gmt": "2017-03-22T19:28:08",
  "date_completed": null,
  "date_completed_gmt": null,
  "cart_hash": "",
  "meta_data": [
    {
      "id": 13106,
      "key": "_download_permissions_granted",
      "value": "yes"
    }
  ],
  "line_items": [
    {
      "id": 315,
      "name": "Woo Single #1",
      "product_id": 93,
      "variation_id": 0,
      "quantity": 2,
      "tax_class": "",
      "subtotal": "6.00",
      "subtotal_tax": "0.45",
      "total": "6.00",
      "total_tax": "0.45",
      "taxes": [
        {
          "id": 75,
          "total": "0.45",
          "subtotal": "0.45"
        }
      ],
      "meta_data": [],
      "sku": "",
      "price": 3
    },
    {
      "id": 316,
      "name": "Ship Your Idea &ndash; Color: Black, Size: M Test",
      "product_id": 22,
      "variation_id": 23,
      "quantity": 1,
      "tax_class": "",
      "subtotal": "12.00",
      "subtotal_tax": "0.90",
      "total": "12.00",
      "total_tax": "0.90",
      "taxes": [
        {
          "id": 75,
          "total": "0.9",
          "subtotal": "0.9"
        }
      ],
      "meta_data": [
        {
          "id": 2095,
          "key": "pa_color",
          "value": "black"
        },
        {
          "id": 2096,
          "key": "size",
          "value": "M Test"
        }
      ],
      "sku": "Bar3",
      "price": 12
    }
  ],
  "tax_lines": [
    {
      "id": 318,
      "rate_code": "US-CA-STATE TAX",
      "rate_id": 75,
      "label": "State Tax",
      "compound": false,
      "tax_total": "1.35",
      "shipping_tax_total": "0.00",
      "meta_data": []
    }
  ],
  "shipping_lines": [
    {
      "id": 317,
      "method_title": "Flat Rate",
      "method_id": "flat_rate",
      "total": "10.00",
      "total_tax": "0.00",
      "taxes": [],
      "meta_data": []
    }
  ],
  "fee_lines": [],
  "coupon_lines": [],
  "refunds": [],
  "_links": {
    "self": [
      {
        "href": "https://example.com/wp-json/wc/v3/orders/727"
      }
    ],
    "collection": [
      {
        "href": "https://example.com/wp-json/wc/v3/orders"
      }
    ]
  }
}
```

### Looping Over Line Items

With the raw order data information now read into the application's memory, the next task is to loop through the line items and perform what amounts to filtering and reducing (or grouping).

The filtering is simple enough. In our system a sample is considered a singular product. In fact, the details - such as the name and SKU of the sample are determined by meta data.

The biggest challenge turns out to be sifting through the data structures. In the end the [Array.find]() method comes in handy to find the `Name` and `SKU`. With this `Name` value it is now possible to map the current sample to what we already know about brands, their manufacturers and the email of the person we need to send the order to. All sample names follow the same pattern - `BRAND PATTERN_NAME COLOR CATEGORY`. 

As I created this business logic I also created my own data structure containing all of the brands. It ended up being a big array - we offer circa 80 brands.

```js
const BRANDS = [
   {
      name: 'NAME OF BRAND',
      to: { name: 'NAME OF CONTACT', email: 'EMAIL OF CONTACT' },
      samples: []
   },
]
```

Now I can get the name of the sample and the loop over the `BRANDS` to store like with like. The only complicating factor is that multiple brands can come from the same manufacturer or distributor, and must be grouped even further at a later stage.

```js
for (let item of items) {
  if (item.name === 'Sample') {
    let name = item.meta_data.find((el) => el.key === 'Name')['value']
    let sku = item.meta_data.find((el) => el.key === 'SKU')['value']

    for (let brand of BRANDS) {
      if (name.startsWith(brand.name)) {
        brand.samples.push(`${name} ${sku.slice(sku.indexOf('-') + 1)}`)
      }
    }
  }
}
```

### Grouping Samples By Manufacturer

The line item loop effectively group samples by brand. Each relevant brand will have an array of string that describe each sample we intend to order. The next step is to consolidate the brand arrays to manufacturer arrays. I often used the first brand, because in our industry the manufacturer typically has a brand with the same name, in addition to many other brands with other names. In can get kind of confusing.

```js
    var arr1 = BRANDS.find((el) => el.name === 'Brand A')['samples']
    var arr2 = BRANDS.find((el) => el.name === 'Brand B')['samples']
    var arr3 = BRANDS.find((el) => el.name === 'Brand C')['samples']

    BRANDS.find((el) => el.name === 'Brand A')['samples'] = [...arr1, ...arr2, ...arr3]
    BRANDS.find((el) => el.name === 'Brand B')['samples'] = []
    BRANDS.find((el) => el.name === 'Brand C')['samples'] = []
```

### Formatting The Email

With the samples grouped by manufacturer I can now loop over `BRANDS` to format the emails that will be sent to each suppliers samples contact. As a sidenote, this whole episode gave us insight into our ability to set terms with our suppliers. Since we provide a lot of business, these companies are willing to provide resources to us to facilitate our operation. As I mentioned earlier, the vast majority of our suppliers are set up to sell to individual designers, not a service like ours that sells direct to consumer with a high level of customer service.

Our purposes require a simple email. Using the `name` and `email` that are predefined, all that is left to do is some formatting and looping over the samples. Below is a simplified version of what we use, there are specific changes per manufacturer but those aren't important here. When the `-t` or `--test` flag is present the email content is logged to the console, otherwise the email is sent using SendGrid. The cool part is that our contacts did not realize we had switched to an automated system. One day, one of our suppliers asked us how we sent so many orders so fast. 

```js
const sgMail = require('@sendgrid/mail')
sgMail.setApiKey(process.env.SENDGRID_KEY)

// ... more code here

for (let brand of BRANDS) {
  if (brand.samples.length) {
    var text = `Hello${brand.to.name},\n\nCan we please have the following samples sent to the address below?\n\n`

    for (let sample of brand.samples) {
       text += `${sample}\n\n`
    }

    text += `${first_name} ${last_name}\n${address_1} ${address_2}\n${city}, ${state} ${postcode}\n\n`

    text += `Please include sidemark: ${order} on paperwork with samples.\n\n`

    text += `Thanks,\n\n${from.nickname}\n\n${from.name}\nBusiness Name Here\n${from.email}\n`

    let subject = `Sample Request - ${order} Client - ${last_name}`

    let message = {
      to: brand.to.email,
      cc: from.email,
      from: from.email,
      subject,
      text,
    }

    if (test) {
      console.log(`=======================TEST MODE=======================`)
      console.log(`To: ${brand.to.email}`)
      console.log(`From: ${from.email}`)
      console.log(`Subject: ${subject}\n`)
      console.log(text)
    } else {
      await sgMail.send(message)
      console.log(`Email sent! To: ${brand.to.email} Brand: ${console_brand}`)
    }
  }
}
```

## Final Thoughts

This article was more of a personal record of the work I have done than it was a tutorial. That being said, it seems that this content could inspire a similar application for any number of purposes. What made this application interesting to me was how it solved a significant problem for my employer - it saved tens of thousands of dollars and hours of repetitive work. There is an interesting voice in my head connecting this relatively small example to the overall trend in society - that is technology replacing human employment, but in this case everyone disliked this task and multiple people quit after a couple days doing it. I am also left with a deeper understanding of how powerful code can be - one day we had an ad posted and as soon as I deployed this app it was down for good. This is a satisfying feeling.

thumbnail_b21.jpg

b21.jpg

I describe an application I built for my employer that automated order placement and data entry, saving the company from hiring one full time employee.

eCommerce Stories | Automating Order Placement & Data Entry

The flip card is a versatile component with as many use cases as someone can imagine.  A flip card can defined as a card that contains content on two sides that rotates upon user interaction. Flip cards can be used to display images, text, in eCommerce applications and in games, to many a few. 

This article is a step by step tutorial for creating a basic implementation of a flip card using [React](https://reactjs.org/). I encourage readers to code along with me, if they want, using [Code Sandbox](https://codesandbox.io/) or the editor of their choice. Only a basic understanding of JavaScript and React are required, as most of the mystery behind the flip card is proper JSX structure and the knowledge of a couple lesser known CSS properties.

[Check out this project on Code Sandbox](https://codesandbox.io/)

## Create A React Project

To get started create a React project. While any React project will do, to follow along with this tutorial start by navigating to [Code Sandbox](https://codesandbox.io/). Create a new account (it's free), and then create a new sandbox. At this point, various template options are presented. These templates create a basic file structure and install necessary dependencies based on language and framework. Chose the React template.

<img src="/v1624163476/b20_1_b2d3f5e196.png" alt="Chose The React Template" width="1343" height="567" />

This creates what amounts to a new online IDE for coding in React. This is ideal for small projects, tutorials like this, and quick prototyping. This is the starting point for this tutorial.

<img src="/v1624163861/b20_2_76ec2c41ae.png" alt="React Template" width="1909" height="948" />

## Install Dependencies

Using the built in dependency search tool, add the following packages.

- [bootstrap](https://github.com/twbs/bootstrap) - a popular CSS framework
- [sass](https://github.com/sass/dart-sass) - adds useful features to CSS
- [classnames](https://github.com/JedWatson/classnames) - add conditional statements to classNames

These additions will be reflected in the `package.json` file. Code Sandbox provides this convenient user interface as a substitute for using `npm install` commands.

```json
  "dependencies": {
    "bootstrap": "5.0.1", // highlight-line
    "classnames": "2.3.1", // highlight-line
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "sass": "1.35.1" // highlight-line
  }
```

## Refactor Default Project Structure

A few minor changes are needed to restructure the project for this tutorial.

Rename `styles.css` to `styles.scss` and update the `import` statement in `App.js`.

Import the default Bootstrap styles

<div class="filename">App.js</div>

```js
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.scss";
```

## Create The Flip Card Component Structure

Create a new file named `FlipCard.js`. Insert the following code, which is the basic structure of the flip card.

<div class="filename">FlipCard.js</div>

```js
function FlipCard() {
  return (
    <div className="flip-card-outer">
      <div className="flip-card-inner">
        <div className="card front">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">Front</p>
          </div>
        </div>
        <div className="card back">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">Back</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default FlipCard;
```

The `FlipCard` component structure consists of an inner and outer container. Within the inner container there are two similar code blocks, one each for the front and back of the card. A few Bootstrap classes are used to quickly scaffold the component. The additional classes will be defined in the next few steps.

## Create Flip Card Data Structure

This example will illustrate three different variants of the flip card. Each variant will have a different trigger mechanism. Text is used to describe the trigger mechanism will be displayed on the front of the card, and to keep things simple, the back of each card will display the text `Back`.

Add the following array to `App.js`. Each object describes a card.

```js
const cards = [
  {
    id: "1",
    variant: "hover",
    front: "Hover",
    back: "Back"
  },
  {
    id: "2",
    variant: "click",
    front: "Click",
    back: "Back"
  },
  {
    id: "3",
    variant: "focus",
    front: "Focus",
    back: "Back"
  }
];
```

| Property | Description                    |
| :------- | :----------------------------- |
| id       | unique identifier              |
| variant  | describes the rotation trigger |
| front    | text displayed on front        |
| back     | text displayed on back         |

## Add Flip Cards To The App

Add the flip cards to the `App` component by importing the `FlipCard` component and mapping over the `cards` data array, rendering a `FlipCard` for each object in the array. Some additional Bootstrap classes are used to quickly structure the layout. Additional styles will be defined in the next step.

<div class="filename">App.js</div>

```js
import FlipCard from "./FlipCard";

import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.scss";

const cards = [
  {
    id: "1",
    variant: "hover",
    front: "Hover",
    back: "Back"
  },
  {
    id: "2",
    variant: "click",
    front: "Click",
    back: "Back"
  },
  {
    id: "3",
    variant: "focus",
    front: "Focus",
    back: "Back"
  }
];

export default function App() {
  return (
    <div className="container">
      <div className="row h-100">
        <div class="col d-flex flex-column flex-md-row justify-content-around align-items-center">
          {cards.map((card) => (
            <FlipCard key={card.id} card={card} />
          ))}
        </div>
      </div>
    </div>
  );
}
```

Each `card` object is now passed as `props` to the `FlipCard` component. Therefore, the data can be used in the rendering of each card to determine the text displayed on each side.

<div class="filename">FlipCard.js</div>

```js
function FlipCard({ card }) {
  return (
    <div className="flip-card-outer">
      <div className="flip-card-inner">
        <div className="card front">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">{card.front}</p>
          </div>
        </div>
        <div className="card back">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">{card.back}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default FlipCard;
```

With the basic JSX structure (and thus underlying HTML structure) in place, the result is rather uninspiring. Style rules and component logic are needed, but the inheritance of `props` can be seen in the card text.

<img src="/v1624211962/b20_3_b3bfad1b12.png" alt="Flip Cards Without Styling" width="1076" height="227" />

## Add SCSS Styling

Styling is necessary for `FlipCard` functionality. The SCSS for these components positions the front and back the card absolutely, as layers on top of each other. The back of the card is then rotated 180 degrees around the y-axis.  

<div class="filename">styles.scss</div>

```sass
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

body {
  font-family: 'Ubuntu', sans-serif;
  background-image: radial-gradient(farthest-corner at 40px 40px,
  #f35 0%, #43e 100%);
}

.container {
  height: 100vh;
}

.flip-card-outer {
  width: 300px;
  height: 400px;
  margin: 25px 0;

  &.focus-trigger:focus {
    outline: 5px solid greenyellow;
    outline-offset: 5px;
  }

  .flip-card-inner {
    transform-style: preserve-3d;
    transition: .5s linear .1s;
    position: relative;
    width: inherit;
    height: inherit;

    &.hover-trigger:hover {
      transform: rotateY(180deg);
    }

    &.showBack {
      transform: rotateY(180deg);
    }
  
    .card {
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  
      &.front {
        transform: rotateY(0);
        background-color: #2d2d2d;
        color: #fff;
      }
  
      &.back {
        transform: rotateY(180deg);
        background-color: #fff;
        color: #2d2d2d;
      }
    }
  }
}
```

The [Google Font Ubuntu](https://fonts.google.com/specimen/Ubuntu) has been imported and added to the `body` element. A radial gradient with bold colors has been added as a background. These are aesthetic choices unrelated to flip card function.

The `flip-card-outer` class is given the `width` and `height` properties. Obviously, these can be altered depending on use case. The layer remains static and unaffected by rotational transforms.

The `flip-card-inner` class uses relative `position` to give the underlying sides of the card a boundary or reference point. This is the layer that rotates 180 degrees to give the flip card its functionality. This transform is toggled by conditionally adding and removing an additional class. This logic will be coded in the next step. Other important properties include `transform-style: preserve-3d` and `transition: .5s .1s`. The first number of the transition is the duration and the second is the delay, both in seconds.

The `card` class is positioned absolutely, and thus both the front and back are on top of each other. The `back` is rotated 180 degrees around the y-axis. The color schemes of the `front` and `back` classes are inverted for effect.

## Create The Hover Triggered Flip Card

The hover variation relies on the [hover psueo-class](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements). Since the `props` data controls which `FlipCard` component uses this mechanism, `classnames` can be used to apply the `hover-trigger` class.

<div class="filename">FlipCard.js</div>

```js
import cn from "classnames";

      <div
        className={cn("flip-card-inner", {
          "hover-trigger": card.variant === "hover"
        })}
      >
```

The `classnames` library works by wrapping the `className` attribute in a function. In this use case the first argument is a string that represents a permanent class declaration. In other words,  the `flip-card-inner` class will always be present on the element. The second argument is an object where the key is a class and the value is a conditional statement. When the conditional statement is `true` the class is applied, and when it's `false` the class is not applied. Therefore, the `hover-trigger` class is only applied when `FlipCard` is passed a variant of `hover`. 

Now the first card is functional.

<img src="/v1624237413/b20_4_f7111cff1a.png" alt="Hover Flip Card Is Working" width="1259" height="464" />

## Create The Click Triggered Flip Card

While the hover variant can be implemented with only CSS, the click variant implementation requires additional JavaScript logic. Instead of using a `pseudo-class` that inherently toggles based on user behavior, the click variant relies on toggling a class itself - in this case the `showBack` class. This is toggled through component `state` by creating a `handleClick` function to respond to the `onClick` event. 

The new code is highlighted below.

<div class="filename">FlipCard.js</div>

```js
import { useState } from "react"; // highlight-line
import cn from "classnames";

function FlipCard({ card }) {
  const [showBack, setShowBack] = useState(false); // highlight-line

  function handleClick() { // highlight-line
    if (card.variant === "click") { // highlight-line
      setShowBack(!showBack); // highlight-line
    } // highlight-line
  } // highlight-line

  return (
    <div
      className="flip-card-outer"
      onClick={handleClick} // highlight-line
    >
      <div
        className={cn("flip-card-inner", {
          showBack, // highlight-line
          "hover-trigger": card.variant === "hover"
        })}
      >
        <div className="card front">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">{card.front}</p>
          </div>
        </div>
        <div className="card back">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">{card.back}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default FlipCard;
```

Component `state` is introduced and toggled `onClick` when the variant is `click`. This is a good introductory example of React `props` and `state` creating dynamic functionality.

## Create The Focus Triggered Flip Card

The `focus` variant is similar to `click`, but is geared towards creating an accessible component for users that rely more on their keyboards. This card also adds a bright outline when focused, adding visual context for the user. Again, this is implemented through component `state` - using the same `showBack` value is fine. In this case `handleFocus` and `handleBlur` functions are used to control `state` and respond to user actions. In addition, the `id` property assigned in the card data can be used as a `tabIndex` - this controls how many tab presses it takes to focus the given element.

```js
import { useState } from "react";
import cn from "classnames";

function FlipCard({ card }) {
  const [showBack, setShowBack] = useState(false);

  function handleClick() {
    if (card.variant === "click") {
      setShowBack(!showBack);
    }
  }

  function handleFocus() { // highlight-line
    if (card.variant === "focus") { // highlight-line
      setShowBack(true); // highlight-line
    } // highlight-line
  } // highlight-line

  function handleBlur() { // highlight-line
    if (card.variant === "focus") { // highlight-line
      setShowBack(false); // highlight-line
    } // highlight-line
  } // highlight-line

  return (
    <div
      tabIndex={card.id} // highlight-line
      className={cn("flip-card-outer", { // highlight-line
        "focus-trigger": card.variant === "focus" // highlight-line
      })} // highlight-line
      onClick={handleClick}
      onFocus={handleFocus} // highlight-line
      onBlur={handleBlur} // highlight-line
    >
      <div
        className={cn("flip-card-inner", {
          showBack,
          "hover-trigger": card.variant === "hover"
        })}
      >
        <div className="card front">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">{card.front}</p>
          </div>
        </div>
        <div className="card back">
          <div className="card-body d-flex justify-content-center align-items-center">
            <p className="card-text fs-1 fw-bold">{card.back}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default FlipCard;
```

<img src="/v1624242693/b20_5_a860595d0d.png" alt="Focus Flip Card Is Working" width="1105" height="479" />

## Final Thoughts

With this basic component structure in your design quiver many other applications and use cases can be explored, with the only limiting principle being the imagination. Use the `fork` feature in Code Sandbox to use this example as a starting point, or port the basic style and logic into a new application. Here is a fork I created that uses the cards in an eCommerce context.

<a href="https://codesandbox.io/s/flip-cards-2-1i3iy" target="_blank">
<img src="v1625276900/b20_6_a049e761cf.png" alt="Custom Flip Cards Example" width="800" height="463" />
</a>

Learn how to use React and build a flip card component. This tutorial covers multiple user interactions including hover, click and focus.

How To Build A Flip Card Component With React

Create A React Project

Use Code Sandbox to create a new project with the React Template

Install Dependencies

Using the depedencies tool install bootstrap, sass and classnames.

Refactor Project Structure

Rename files and import dependencies to account for using Bootstrap and Sass in this project.

Create The Flip Card Component Structure

Create a new file and React functional component to house the Flip Card JSX and logic.

Create Flip Card Data Structure

Create an array of objects that represent the underlying data that controls each individual flip card.

Add Flip Cards Too App

Use the JavaScript map function to add flip cards to app based on the data model.

Add SCSS Styling

Add the SCSS styles rules that allow the flip cards to look and function how they do.

Create The Hover Triggered Flip Card

Use the classnames library to implement logic to create a hover triggered flip card.

Create The Click Triggered Flip Card

Use React state and conditional logic to create a click triggered flip card.

Create The Focus Triggered Flip Card

Use React state and conditional logic to create an accessible friendly, focus triggered flip card.

Code Sandbox

https://www.youtube.com/watch?v=Aeye2Wh5dEc

Create Flip Card Component

Create Flip Card Data

Add Flip Cards To App

Add SCSS Styles

Create Hover Triggered Flip Card

Create Click Triggered Flip Card

Create Focus Triggered Flip Card

How To Create A Flip Card Component With React

thumbnail_b20.jpg

b20.jpg

Learn how to use React and SCSS to code a basic flip card component that rotates on either hover, focus or click.

[Next.js](https://nextjs.org/) creates an optimized production build of our application out of the box and includes features like image optimization, page pre-rendering, code splitting and bundling. These features are important because website performance is important. Google Search Console now tracks a collection of signals that make up what they call [Page Experience](https://developers.google.com/search/docs/guides/page-experience) with an [algorithm update to follow soon](https://www.searchenginejournal.com/google-page-experience-algorithm-update-launching-in-mid-june/403023/).

A portion of Page Experience are [Core Web Vitals](https://web.dev/vitals/), which measure metrics such as [Largest Contentful Paint](https://web.dev/lcp/#measure-lcp-in-javascript) and [First Input Delay](https://web.dev/fid/#measure-fid-in-javascript). These can be directly effected by how long it takes a Next.js application to load. Load time is directly affected by the size of JavaScript chunks which are bundled during the build process. Hence, therefore, thus it a good idea to read this article and learn more about analyzing and optimize a Next.js build.

While Google maintains the relevance is the primary factor in page ranking, these performance metrics can differentiate pages with similar relevance. Here is an excerpt from Google's documentation.

>While page experience is important, Google still seeks to rank pages with the best information overall, even if the page experience is subpar. Great page experience doesn't override having great page content. However, in cases where there are many pages that may be similar in relevance, page experience can be much more important for visibility in Search.

In addition to search ranking, don't we want the users of our website to have the best experience possible? As web developers don't we want to learn new skills?

This article will describes the steps developers can take to analyze and optimize a Next.js build even more than the popular framework already does. To illustrate this process I will walk through the steps I took with this site.

## Install Next Bundle Analyzer

There is a tool called [Next Bundle Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer?activeTab=readme) I used to visualize and take a more detailed look at the the size of various parts of my application. 

Run the following command to add this package.

```bash
npm install @next/bundle-analyzer cross-env
```

## Configure Next Bundle Analyzer

Next Bundle Analyzer works with the `next build` command. It is common practice to use the environment variable `ANALYZE` to enable the analyzer. 

Add a new script to `package.json` that sets this environment variable and then runs the build command. The `cross-env` package is used before the environment variable assignment to ensure that the value is set properly across all platforms.

```json
"analyze": "cross-env ANALYZE=true next build"
```

The `next.config.js` file must be updated (or created) to enable the bundle analyzer. Add the following code.

```js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({ 
  // put the rest of config here
}}
```

## Run The Analyze Script

Run the following command from the project's root directory.

```bash
npm run analyze
```

Assuming there are no errors during the process, Next.js will output a production build of the application. A report will be generated in the terminal and two browser windows should open, each containing a colorful visualization.

## Analyze Next Build Logs

Next.js provides useful output to the terminal on every build. The following is this site's build summary prior to any optimization.

<img src="/v1623002557/b19_5_ff77871ec5.png" alt="Pre Optimization Build Output" width="628" height="577" />

This report contains a lot of useful information about the application. Of primary concern is the `First Load JS` column. The value is represented in kilobytes. Next provides a red, yellow, green color code that indicates if the first load JavaScript is in the recommended range. With many pages over 300 kB and all red or yellow values, it is clear that the website is in need of help. 

It is especially important to pay attention to the line labeled `+ First Load JS shared by all`. This code is loaded on every page and generally consists of the components and dependencies from my custom `_app.js` and `Layout` components. This includes the navigation, search, footer, modals, and other code needed on all pages. The main takeaway is that optimizing these global components will have a positive impact across all other pages of the website.

This report is valuable because it gives a developer direction on where they should focus their optimization effort. It can also be used to measure progress, as the optimization process is iterative.

Take a quick screenshot of this report or make sure it can be accessed later.

## Analyze Next Bundle Visualizations

Next Bundle Analyzer will output 2 data visualization into new browser windows during the build process. There is one chart for the client and one chart for the server. The following are this site's prior to optimization. Chunks of JavaScript are color coded and labeled. 

<img src="/v1623002558/b19_3_9939f7be65.png" alt="Server Bundle Visualization" width="1915" height="954" />

On the most basic of levels, the server visualization helps illustrate the relative size difference between the various pages served by the application. The chart is clickable, zoomable and allows filtering. The name, size and path of each individual piece is provided. A drawer on the left side of the visualization provides even more functionality, allowing a developer to view their application on a very granular level.

<img src="/v1623002558/b19_4_d944408334.png" alt="Client Bundle Visualization" width="1915" height="950" />

The client visualization illustrates the various `chunks` of bundled JavaScript that support the different components and pages of the application. The chart provides insight into both the Next.js and third party dependencies. This gives the developer the ability to make informed value judgements about the usefulness of dependency versus its size.

Take a screenshot or save these HTML files for future reference.

## Remove Unneeded Dependencies

Look for large dependency blocks, specifically in the client visualization, and confirm they are necessary for the website to function. If a relatively large block is necessary, do some research to find out if another, smaller package performs has the same or similar functionality.

The first thing I noticed when I analyzed the client visualization for my application was the relative size of `Cloudinary Core`. [Cloudinary](https://cloudinary.com/) is a media management platform I use, and while Cloudinary Core provides useful functionality, my application was only using it to build a URL. In about 5 minutes I had figured out how to accomplish the same thing without the need of the external package. I then removed the import and uninstalled the package.

Another observation I had was the large number and size of dependencies that support parsing [Markdown](https://www.markdownguide.org/), converting it to HTML, and highlighting code. These are critical however, since my blog posts are written in Markdown, I share a fair amount of code, and enjoy a flexible parser configuration.

## Replace Libraries With Your Own Code

 If there is a large dependency performing a simple task, perhaps this can be coded without the external package.

In the past I have found even more egregious examples of bloated libraries. I was using a legacy date/time library that did not work well with modern [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). The functionality of this library was critical to my application. In this case I substituted a newer package, which was so small I had to zoom in just to find it.

## Implement Dynamic Imports 

Perhaps the most effective measure to lower the size of `+ First Load JS shared by all`, as well as individual pages, is to implement [dynamic imports for JavaScript](https://nextjs.org/docs/advanced-features/dynamic-import). This is a new feature introduced in JavaScript [ES2020](https://www.freecodecamp.org/news/javascript-new-features-es2020/) that allows large chunks of code to be loaded when they are needed instead of during the initial page load.

Next.js has a built in support for dynamic imports with `dynamic`. Simply import the module and convert existing components.

```js
import dynamic from 'next/dynamic'

const DynamicFooter = dynamic(() => import('@/components/Layout/Footer'))
```

Use a dynamic component just like any other component and Next.js takes care of the rest. Under the hood, Next.js will adjust the JavaScript chunks and load the dynamic component separately, when it is needed.

Next.js also provides the ability to supply a simpler loading component, as a second argument, to display before the more complex component is imported. Here is an example from the documentation.

```js
const DynamicComponentWithCustomLoading = dynamic(
 () => import('@/components/Layout/Footer'),
  { loading: () => <p>...</p> }
)
```

Start by converting layout components or other components that appear on multiple pages to dynamic imports. After that move on to the individual pages, paying close attention to components that are under the fold or require user interaction to appear. These are prime candidates to be converted.

This is the actual `Layout` component from this blog.

<div class="filename">Layout.js</div>

```jsx
import { Fragment, useEffect, useRef } from 'react'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import throttle from 'lodash.throttle'

import Meta from '@/components/Layout/Meta'
import Navigation from '@/components/Layout/Navigation'
import StickyBar from '@/components/Layout/StickyBar'
import Main from '@/components/Layout/Main'

import { useAppDispatch } from '@/lib/context'
import { initializeUser, setProgress } from '@/lib/context/actions'
import { getPageHeight, gtagPageview } from '@/lib/utils'
import { CLIENT_URL } from '@/lib/constants'

const DynamicProgress = dynamic(() => import('@/components/Layout/Progress')) // highlight-line
const DynamicFooter = dynamic(() => import('@/components/Layout/Footer')) // highlight-line
const DynamicBackToTop = dynamic(() => import('@/components/Layout/BackToTop')) // highlight-line
const DynamicContactModal = dynamic(() => import('@/components/ContactModal')) // highlight-line

function Layout({ children, pageProps }) {
  const dispatch = useAppDispatch()
  const router = useRouter()
  const main = useRef()

  useEffect(() => {
    initializeUser(dispatch)
  }, [])

  useEffect(() => {
    const onScroll = throttle(() => {
      if (
        ['/', '/blog', '/about', '/frequently-asked-questions', '/privacy'].includes(
          router.pathname
        )
      ) {
        setProgress(dispatch, 0)
      } else {
        const { scrollY, innerHeight } = window
        const pageHeight = getPageHeight()
        let progress = !scrollY
          ? 0
          : scrollY + innerHeight >= pageHeight
          ? 100
          : Math.round(((scrollY + innerHeight * (scrollY / pageHeight)) / pageHeight) * 100)

        setProgress(dispatch, progress)
      }
    }, 100)

    window.addEventListener('scroll', onScroll)

    // Google Analytics page view
    gtagPageview(`${CLIENT_URL}${router.pathname}`)

    return () => {
      window.removeEventListener('scroll', onScroll)
    }
  }, [router.pathname])

  return (
    <Fragment>
      <Meta pageProps={pageProps} />
      <Navigation />
      <StickyBar />
      <DynamicProgress /> 
      <Main ref={main}>{children}</Main>
      <DynamicFooter recentPosts={pageProps?.recentPosts} />
      <DynamicBackToTop />
      <DynamicContactModal /> 
    </Fragment>
  )
}

export default Layout
```

In the code above I have converted 4 major layout components to be imported dynamically. These components include the footer, progress bar and modals that aren't needed when the page loads. 

Continue to audit the entire application following the guidelines I have outlined.

## Build The Application Again

After trimming unneeded dependencies and leveraging `dynamic imports` rebuild the Next.js application with the bundle analyzer. Hopefully, there will be a notable difference in the shared first load JavaScript as well as the first load JavaScript for each individual page.

It is okay, and encouraged to iterate several times. That is, to make a handful of changes and rebuild. Check the output metrics and repeat. Be sure to note any changes in website performance.

## Review Next Build Logs

The build report in the terminal should show some level of improvement. The color code is helpful, but saving the initial report allows the developer to calculate exactly how much progress is being made.

<img src="/v1623209384/b19_6_d0977c5dbb.png" alt="Post Optimization Build Output" width="614" height="504" />

A closer look at the build report number before and after optimization.

|            Page             | Before | After | Difference |
| :-------------------------: | :----: | :---: | :--------: |
|        Shared By All        |  162   |  117  |     45     |
|              / (home page)              |  201   |  123  |     78     |
|           /\_app            |  162   |  117  |     45     |
|            /404             |  166   |  118  |     48     |
|           /about            |  320   |  119  |    201     |
|       /api/newsletter       |  162   |  117  |     45     |
|            /blog            |  204   |  117  |     87     |
|        /blog/[slug]         |  361   |  123  |    238     |
|       /connect/google       |  163   |  118  |     45     |
|          /courses           |  198   |  118  |     80     |
| /frequently-asked-questions |  322   |  120  |    202     |
|          /privacy           |  169   |  119  |     50     |

Substantial reductions in first load JavaScript are evident across all pages, with the largest improvements in the individual blog post page template. This is a favorable outcome since blog post pages are the most relevant content and should be the content driving organic traffic to the website.

## Review Next Bundle Analyzer Visualizations

The bundle visualizations should help the developer understand how trimming dependencies and dynamic imports change the JavaScript structure of the Next.js build. There should be many more chunks of code, with a smaller average size.

<img src="/v1623209412/b19_7_6670205a7d.png" alt="Post Optimization Server Visualization" width="1917" height="951" />

The original server build consisted of 14 separate chunks and the optimized version has 41.

<img src="/v1623209390/b19_8_295683e2d6.png" alt="Post Optimization Client Visualization" width="1917" height="948" />

The original client build consisted of 25 separate chunks and the optimized version has 52.

## Final Thoughts

It is easy to overlook analyzing and optimizing a Next.js build. Afterall, time and effort are required and if a website is working the temptation is to move on to whatever is next (no pun intended). As it turns out the optimization process isn't as difficult as it first appears to be and can actually be rewarding. I enjoy transforming the Next.js build logs to green, and manipulating the JavaScript chunks that underpin my website. I think the visualizations are a great tool and are key to the feasibility of this whole thing.

This optimization process only gets more important as a website grows in size and complexity. The libraries we all download and use everyday don't coming with "Nutrition Information" printed on the back. The truth is, many developers (myself included) are not always fully aware of code tucked away in their `node_modules` folders. Ideally, going through the steps outlined in this article will make us all more aware, deepen our understanding of web development, and if nothing else, shrink the size of our first load JavaScript.

Speed up your React website. Learn how to analyze your Next.js application and take the steps to optimize your production build.

How To Optimize A Next.js Production Build

Install Next Bundle Analyzer

Run the following command to add this package. npm install @next/bundle-analyzer cross-env

Configure Next Bundle Analyzer

Next Bundle Analyzer works with the next build command. It is common practice to use the environment variable ANALYZE to enable the analyzer.

Run The Analyze Script

Run the following command from the project's root directory. npm run analyze

Analyze Next Build Logs

It is especially important to pay attention to the line labeled + First Load JS shared by all.

Analyze Next Bundle Visualizations

On the most basic of levels, the server visualization helps illustrate the relative size difference between the various pages served by the application.

Remove Unneeded Dependencies

Look for large dependency blocks, specifically in the client visualization, and confirm they are necessary for the website to function.

Replace Libraries With Your Own Code

If there is a large dependency performing a simple task, perhaps this can be coded without the external package.

Implement Dynamic Imports

Next.js has a built in support for dynamic imports with dynamic. Simply import the module and convert existing components.

Rebuild The Next Application

After trimming unneeded dependencies and leveraging dynamic imports rebuild the Next.js application with the bundle analyzer.

https://www.youtube.com/watch?v=4Ar-wuHCXKQ

Run Analyze Script

Analyze Bundle Visualizations

Find & Replace Bloated Legacy Dependencies

Find Components To Import Dynamically

thumbnail_b19.jpg

b19.jpg

Speed up your React website. Learn how to analyze your Next.js application and take the steps to optimize your production build. 

How To Optimize Your Next.js Production Build

In [Part 1 of this series](https://bvgsoftware.com/blog/build-an-ecommerce-color-search-tool-with-nodejs-react-1/) we created the server side logic for a color search tool using [Node.js](https://nodejs.org/). In Part 2, we will create a user interface, using [React](https://reactjs.org/docs/getting-started.html), that consumes this data and filters the original list of images. A user will be able to select a color from our predetermined palette and the UI will display only the images that contain `x` percent of that color. The value of `x` is a threshold we can adjust, but in this example I choose 25%.

[Check out this project on Code Sandbox](https://codesandbox.io/s/color-search-tool-724vc?file=/src/App.js:1479-1565&resolutionWidth=320&resolutionHeight=675)

## Getting Started

The eventual output of our server side application from Part 1 was a JSON file, containing the image color analysis data, that we will need for this part of the tutorial. The original images are also required. Even if you missed Part 1, you can follow Part 2 by downloading both links below.

[Download Image Analysis JSON File](https://blog-color-tool.s3-us-west-1.amazonaws.com/image-analysis.json)

[Download Images Zip File](https://blog-color-tool.s3-us-west-1.amazonaws.com/example-images.zip)

Head over to [CodeSandbox](https://codesandbox.io/) and create a new project using the React template.

## Preparing The Sandbox

There are a few things we need to do to prepare our new sandbox to run our color search tool code.

- change the `css` file extension to `scss`
- unzip the images and upload them to the `public` folder
- create `data.js` and copy the image analysis into it
- create `palette.js` and copy the color palette into it
- be sure to use `export default` on these two files
- add `bootstrap@5.0.1` as a dependency

<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="align-self-start flex-shrink-0 me-3" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div class="d-flex flex-column">
     <h5 class="fs-4 fw-bold mb-0">Edit</h5>
    <hr class="my-2" />
    <p class="mb-1">I ended up adding an additional four colors to the palette used in Part 1 of this tutorial. I did this because some of the lighter shades were closer to white than their actual color.</p>
  </div>
</div>

<div class="filename">palette.js</div>

```js
export default [
  { name: 'black', color: { R: 0, G: 0, B: 0 } },
  { name: 'gray', color: { R: 128, G: 128, B: 128 } },
  { name: 'silver', color: { R: 192, G: 192, B: 192 } },
  { name: 'white', color: { R: 255, G: 255, B: 255 } },
  { name: 'floral_white', color: { R: 255, G: 250, B: 240 } },
  { name: 'beige', color: { R: 245, G: 245, B: 220 } },
  { name: 'tan', color: { R: 218, G: 200, B: 160 } },
  { name: 'purple', color: { R: 103, G: 53, B: 126 } },
  { name: 'navy', color: { R: 19, G: 43, B: 83 } },
  { name: 'blue', color: { R: 31, G: 94, B: 158 } },
  { name: 'peacock', color: { R: 0, G: 128, B: 128 } },
  { name: 'aqua', color: { R: 85, G: 194, B: 195 } },
  { name: 'light_blue', color: { R: 144, G: 193, B: 228 } },
  { name: 'light_cyan', color: { R: 224, G: 255, B: 255 } },
  { name: 'dark_green', color: { R: 32, G: 75, B: 33 } },
  { name: 'green', color: { R: 36, G: 138, B: 15 } },
  { name: 'olive', color: { R: 128, G: 128, B: 0 } },
  { name: 'pale_green', color: { R: 163, G: 176, B: 133 } },
  { name: 'gold', color: { R: 222, G: 170, B: 13 } },
  { name: 'yellow', color: { R: 255, G: 210, B: 70 } },
  { name: 'lavender', color: { R: 230, G: 230, B: 250 } },
  { name: 'brown', color: { R: 79, G: 41, B: 7 } },
  { name: 'burgundy', color: { R: 117, G: 15, B: 23 } },
  { name: 'terracotta', color: { R: 178, G: 77, B: 56 } },
  { name: 'coral', color: { R: 247, G: 117, B: 100 } },
  { name: 'peach', color: { R: 251, G: 189, B: 147 } },
  { name: 'orange', color: { R: 250, G: 118, B: 10 } },
  { name: 'taupe', color: { R: 176, G: 156, B: 130 } },
  { name: 'red', color: { R: 192, G: 7, B: 24 } },
  { name: 'pink', color: { R: 235, G: 111, B: 164 } },
];
```

## Writing The Code

This simple user interface will consist of two major parts:

1. A grid of small clickable squares that represent our color palette
2. A grid of larger images that represent our products or filterable items

<div class="filename">App.js</div>

```jsx
import { useState } from "react";
import DATA from "./data";
import PALETTE from "./palette";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.scss";

function formatColorName(name) {
  return name
    .replace("_", " ")
    .split(" ")
    .map((el) => el[0].toUpperCase() + el.slice(1))
    .join(" ");
}

export default function App() {
  const [color, setColor] = useState("");

  function colorFilter(x) {
    return color ? x.colorAnalysis[color] > 25 : true;
  }

  function colorSort(a, b) {
    return color ? b.colorAnalysis[color] - a.colorAnalysis[color] : 1;
  }

  return (
    <div className="container my-5">
      <div className="row">
        <div className="col-xl-3">
          <div className="color-tool">
            {PALETTE.map(({ name, color: { R, G, B } }) => (
              <div
                key={formatColorName(name)}
                style={{ backgroundColor: `rgb(${R},${G},${B})` }}
                className="square"
                onClick={() => setColor(name)}
              />
            ))}
            <div className="square" onClick={()=>setColor('')}>X</div>
          </div>
          {color && <div>{formatColorName(color)}</div>}
        </div>
        <div className="col-xl-9">
          <div className="products">
            {DATA.filter(colorFilter)
              .sort(colorSort)
              .map((d) => (
                <div key={d.relativePath} className="product">
                  <img
                    src={d.relativePath}
                    alt={d.relativePath}
                  />
                  {color && <div className='value'>{d.colorAnalysis[color]}</div>}
                </div>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
}
```

<img src="/v1622936909/b18_1_9e8b99246d.png" alt="Color Search Tool" width="1328" height="684" />

### Key Takeaways 

In my original implementation, colors names were formatted using snake case (underscores replace spaces). This worked well with my database model but needs to be converted to standard case to be displayed in a UI. The `formatColorName` function accomplishes this conversion by chaining JavaScript string and array methods. 

The `App` component UI is controlled by once `state` property for `color`, which holds the name of one of the colors from the color palette or an empty string. By mapping the `PALETTE` we are able to pass this color name to the `setColor` function and assign this callback as the `onClick` event handler. Now clicking on a color square will set the name of the color to the state variable `color`. 

Since our React user interface will re-render when the value of `color` changes all we have to do is make the display of images (or imaginary products) depend on this value. In my opinion, this is basic ability is what makes React such a developer friendly tool. In this example we will chain a JavaScript `filter` method that uses `color` in its filtering logic to accomplish this. In a real world application the value of `color` would most likely be used in an API request to fetch the desired data. I chose a reasonable threshold of 25, meaning an image must be composed of at least 25% of the selected color to appear in the filtered results.

I also used a `sort` function to make the images appear in descending order based on the percentage of the selected color. 

### Style

This project is meant to be a simple and minimalistic demonstration of the filtering functionality. However, I included a small `scss` file, primarily to style the grids.

```sass
body {
  overflow-y: scroll;
  font-family: monospace;
}

.color-tool {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;

  .square {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center center;
    border: 1px solid lightgray;
    cursor: pointer;
  }
}

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 50px;

  .product {
    display: grid;
    place-items: center center;

    img {
      width: calc(225px * .75);
      height: auto;
    }

    .value {
      font-size: 18px;
      font-weight: bold;
      margin-top: 5px;
    }
  }
}

@media only screen and (max-width: 576px) {
  .color-tool {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 25px;
  }

  .products {
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;

    .product {
      img {
        width: 40vw;
      }
    }
  }
}
```

## Final Thoughts 

I hope this two part series gives readers a good starting point for implementing a similar feature in one of their projects. I tried to make this example as simple as I could. Sometimes if a tutorial is too specific, it can be hard to see how it might apply to your tech stack of choice. Here are a couple ideas to take this example project to the next level.

- connect the server logic to a database to persist data
- add color level sliders to the React UI
- filter by multiple colors
- add the ability for the user to upload an image for analysis

thumbnail_b16_video.jpg

b16_video.jpg

Build a React color search tool user interface that can filter a list of images based on a selected color. This code can support a complex eCommerce color search tool.

Build An eCommerce Color Search Tool With NodeJS + React | Part 2

Most of us have probably been shopping online and used a color search tool to find a tee-shirt or phone or Tesla. These color search features range in complexity from basic to overkill. I think an example of a basic version could have 4 to 8 basic colors that filter 100 products. In an implementation like this, the color values are most likely a data property assigned just by looking at the product. This is perfectly feasible and useful in many cases.

<img src="/v1622086510/b16_1_410e537401.png" alt="A Standard Color Tool" width="700" height="258" />

## What Is Advanced Color Search

Consider a more advanced use case. A large eCommerce platform that sell fabrics, or used cars, or any scenario with a wide range of product - imagine 100,000 unique SKUs from 25 different suppliers. Customers expect more nuanced color options, and color naming conventions differ from supplier to supplier. All of a sudden we need software that can analyze an image and assign color levels. 

## Project Outline

This project will be broken into two separate posts.

### Post 1 - Server Side Logic

In Post 1 we will use Node to build server side logic that can analyze a set of images and assign each image a score between 0 and 100 for each color in a predetermined palette. I will attempt to keep this implementation as simple as possible, leaving framework and database choices up to each individual developer.

### Post 2 - Client Side Logic

In Post 2 we will use React to build the user interface for a client side color tool. Again, I will attempt to keep things simple, creating an interface of clickable squares for a variety of colors that when clicked filter the original image set.

## Getting Started

You will need to have [NodeJS](https://nodejs.org/en/) installed on your local machine. At the time of publication, I am running version `14.16.1`.

### Dependencies

We will be using the [canvas](https://github.com/Automattic/node-canvas) and [color-diff](https://github.com/markusn/color-diff) libraries.

Create a new directory, initialize the project and install the dependencies using NPM.

```bash
mkdir color-tool
cd color-tool
npm init -y
npm install canvas color-diff
``` 

<div class="filename">package.json</div>

```json
  "dependencies": {
    "canvas": "^2.8.0",
    "color-diff": "^1.2.0"
  }
```

### Example Image Files

For this example application I have curated one hundred textile images that we can use to test our tool. Of course, the tool can be used on any image, including image URLs.

[Download the example images here](https://blog-color-tool.s3-us-west-1.amazonaws.com/example-images.zip)

## Color Tool Code

The beauty of a project like this one is that it leaves almost endless possibilities for a developer to customize. While I will attempt to keep things simple, I encourage you to take this basic idea and make it your own.

###  Choosing A Color Palette

A natural starting point for our code is to choose a color palette. I would hypothesize that the more colors included, the more precise the color tool can become, assuming an even distribution of color. I have selected a palette of 26 colors for this demo. In the wild, there are many examples of color tools using a much larger number of colors.

<img src="/v1622086509/b16_2_0a67a966e8.png" alt="A Secondary Color Palette" width="700" height="403" />

The color palette is represented by a JavaScript array of objects. The `name` key is a human readable string describing the color. The `color` key is a nested object with keys `R`, `G` and `B`, which stand for red, green and blue, each with an integer value between 0 and 255. This formatting allows the palette to be both understandable and to work easily with the color diff library.

```js
const PALETTE = [
  { name: 'black', color: { R: 0, G: 0, B: 0 } },
  { name: 'gray', color: { R: 128, G: 128, B: 128 } },
  { name: 'silver', color: { R: 192, G: 192, B: 192 } },
  { name: 'white', color: { R: 255, G: 255, B: 255 } },
  { name: 'beige', color: { R: 245, G: 245, B: 220 } },
  { name: 'tan', color: { R: 218, G: 200, B: 160 } },
  { name: 'taupe', color: { R: 176, G: 156, B: 130 } },
  { name: 'navy', color: { R: 19, G: 43, B: 83 } },
  { name: 'purple', color: { R: 103, G: 53, B: 126 } },
  { name: 'blue', color: { R: 31, G: 94, B: 158 } },
  { name: 'peacock', color: { R: 0, G: 128, B: 128 } },
  { name: 'aqua', color: { R: 85, G: 194, B: 195 } },
  { name: 'light_blue', color: { R: 144, G: 193, B: 228 } },
  { name: 'pink', color: { R: 235, G: 111, B: 164 } },
  { name: 'brown', color: { R: 79, G: 41, B: 7 } },
  { name: 'burgundy', color: { R: 117, G: 15, B: 23 } },
  { name: 'terracotta', color: { R: 178, G: 77, B: 56 } },
  { name: 'coral', color: { R: 247, G: 117, B: 100 } },
  { name: 'peach', color: { R: 251, G: 189, B: 147 } },
  { name: 'orange', color: { R: 250, G: 118, B: 10 } },
  { name: 'red', color: { R: 192, G: 7, B: 24 } },
  { name: 'dark_green', color: { R: 32, G: 75, B: 33 } },
  { name: 'green', color: { R: 36, G: 138, B: 15 } },
  { name: 'olive', color: { R: 128, G: 128, B: 0 } },
  { name: 'gold', color: { R: 222, G: 170, B: 13 } },
  { name: 'yellow', color: { R: 255, G: 210, B: 70 } },
]
```

### Importing Our Images

Unzip the example images and place them into a directory named `images` with your project directory.

Next, layout the basic code structure and use a couple of Node's built-in modules to read the `images` directory.

```js
const { createCanvas, loadImage } = require('canvas')
const diff = require('color-diff')
const { readdirSync, writeFileSync } = require('fs')
const path = require('path')
const IMAGES_DIR = path.join(__dirname, 'images')

async function main() {
  try {
    const imagePaths = readdirSync(IMAGES_DIR)

    for (let imagePath of imagePaths) {
      console.log(imagePath)
    }
  } catch (error) {
    console.log(error)
  }
}

main()
```

The code above brings in the two libraries, plus Node's `fs` and  `path` modules.

Add a `start` script to `package.json`. 

```json
  "scripts": {
    "start": "node ."
  },
```

Run `npm start` and you should see a long list of relative paths, pointing to your images, printed in the terminal.

<img src="/v1622091567/b16_3_966de4ecdb.png" alt="Image Paths Output In Terminal" width="299" height="1009" />

## Using Node Canvas

The next step in the image analysis is to get the color information from each and every pixel from each image. How else would we be able to measure color levels?

The `canvas` library for Node has everything we need and works very much like the [Canvas Web API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). I have added comments in the code to help outline each step. 

### Why The Try...Catch Blocks

I have added a second [try/catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block inside the `for` loop. This is a pattern I generally follow as it will allow me to log the specific iteration if an error occurs, and catching an error allow the loop to continue, so a small issue won't derail the entire process. 

```js
async function main() {
  try {
    const imagePaths = await readdirSync(IMAGES_DIR)

    for (let imagePath of imagePaths) {
      try {
        // load the current image
        const image = await loadImage(path.join(IMAGES_DIR, imagePath))
        // get image dimensions
        const { width, height } = image
        // create a new canvas using same dimensions
        const canvas = createCanvas(width, height)
        // isolate the context
        const ctx = canvas.getContext('2d')
        // draw image onto canvas starting at coordinate 0,0
        ctx.drawImage(image, 0, 0)
        // grab image data from canvas
        const imageData = ctx.getImageData(0, 0, width, height)
        // isolate pixel by pixel data
        const rgba = imageData.data
        // total number of pixels
        const totalPixels = width * height
        //  total number of values [r,g,b,a,r,g,b,a....]
        const totalValues = totalPixels * 4
        // logs 
        console.log(totalValues)
        console.log(rgba)
      } catch (error) {
        console.log(`Error processing ${imagePath}`)
        console.log(error)
      }
    }
  } catch (error) {
    console.log(`Error reading ${IMAGES_DIR}`)
    console.log(error)
  }
}
```

### Canvas, Context & Image Data

When I first discovered the Canvas API I was blown away by everything that it can do, and to be honest, I have only scratched the surface. In any event, Canvas allows us to draw the image and the [Canvas Rendering Context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) allows us to grab data about every pixel on the Canvas through [getImageData](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData). This method returns a huge chunk of information appropriately called [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data) which has a property `data` where we finally find what we are looking for.

This raw image data is stored in a specific type of array called an [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray). Values in this type of array must be between 0 and 255. Sound familiar?

> 🧠 ➕ 💡  Just like RGB color codes!

Every 4 integers in the image data represent 1 pixel. The first integer of the array is the `R` or `red` value of the first pixel. The second integer is `G` or `green`. The third is `B` or `blue`. The fourth is the  `A` or `alpha` value. The fifth integer is the `R` value of the next pixel, and on and on and on. In the code above you can see that the length of the image data array is the name value as `width * height * 4`. 

The output from the logs above should look something like the following if everything is working.

<img src="/v1622095850/b16_4_d396253b1e.png" alt="Image Data Output In Terminal" width="432" height="606" />

## Using Color Diff

The `color-diff` library is the straw that stirs the drink for this entire project. Under the hood this package implements the [CIEDE2000](https://en.wikipedia.org/wiki/Color_difference#CIEDE2000) color difference algorithm. This gives our program the ability to look at a single pixel from an image and to, in effect, round that value to the closest color value in our predetermined palette.

To manipulate our color values two additional data structures are helpful. These can be defined on the `global` level, or outside our `main` function.

```js
// array of PALETTE color objects
const paletteColors = []
// object with color name keys and 0 value
const allColorsZero = {}
// create both at the same time
for (let colorObject of PALETTE) {
  paletteColors.push(colorObject.color)
  allColorsZero[colorObject.name] = 0
}
```

- `paletteColors` strips the color objects from `PALETTE` to be used as the second argument to the `color-diff`
- `allColorsZero` is used to assign a value of `0` to any color that does not appear in a given image

## The Full Code

Below is the full, working example. Please note that the example merely writes the color analysis data to a [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) file. In most real world eCommerce scenarios, the product data would have to be accessed initially, to fetch the images. Once the analysis is complete the values would have to be saved to a database. These framework and database choices are beyond the scope of the article and are the perogative of each developer. 

This logic could be interfaced with an application in a number of ways.

- As part of the product creation process
- On demand as a service using a REST or GraphQL API to read/write data
- Via a cron job

<div class="filename">index.js</div>

```js
const PALETTE = [
  { name: 'black', color: { R: 0, G: 0, B: 0 } },
  { name: 'gray', color: { R: 128, G: 128, B: 128 } },
  { name: 'silver', color: { R: 192, G: 192, B: 192 } },
  { name: 'white', color: { R: 255, G: 255, B: 255 } },
  { name: 'floral_white', color: { R: 255, G: 250, B: 240 } },
  { name: 'beige', color: { R: 245, G: 245, B: 220 } },
  { name: 'tan', color: { R: 218, G: 200, B: 160 } },
  { name: 'purple', color: { R: 103, G: 53, B: 126 } },
  { name: 'navy', color: { R: 19, G: 43, B: 83 } },
  { name: 'blue', color: { R: 31, G: 94, B: 158 } },
  { name: 'peacock', color: { R: 0, G: 128, B: 128 } },
  { name: 'aqua', color: { R: 85, G: 194, B: 195 } },
  { name: 'light_blue', color: { R: 144, G: 193, B: 228 } },
  { name: 'light_cyan', color: { R: 224, G: 255, B: 255 } },
  { name: 'dark_green', color: { R: 32, G: 75, B: 33 } },
  { name: 'green', color: { R: 36, G: 138, B: 15 } },
  { name: 'olive', color: { R: 128, G: 128, B: 0 } },
  { name: 'pale_green', color: { R: 163, G: 176, B: 133 } },
  { name: 'gold', color: { R: 222, G: 170, B: 13 } },
  { name: 'yellow', color: { R: 255, G: 210, B: 70 } },
  { name: 'lavender', color: { R: 230, G: 230, B: 250 } },
  { name: 'brown', color: { R: 79, G: 41, B: 7 } },
  { name: 'burgundy', color: { R: 117, G: 15, B: 23 } },
  { name: 'terracotta', color: { R: 178, G: 77, B: 56 } },
  { name: 'coral', color: { R: 247, G: 117, B: 100 } },
  { name: 'peach', color: { R: 251, G: 189, B: 147 } },
  { name: 'orange', color: { R: 250, G: 118, B: 10 } },
  { name: 'taupe', color: { R: 176, G: 156, B: 130 } },
  { name: 'red', color: { R: 192, G: 7, B: 24 } },
  { name: 'pink', color: { R: 235, G: 111, B: 164 } },
]

const { createCanvas, loadImage } = require('canvas')
const diff = require('color-diff')
const { readdirSync, writeFileSync } = require('fs')
const path = require('path')
const IMAGES_DIR = path.join(__dirname, 'images')

// array of PALETTE color objects
const paletteColors = []
// object with color name keys and 0 value
const allColorsZero = {}
// create both at the same time
for (let colorObject of PALETTE) {
  paletteColors.push(colorObject.color)
  allColorsZero[colorObject.name] = 0
}

async function main() {
  try {
    const imagePaths = readdirSync(IMAGES_DIR)
    const analyzedImages = []

    for (let imagePath of imagePaths) {
      try {
        // load the current image
        const image = await loadImage(path.join(IMAGES_DIR, imagePath))
        // get image dimensions
        const { width, height } = image
        // create a new canvas using same dimensions
        const canvas = createCanvas(width, height)
        // isolate the context
        const ctx = canvas.getContext('2d')
        // draw image onto canvas starting at coordinate 0,0
        ctx.drawImage(image, 0, 0)
        // grab image data from canvas
        const imageData = ctx.getImageData(0, 0, width, height)
        // isolate pixel by pixel data
        const rgba = imageData.data
        // total number of pixels
        const totalPixels = width * height
        // total number of values [r,g,b,a,r,g,b,a....]
        const totalValues = totalPixels * 4
        // keys for each color in palette present in image
        // value is count of pixels with that color value
        const colorValues = {}

        // loop over RGBA pixel quartets
        for (let i = 0; i < totalValues; i += 4) {
          try {
            // construct rgb color object
            const R = rgba[i]
            const G = rgba[i + 1]
            const B = rgba[i + 2]
            const color = { R, G, B }
            // color diff will round to the closest color in the palette
            const closestPaletteColor = diff.closest(color, paletteColors)
            // get human readable name of closest color
            const colorName = PALETTE.find((el) => el.color === closestPaletteColor)['name']
            // already exists increment by one
            // doesn't exist initalize with value of 1
            if (colorValues[colorName]) {
              colorValues[colorName] += 1
            } else {
              colorValues[colorName] = 1
            }
          } catch (error) {
            console.log(`Error closest color ${imagePath}`)
            console.log(error)
          }
        }

        // percentage values for each existing color
        const colorPercentages = {}

        // for in object loop over keys to convert each into percentage
        for (let colorName in colorValues) {
          colorPercentages[colorName] = Math.round((colorValues[colorName] / totalPixels) * 100)
        }

        // final object contains 0 for colors that do not appear in image
        const allColorPercentages = Object.assign({}, allColorsZero, colorPercentages)

        // associate image with color analysis
        const analyzedImage = {
          relativePath: imagePath,
          colorAnalysis: allColorPercentages,
        }

        // build array of image data
        analyzedImages.push(analyzedImage)
      } catch (error) {
        console.log(`Error processing ${imagePath}`)
        console.log(error)
      }
    }

    // write data to JSON file
    try {
      writeFileSync(path.join(__dirname, 'image-analysis.json'), JSON.stringify(analyzedImages))
    } catch (error) {
      console.log(`Error writing output`)
      console.log(error)
    }
  } catch (error) {
    console.log(`Error reading ${IMAGES_DIR}`)
    console.log(error)
  }
}

main()
```

After running `npm start`, you should see a new file in your root directory named `image-analysis.json`. If everything has worked correctly the output should be an array of objects describing each image file that was input.

The following image registered values for black, gray, silver, white, beige, tan, taupe, navy, purple and blue.

<img src="/v1622173249/kandira_greige_fabric_406fd7c2b0.jpg" alt="Example Image Analysis" width="225" height="190" />

```json
  {
    "relativePath": "kandira-indigo-fabric.jpg",
    "colorAnalysis": {
      "black": 5,
      "gray": 6,
      "silver": 6,
      "white": 30,
      "beige": 2,
      "tan": 8,
      "taupe": 7,
      "navy": 31,
      "purple": 2,
      "blue": 3,
      "peacock": 0,
      "aqua": 0,
      "light_blue": 0,
      "pink": 0,
      "brown": 0,
      "burgundy": 0,
      "terracotta": 0,
      "coral": 0,
      "peach": 0,
      "orange": 0,
      "red": 0,
      "dark_green": 0,
      "green": 0,
      "olive": 0,
      "gold": 0,
      "yellow": 0
    }
  }
```

Another image registered 100% red.

<img src="/v1622173653/lange_claret_fabric_3c550e639a.jpg" alt="Example Image Analysis" width="225" height="190" />

```json
  {
    "relativePath": "lange-claret-fabric.jpg",
    "colorAnalysis": {
      "black": 0,
      "gray": 0,
      "silver": 0,
      "white": 0,
      "beige": 0,
      "tan": 0,
      "taupe": 0,
      "navy": 0,
      "purple": 0,
      "blue": 0,
      "peacock": 0,
      "aqua": 0,
      "light_blue": 0,
      "pink": 0,
      "brown": 0,
      "burgundy": 0,
      "terracotta": 0,
      "coral": 0,
      "peach": 0,
      "orange": 0,
      "red": 100,
      "dark_green": 0,
      "green": 0,
      "olive": 0,
      "gold": 0,
      "yellow": 0
    }
  },
```

## Final Thoughts

While far from perfect, this logic has been a useful arrow in my eCommerce quiver. It is exciting to see what approximately 100 lines of code can do, and I am grateful for open source tools that the NodeJS ecosystem provides. It seems that when I think of something I want to accomplish through code, the building blocks I need are always at my fingertips. In that spirit, I hope that some reader finds this code helpful. 

Be sure to check out [Post 2]() of this series, where we create a client side user interface that leverages the data generated from logic in this post. 

Build a Node application that scans images and scores them based on color level. This code can support a complex eCommerce color search tool.

Build An eCommerce Color Search Tool With NodeJS + React | Part 1

Build a Node and React application that scans images and scores them based on color level. This code can support a complex eCommerce color search tool.

Benjamin Brooke

Newsletter

Contents

Services

Contact Us