DEV Community: jaepass

🛍️ Build a commerce storefront

jaepass — Tue, 20 Oct 2020 02:22:59 +0000

Project Goal: Build an e-commerce web store with a products listing.

What you’ll learn: Setting up your React app, API basics, React components basics, fetch and display products data from an external API.

Tools you’ll need: A modern browser like Chrome to access CodeSandbox - be sure to create an account in CodeSandbox to keep the versions of your work intact.

Time needed to complete: 30 minutes
Just want to try the app?: CodeSandbox link

The main objective here is to learn React fundamentals in conjunction with working with an API to build an e-commerce application! We're going to create a real-world app fetching data from an external API to list products in a product catalogue page! We're really excited so let's get right to it!

Here is a summary of what we will achieve!

Go over React basics
Create components in React
Fetch data from an external API data source called Chec
Use an axios-based library, Commerce.js, to add eCommerce logic
List products on a products catalogue page

Check out this live demo sneakpeek to have a look at what we're building today!

Prerequisites

This project assumes you have some knowledge of the below concepts before starting:

Some basic knowledge of JavaScript fundamentals
Some basic knowledge of JavaScript frameworks
An idea of the JAMstack architecture and how APIs work

Getting Started

We mentioned you needing Code Sandbox above, so what exactly is it? Codesandbox is an online IDE (Integrated Development Environment) playground that allows you to develop your project easily in the browser without having to set up your development environment.

So that's exactly what we're going to do. Head on over to CodeSandbox and create your account if you haven't already. Create a CodeSandbox account and scaffold a starter React template by clicking here. Choosing a React template in codesandbox or downloading it as a dependency is the same idea as installing create-react-app and getting a starting boilerplate of a single page application. You can read more about Create React App here.

Basic React App Structure:

In most cases when you scaffold a React project, a typical project structure would look like this.

my-app/
- README.md
- node_modules/
- package.json
- public/
- index.html
- favicon.ico
- src/
- App.css
- App.js
- App.test.js
- index.css
- index.js
- logo.svg

The public folder contains our assets, html static files and custom client side javascript files. package.json is used by npm (Node package manager) to save all the packages needed to deploy our app, but we don't have to worry about this because CodeSandbox installs and updates this file for us.

In our public, we have a standard html file called index.html. This is our point of entry file where we have our root element, which is named by convention. If you scroll down to line 30 in the body element, you will see <div id="root"></div>. This is the root element where we will be injecting our application.

The src folder contains all our React code and houses our index.js, app.js and later on our components when we start to create them. The fileindex.js is opened by default. You will see something like this:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Here we import the React library and we use the ReactDOM render() method in order to print the contents of our App component into the root div in our index.html that we specified above. Our main app component App.js has to be imported as well to be included in the render. The App.js component is passed in as the first argument in the render function and the rootElement as the second argument. That will tell React to render the app component and transform it into an element using the React.createElement method at build time to the index page. We will be stripping out all the scaffolded code in the component App.js and rebuilding later on.

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

The App function in App.js represents a React component. You can create your components as a individual files (Single File Component - SFC). In React, html-like tags which are what we call JSX can be passed in the render function and be returned. The JSX inside the return function is what the App.js will render out.

💡 Tip

What are Components?

Components sections of your application that you extract out
into separate files so that you can make them reusable. There are two types of components, functional components and class components. We will get into these different components a bit more later in the tutorial.

Now that we've walked through the starting structure in a React application, this is where the real fun begins. As you know we will be building a real-world e-commerce application sourcing data from an API data source. In order to do that, we will need to install a package dependency. So lets get right to it!

Install our commerce API

We will be using a commerce API platform to source our products data. The commerce backend we will be using is called Chec and it comes with the handy Commerce.js SDK packed with helper functions to handle our commerce logic in the frontend seamlessly.

💡 Tip

What are APIs and SDKs?

API stands for Application Programming Interface and acts as a "contract" between client and server. The client which is a browser or any front-facing layer makes a request to a server to receive a response or initiate a defined action. When a platform has an API, it allows a software or front-facing client to interact with its data. SDK stands for Software Development Kit and is a installable package of development tools that typically comes with a library, a debugger, and other common tooling.

In a standard local development environment, the Chec/Commerce.js SDK can be installed in two ways:

Install the package via package manager either with npm npm install @chec/commerce.js or yarn yarn @chec/commerce.js
Install via CDN by included this script <script type="text/javascript" src="https://cdn.chec.io/v2/commerce.js"></script> in the index.html file.

Since we are using Codesandbox, we can conveniently add a dependency on the left sidebar. So let's go ahead and do that! Click on Add dependency and in the search field type in @chec/commerce.js and select the option which is the latest 2.1.1 version.

💡 Tip

The Commerce.js SDK is using the axios library under the hood. Axios is a promise-based HTTP client that works both in the browser and in other node.js environments.

Link up our Commerce instance

The Commerce.js SDK comes packed with all the frontend oriented functionality to get a customer-facing web-store up and running. In order to utilize all the features of this commerce platform's SDK, we are going to import the module into a folder called lib so that we can have access to our Commerce object instance throughout our application.

Let's go ahead and do that right now! In your src directory, we'll create a new folder called lib, create a file commerce.js and copy and paste the below code in it. Typically a lib folder in a project stores files that abstracts functions or some form of data.

// src/lib/Commerce.js
import Commerce from '@chec/commerce.js';
export const commerce = new Commerce('pk_17695092cf047ebda22cd36e60e0acbe5021825e45cb7');

Ok so what have we done here? First we import in the Commerce.js module which we will be using to communicate with the API platform, then we export an instance of Commerce and pass in a public key. The public key is needed to give us access to data in the Chec API.

💡 **Tip

Please note that for the purpose of getting you up and running with an account with products data, a public key is provided from a demo merchant account. A token key acess is what gives the API an authentication scope. A public key will give us access to Chec's core API resources such as your products and cart data.

Now that we've installed our commerce SDK and created our Commerce instance, we now have access to the Commerce object throughout our application!

Make your first request to fetch the products data

Commerce.js was built with all the frontend functionalities you would need to build a complete eCommerce store. All you need to do is make requests to various Chec API endpoints, receive successful responses, then you have your raw data to output beautifully onto your web store.

One of the main resources in Chec is the Products endpoint. Commerce.js
makes it seamless to fetch product data with its promise-based
method commerce.products.list(). This request would make a
call to the GET v1/products API endpoint and return a list of product data. Open up your App.js file and delete the code that came with creating a new React app and we will write this file from scratch.

Import commerce as well as a ProductsList component which you'll create in the next
section. While there, initialize an empty array products state in your constructor.

// src/App.js
import React, { Component } from 'react';
import { commerce } from './lib/commerce';
import ProductsList from './components/ProductsList';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    }
  }
  render() {
    return (
      <div className="app">
      </div>
    );
  }
};
export default App;

In React, when a component is created, the constructor is the first method called. Initializing your state in the constructor will allow you to store data on the component's instance when it's created. We also need to pass props in as a parameter in the the constructor method and call the super() method in order to make the this.props object available. The super() method then calls the constructor of the parent class which is our class component in this case. You'll initialize products
as an empty array in your app to be able to store the product data later on.

💡 Tip

The constructor method in a React class component gets called before the component gets mounted and helps to initialize local states or bind event handlers in the object you're creating. You would only need to define a constructor if you need to maintain some form of state in your React component.

You will be creating the products components as stateful components. This means that the components has the ability to keep track of changing data. You might ask why would be want to keep track of changing data. Any commerce store needs to have the ability to update its products listing in real-time. Be it new products being added, products being sold out, or products being taken off. The API data constantly will get updated, therefore the UI has to be reactive.

You can now make your first Commerce.js request! Create a function called fetchProducts() in the component and make a request to the products endpoint using the Commerce.js method commerce.products.list().

/**
 * Fetch products data from Chec and stores in the products data object.
 * https://commercejs.com/docs/sdk/products
 */
fetchProducts() {
  commerce.products.list().then((products) => {
    this.setState({ products: products.data });
  }).catch((error) => {
    console.log('There was an error fetching the products', error);
  });
}

Inside the function, use the commerce object to access the products.list() method for access to product data. commerce.products.list() is a
promise-based function call that will resolve the request and then() sets the response data with this.setState() into
the products state key created earlier in the component's constructor. The catch() method catches any errors in the
case that the request to the server fails.

Of course simply creating the function does not do anything as you have yet to call this function. When the app
component mounts to the DOM, use the lifecycle hook componentDidMount() to fetch your data. It is a React lifecycle method that helps to call functions when the component first mounts to the DOM. Since we are loading data from a remote endpoint, we want to invoke the fetchProducts() function to update the state with the returned products products so that we can render our updated data.

componentDidMount() {
  this.fetchProducts();
}

Speaking of render, you are going to need one of the core React functions render(). Without render() and a return statement, nothing
would get logged onto your frontend. Below is the expected returned data (abbreviated):

[
  {
    "id": "prod_NqKE50BR4wdgBL",
    "created": 1594075580,
    "last_updated": 1599691862,
    "active": true,
    "permalink": "TSUTww",
    "name": "Kettle",
    "description": "<p>Black stove-top kettle</p>",
    "price": {
      "raw": 45.5,
      "formatted": "45.50",
      "formatted_with_symbol": "$45.50",
      "formatted_with_code": "45.50 USD"
    },
    "quantity": 0,
    "media": {
      "type": "image",
      "source": "https://cdn.chec.io/merchants/18462/images/676785cedc85f69ab27c42c307af5dec30120ab75f03a9889ab29|u9 1.png"
    },
    "sku": null,
    "meta": null,
    "conditionals": {
      "is_active": true,
      "is_free": false,
      "is_tax_exempt": false,
      "is_pay_what_you_want": false,
      "is_quantity_limited": false,
      "is_sold_out": false,
      "has_digital_delivery": false,
      "has_physical_delivery": false,
      "has_images": true,
      "has_video": false,
      "has_rich_embed": false,
      "collects_fullname": false,
      "collects_shipping_address": false,
      "collects_billing_address": false,
      "collects_extrafields": false
    },
    "is": {
      "active": true,
      "free": false,
      "tax_exempt": false,
      "pay_what_you_want": false,
      "quantity_limited": false,
      "sold_out": false
    },
    "has": {
      "digital_delivery": false,
      "physical_delivery": false,
      "images": true,
      "video": false,
      "rich_embed": false
    },
    "collects": {
      "fullname": false,
      "shipping_address": false,
      "billing_address": false,
      "extrafields": false
    },
    "checkout_url": {
      "checkout": "https://checkout.chec.io/TSUTww?checkout=true",
      "display": "https://checkout.chec.io/TSUTww"
    },
    "extrafields": [],
    "variants": [],
    "categories": [
      {
        "id": "cat_3zkK6oLvVlXn0Q",
        "slug": "office",
        "name": "Home office"
      }
    ],
    "assets": [
      {
        "id": "ast_7ZAMo1Mp7oNJ4x",
        "url": "https://cdn.chec.io/merchants/18462/images/676785cedc85f69ab27c42c307af5dec30120ab75f03a9889ab29|u9 1.png",
        "is_image": true,
        "data": [],
        "meta": [],
        "created_at": 1594075541,
        "merchant_id": 18462
      }
    ]
  },
]

The data object contains all the property endpoints such as the product name, the product description, product price or any uploaded variants or assets. This data is exposed when you make a request to the API. As mentioned above, Commerce.js is a Software Development Kit(SDK) that comes with abstracted axios promise-based function calls that will help to fetch data from the endpoints. The public key access that we briefed over above is a public token key from a merchant store. This account already has products and products information uploaded to the Chec dashboard for us to run a demo store with.

Now add the empty <ProductsList /> component to your render function:

render() {
  const { products } = this.state;
  return (
    <div className="app">
      <ProductsList />
    </div>
  );
}

Destructure products from state to make it a little cleaner. You'll need to pass the products property as an argument
to your ProductsList component. This means that the value of the ProductsList component's prop
products will be resolved from the parent (App) component's state, and will update automatically whenever it changes.

Start to style your components

Before we go any further, let's start to port in some styles so we can start to make our UI look slick! We will be using SCSS, a CSS style compiler to style our application. Please note that we will not be going into styling details but will only go over the high-level of porting in the styles. First install node-sass by adding it as a dependency in the left sidebar or alternatively in a local environment by running the command below.

yarn add node-sass
# OR
npm install node-sass

Next, let's go ahead and create a styles folder with a scss folder inside. Inside of the scss folder, create two other folders named components and global. Lastly, still in the scss folder, create a file and name it styles.scss. This file is where we will import in all our components and global styles. Your styles structure should look like the below tree.

src/
- styles/
- components/
- global/
- styles.scss

In the components folder, create a file named _products.scss and copy in the below code.

/* _products.scss */
.products {
    display: block;
    margin: 3rem;
    @include md {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 10rem;
    }
    .product {
        &__card {
            width: 55%;
            margin: auto;
            margin-top: 0;
            margin-bottom: 0;
            padding-bottom: 2rem;
        }
        &__image {
            border: 2px solid $text-primary;
            width: 90%;
        }

        &__name {
            color: $text-primary;
            padding-top: 1rem;
            padding-bottom: 0.25rem;
        }

        &__details {
            display: flex;
            justify-content: space-between;
            margin-top: 0.75rem;
        }

        &__price {
            align-self: center;
            margin: 0;
            color: $text-grey;
        }


        &__details {
            display: flex;
            justify-content: space-between;
        }

        &__btn {
            background: $color-accent;
            color: white;
            font-size: 0.75rem;
            text-transform: uppercase;
            padding: 0.5rem 1rem;
            transition: all 0.3s ease-in-out;
            margin-top: 1rem;
            border: none;

            &:hover {
                background-color: lighten(#EF4E42, 5);
            }
            @include sm {
                margin-top: 0;
            }
        }
    }
}

Now in the global folder, create _base.scss, _body.scss and _mixins.scss and copy in the respective code below.

/* _base.scss */
// Font styles
$font-primary: 'Amiko', sans-serif;
$font-secondary: 'Adamina', serif;
// Colors
$bg-color: #E8E2D7;
$text-primary: #292B83;
$text-grey: rgb(67, 67, 67);
$color-accent: #EF4E42;
// Media query sizes
$sm-width: 576px;
$md-width: 768px;
$lg-width: 992px;
$xl-width: 1200px;

/* _body.scss */
body {
  font-family: $font-primary;
  background-color: $bg-color;
}

/* _mixins.scss */
@mixin small-xs {
  @media (max-width: #{$sm-width}) {
    @content;
  }
}
@mixin sm {
  @media (min-width: #{$sm-width}) {
    @content;
  }
}
@mixin md {
  @media (min-width: #{$md-width}) {
    @content;
  }
}
@mixin lg {
  @media (min-width: #{$lg-width}) {
    @content;
  }
}
@mixin xl {
  @media (min-width: #{$xl-width}) {
    @content;
  }
}
@mixin md-max {
  @media (max-width: #{$lg-width}) {
    @content;
  }
}

Lastly as mentioned, you'll need to now import those created files in the style index styles.scss.

@import "global/base";
@import "global/body";
@import "global/mixins";
@import "components/product";

Now that all the styles are written and imported, you should start to see the styles pull through when you render your components later.

Create our product item component

The nature of React and most modern JavaScript frameworks is to separate your code into components. Components are a way to encapsulate a group of elements for reuse throughout your application. You'll be creating two components for products, one will be for the single product item and another for the list of product items.

Start by creating a class component and name it ProductItem.js in src/components. This component will render the individual product card. In your render function destructure product from your props. You will reference this
property to access each product's image, name, description, and price via .media.source, .name, .description and .price in the return statement.

Product descriptions return HTML. To strip HTML from the product description string, using this string-strip-html handy library will do the trick. Install this library by running yarn add string-strip-html or npm i string-strip-html. After installing, import the module in and pass in the product description to the stripHtml function.

import React, { Component } from "react";
import stripHtml from 'string-strip-html';
class ProductItem extends Component {
  render() {
    const { product } = this.props
    const { result } = stripHtml(product.description);
    return (
      <div className="product__card">
        <img className="product__image" src={product.media.source} alt={product.name} />
        <div className="product__info">
          <h4 className="product__name">{product.name}</h4>
          <p className="product__description">
            {/* product description stripped of html tags */}
            {result}
          </p>
          <div className="product__details">
            <p className="product__price">
            {product.price.formatted_with_symbol}
            </p>
          </div>
        </div>
      </div>
    );
  }
};
export default ProductItem;

As you saw earlier in the abbreviated JSON, the returned product data object comes with all the information that you
need to build a product listing view. In the code snippet above, your product prop is being used to access the various
properties. First, render an image tag with the src value of product.media.source as the values inside the curly
braces dynamically binds to the attributes.

Create our products list component

It's now time to create a ProductsList.js component inside src/components. The ProductsList component will be another
class component which will loop through and render a list of ProductItem components.

First, import in the ProductItem component. Next, define a products prop. This will be provided by the parent component.

In your return statement you need to use the map function
to render a ProductItem component for each product in your products prop. You also need to pass in a unique identifier (product.id) as the key attribute - React will use it to determine which items in a list have changed and which parts of your application need to be re-rendered.

import React, { Component } from 'react';
import ProductItem from './ProductItem';
class ProductsList extends Component {
  render() {
    const { products } = this.props;
    return (
      <div className="products">
        {products.map((product) => (
          <ProductItem
            key={product.id}
            product={product}
          />
        ))}
      </div>
    );
  }
}
export default ProductsList;

This component will be a bit bare-boned for now except for looping through a ProductItem component.

With both your product item and list components created, go back to App.js to render the <ProductsList /> and pass in the products prop with the returned product data as the value.

import React, { Component } from 'react';
import { commerce } from './lib/commerce';
import ProductsList from './components/ProductsList';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    }
  }
  componentDidMount() {
    this.fetchProducts();
  };
  /**
   * Fetch products data from Chec and stores in the products data object.
   * https://commercejs.com/docs/sdk/products
   */
  fetchProducts() {
    commerce.products.list().then((products) => {
      this.setState({ products: products.data });
    }).catch((error) => {
      console.log('There was an error fetching the products', error);
    });
  }
  render() {
    const { products } = this.state;
    return (
      <div className="app">
        <ProductsList
          products={products}
        />
      </div>
    );
  }
};
export default App;

Conclusion

Awesome, there you have it! You have just created an e-commerce React application listing products on from an API backend! The next steps would be to add cart and checkout functionality to your application. Stay tuned for follow up workshops!

Author

Made with ❤️ by Jaeriah Tay

Note-to-self as a Junior Developer

jaepass — Thu, 28 May 2020 05:42:31 +0000

I recently marked my half-year point as a Frontend Developer at Commerce.js. It sure is a strange milestone as it definitely felt like its been longer than the 6-month whirlwind period. It's unquestionable that I have soaked up more new knowledge in the last half a year than I have in my last few professional years. Not only do I get to work on a kickass tool and platform in the thriving eComm space, I get to do that with some of the brightest and most standout people who continually encourage and motivate me to be on my A-game. After all, aren't we all in this industry to be lifelong learners?

While working and learning in the last several months, I have built up a habit of consolidating notes and key reminders to myself working as a junior in the ever-changing tech industry.

Alas, below are some notes I hope to continue to drill in my head and hope that they might help others starting out in the industry as well!

1. Don't be afraid of sounding like a total newb.

We all started somewhere, even those senior 10x engineers who boggle your mind. You might feel like you're lost in the jungle of programming jargons, those technical terms that sound like they come with superpowers, and those metaphors that have become synonymous in all your meetings (I'm looking at you, low-hanging fruit). You'll catch on in time and eventually that language will become second-natured.

2. Ask questions, LOTS OF THEM.

When your colleagues tell you to always reach out when you're blocked or have any questions, THEY MEAN IT! Mind you, one of the most important skills to have as a programmer is problem-solving. Always, always try your very best with your current abilities and knowledge to solve a problem at hand. Break down the issue and try to tackle it in bite sizes, and make sure to note down the methods you've tried. Once you feel like you have exhausted your efforts after getting to page 3 of Google search results, then reach out to your colleagues and be mindful of their time. With clear and concise context, explain your blocker and if possible make sure they can reproduce the issue. The most effective times I've been able to tackle an issue with a teammate was through pair programming.

3. Adding to the above point, note down every issue you come across and store them away as assets of knowledge.

What is the difference between a senior engineer and a junior? The senior engineer has been exposed to and has solved thousands more bugs than a junior has. Bugs are good, bugs are your friends. They allow you to uncover the inner workings of a program. They allow you to do extensive research and try different solutions. They allow you to understand the architecture of your code and project. Note down issues you come across, the solutions you've tried and the solutions that worked. Keep these notes as they eventually develop into a track record of what you have learned.

4. Get close and comfortable with version control.

I really can't stress this enough. You simply just cannot build software with a team of people without a version control system (Git). I have compiled together a list of Git commands cheatsheet that I will put up in another post. A simple search on Google will result in the most commonly used list of Git commands. There are definitely going to be a ton of merge conflicts, rebase nightmares, and getting stuck in the world of VIM, for you to start getting comfortable.

5. Try not to code blindly.

Working in software in an agile team, you may feel as though cycle work moves fast. There's a lot of implementation and a lot of trying to code up and push out a feature. As a junior, you may feel as though you're constantly playing catch up with time. Trying to contribute to cycle work while learning all at the same time. This is where theoretical concepts and applied learning cross over. Code is almost always recycled and refactored. Open-sourced libraries, modules and plugins are largely used in modern day applications. Those are all essentially reusing code. Try to understand, at least at a high-level of all the moving parts. When you're reusing resolved logged issues that have proved to work, be sure to try to dissect and understand the code. Reference documentations of the tools that you're using as much as possible and all the while read up on programming concepts.

6. Feeling like new knowledge is not easily retained.

As with anything new, it takes time before a habit is built, before information becomes knowledge. It may take 10 times for you to get comfortable with a task or it might take 50 times. What seems to come easy to others might not necessarily come easy to you. But try to remember that is not an implication that it won't all eventually click.

7. Your newness is one of the most important values.

Being new is what's driving your curiosity, your willpower, your ambitions, your hunger. So never ever lose those. When you're starting out, you may feel as though it is a huge hurdle to overcome, but you see, it is not something you overcome. It is a long-haul journey where you're constantly in a space where you might not know enough. This is always going to the perfect space to be in because it is the very indication that you're never going to stop learning.

And there you have it, there are definitely more points than the boiled down list above which I will continue to add to! All the points are simply just my 2-cents and what I've learned thus far. Would love to hear how all your experiences have been when you started out, or what advice you would give your junior-self?

A Small COVID-19 Initiative

jaepass — Sun, 12 Apr 2020 21:02:43 +0000

Hi all, hope everyone is holding up fine and staying strong.

I found that it's been a bit challenging in addressing the current climate as we all have been affected to different degrees and facing different challenges during this time.

I have taken a crucial decision to not consume news daily as it was starting to weigh on me. Although, I am staying hopeful as we are seeing collective essential actions from communities to help stop the continued spread of the virus. We all have a huge stake in this and need to show solidarity in working together as one. The societal, economic impacts are starting to take an enormous toll on everyone alike, and that is why we need to all lift each other out of this unprecedented time.

Under the circumstances, I am fortunate in that I am able to continue working but have been welling over how I can do my small part in contributing aside from WFH and social distancing. After seeing forum discussions and social media threads of people asking where to find a list of local businesses, merchants, artisans who have been affected by the current climate to support, I wanted to bootstrap together a simple but hopefully impactful listing directory. It is still a work-in-progress. I have a backlog of businesses from docs and spreadsheets that I will continue to add. Please share if you know anyone who might be in need of this listing, want to contribute a business, or perhaps may need some help with eComm efforts.

Please get in touch!

https://support-vancouver.netlify.com/

Learning Redux

jaepass — Sun, 12 Apr 2020 20:37:38 +0000

Any fully functioning modern application will deal with relatively sizeable data these days. Whether it's a blog, an eCommerce store, or perhaps your own portfolio with a CMS, all of which would need to output some form of data. One of the main challenges of building a modern application is having to make sure all parts of your UI are synchronizing. Without a tool to abstract your data layer away, it can only become more cumbersome as your application scales. Data and state management in itself is a sizeable topic to cover. For the purpose of this article, I'll stick with high level concepts from what I've learned and put these concepts to practice by building a simple application.

What is Redux?

Redux in isolation is a library with neatly packaged helper functions for you to pull into your application to manage your application's state. Effectively, it is a state management tool that makes it easy to manage state across shared components. Redux provides a way to centralize all your data in one place called the store, and each component can have access to this store's data without having to send down props from one component to another. Some of the main functions in Redux that are commonly used are createStore, dispatch, bindActionCreators, which we will be using later to build our application.

Building block of Redux: Store, Actions, Reducers

The store is the state container where your data will live. Actions are event emitters to get the data out from our application to our Redux store. User inputs and API calls are examples of actions. Actions are then sent by using the store.dispatch(). Again, you will see this touched on later in the tutorial. Lastly, think of reducers like a funnel that takes in the initial state of your application, run some actions on it, and return out an updated state.

Now lets put Redux to work!

Redux is a fully agnostic library so for the purpose of seeing it in action, we are going build a basic Counter application with React. Theoretically, we could pull in all the functions provided by redux that we need and wire them up in our application, but a react-redux library already exists for this purpose.

Please note that this app and its file structure should not necessarily be implemented this way in practice. This guide is purely to walk through the high-level building blocks of Redux and how it works in a React application.

First, lets run up a React application by copying the below commands to your terminal.

npx create-react-app redux-counter
npm i react-redux redux
cd redux-counter
npm start

Open up your directory in your code editor and copy the below code into an index.js

// index.js

import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect, Provider } from 'react-redux'

class Counter extends Component {
  render() {
    return (
      <main className="Counter">
    <p className="count">0</p>
    <section className="controls">
      <button>Increment</button>
      <button>Decrement</button>
      <button>Reset</button>
    </section>
      </main>
    );
  }
}

Currently, this component is fully static and doesn't do anything quite yet but we will get into making it functional. Let's start with explaining the imports at the top. We are of course importing React as we will be using the framework to build our application. Next, we are importing Redux and will be extracting the method createStore from it. Lastly, the methods connect and Provider are what we will be using to essentially "connect" our store and data with the the rest of our application.

Normally, for a decent-sized application, initial Redux setup has a boilerplate. Meaning, there is some structure to setting up your file system with functions and logic abstracted into separate files and wired up altogether. To comb through the concepts of redux in an application, we are going to be building it using only one file for clarity.

Now let's inject some Redux functions (place the code block after your imports):

// Our default initial state
const initialState = {
    count: 0,
}

// Our action types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// These are action creators
const incrementValue = () => ({
    type: INCREMENT,
});

const decrementValue = () => ({
    type: DECREMENT,
});

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

const store = createStore(reducer);

Let's first have a look at our initialState variable and our reducer function. The initialState is the current snapshot of what the state looks like. We store the initial state of our application in a variable so that we can cleanly pull it in to the reducer function. With our reducer function, we start by passing in the state and the action. The application's state will default to initialState before any action is passed. We are always returning our state because every action will go through the reducer regardless of whether the reducer is affected by an action. We store our actions INCREMENT and DECREMENT into variables to prevent any future typos. We can also store the logic of our actions into functions which are called action creators in Redux. The type properties in our actions describes exactly what actions are being carried out. type needs to have string values, in this case, we've stored our values as variables for better error handling.

The reducer function takes in two arguments, the current state and the action. Think of the reducer as the pure JavaScript reduce method that takes in one value with a callback and returns a brand new object. We then use the switch statement with cases INCREMENT and DECREMENT and eventually return a new state. Lastly, we need to create our store with createStore() and pass in our reducer

Now that we have our store, we will need to hook it up to our application. This is where the react-redux library along with its connect and Provider methods come in handy.

render(
    <Provider store={store}>
        <Counter />
    </Provider>,
    document.getElementById('root')
)

The above code block will render out our app. First let's look at the Provider wrapper. Provider takes in a prop and that prop is our store that we've created. Without the prop, we would be not be able to access the store's state in our component. Remember that we are using redux strictly for handling our application state, we are not using React's built-in state management. So our store's data is being passed in as props in our components.

Now, how exactly do we connect the Redux store with our React application? We will use the connect method. Connect returns a function waiting for a React component. To break it down, it takes arguments of a function that maps the state to the component and a function that maps the action in.

const mapStateToProps = (state) => {
  return state;
}

const mapDispatchToProps = (dispatch) => {
  return {
    increment() { 
      dispatch(incrementValue()) 
    },
    decrement() { 
      dispatch(decrementValue()) 
    }
  }
}

const CounterWrapper = connect(mapStateToProps, mapDispatchToProps)(Counter)

render(
    <Provider store={store}>
        <CounterWrapper />
    </Provider>,
    document.getElementById('root')
)

Let's first look at mapStateToProps() and mapDispatchToProps() which are the two arguments we will use to pass in to our connect function. What's great about redux is that this method allows you to abstract out this logic to apply to individual components on a per need basis. For instance, a static page component like your home page or an about page might not necessarily care about having access to states or actions. Imagine on a large scale application with a huge data object tree, you'd only want components that need this data to have access to it. You'd want to avoid triggering re-renders of your components that do not need the state or actions to be passed in.

The mapStateToProps() is essentially passing the entire state tree down to the application as props. The dispatch argument being passed in to mapDispatchToProps is allowing the store to dispatch the actions thats being passed to state which will then later be passed in as props.

We then store our connect function with our new arguments in CounterWrapper. CounterWrapper in this case is a Higher-Order Component, you can read more about it here.

Let's now go back to our template and add in our count value and actions to it's appropriate elements.

class Counter extends Component {
  render() {
  const { increment, decrement, count } = this.props
    return (
      <main className="Counter">
    <p className="count">{count}</p>
    <section className="controls">
      <button onClick={increment}>Increment</button>
      <button onClick={increment}>Decrement</button>
      <button>Reset</button>
    </section>
      </main>
    );
  }
}

You might have remembered that another redux method bindActionCreators is a commonly used one. It does exactly what the name describes, and that is it simply binds action creators together for modularity. We can simply refactor our component by doing this:

const mapDispatchToProps = (dispatch) => {
  return {
    bindActionCreators({ incrementValue, decrementValue }, dispatch)
  }
}

What we're doing here is we're binding both actions that we created, incrementValue and decrementValue and binding them to the dispatch. This is exactly why Redux is so handy as there is the flexibility to create functions and customize which data you want to be passed in to which component.

Below is the complete file with all the moving parts. And again please note that in a real-world application, it's best to apply Redux's rules and structure in your file system.

import React, { Component } from 'react';
import { createStore, bindActionCreators } from 'redux';
import { connect, Provider } from 'react-redux'

const initialState = {
    count: 0,
}

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// These are action creators
const increment = () => ({
    type: INCREMENT,
});

const decrement = () => ({
    type: DECREMENT,
});

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

const store = createStore(reducer);

class Counter extends Component {
  render() {
  const { increment, decrement, count } = this.props
    return (
      <main className="Counter">
    <p className="count">{count}</p>
    <section className="controls">
      <button onClick={increment}>Increment</button>
      <button onClick={increment}>Decrement</button>
      <button>Reset</button>
    </section>
      </main>
    );
  }
}

const mapStateToProps = (state) => {
  return state;
}

const mapDispatchToProps = (dispatch) => {
  return {
    bindActionCreators({ increment, decrement }, dispatch)
  }
}

const CounterWrapper = connect(mapStateToProps, mapDispatchToProps)(Counter)

render(
    <Provider store={store}>
        <CounterWrapper />
    </Provider>,
    document.getElementById('root')
)

Please feel free to comment below with feedback if you think this tutorial could be improved!

Credits to Steve Kinney in FEM

Learning Destructuring

jaepass — Mon, 23 Mar 2020 23:34:39 +0000

What exactly is the new feature destructuring in ES6?

Destructuring helps to break up your code by giving it the pattern you are expecting to get back. It aims to make your code more readable. Destructuring is an assignment task, not a declarative task.

Lets look at the different between the regular imperative way and with ES6 destructuring technique:

function someData() {
  return [dog, cat, fish];
}

var tmp = someData();
var first = returnedData[0];
var second = returnedData[1];
var third = returnedData[2];

We now take the same logic and implement with ES6 destructuring:

function someData() {
  return [dog, cat, fish];
}

var [
  first,
  second,
  third] 
= someData();

If you want to define a default value, you can use a default value expression for the destructured method:

var [
  first,
  second = 10,
  third
] 
= someData();

Whereas, prior to ES6, you would implement your default value as such:

var second = returnedData[1] !== undefined ? returnedData[1] : 10;

Chec Dashboard Redesign

jaepass — Sun, 16 Feb 2020 10:32:15 +0000

Design Brief

Chec Dashboard is a headless eCommerce platform and hosted dashboard that merchants and businesses use to manage their products, orders and customers. The task is to redesign the Products view of the Chec Dashboard.

My Goals

Redesign UI
Improve Accessibility
Add New Features

Design Stack

Pen on paper
InVision Free Hand
Overflow
Adobe XD

Introduction

I was given the opportunity to redesign Chec's eCommerce dashboard's product view. When I had first come across Chec and Commerce.js, I was thrilled to see a platform championing for the next-generation headless CMS and eCommerce. The decoupling of both the front-end presentation layer and back-end data of building an eCommerce website is intuitive, flexible, and robust. As a developer and designer, building an eCommerce platform is a normally a big project undertaking and a two-fold: building the back-end where data is stored and retrieved (products, content, customer reviews, etc.), and the front-facing presentation of both the merchant's dashboard and the actual store-front.

The redesign in this particular task is aimed at the products list view in the merchant dashboard.

Research

Because this was a project that was under some time constraints, I was able to be creative in gathering reliable external usability information. The first place I thought about was Commerce.js's Slack channels. Having access to current users gives an insight to how they are using the platform and their feedback on the product. Additionally, having had a bit of prior experience on other traditional e-commerce CMS myself and asking a few people on theirs, I have an idea of the conventional user flow and the main functionalities.

In most other cases, extensive research is needed for a product design or redesign to be effective. Being able to calculate current users' pain points, needs, and goals can help to nail down the aspects of the redesign to hone my focus in on.

Analysis

Strengths of current product's view dashboard:

Clean aesthetic without a cluttered navigation
The top panel for displaying notices for administrators and users catches the eye
Products list is front and centre in a visible container

Room for Improvements:

Low contrast colours translate to low accessibility
'Add Product' button is not highly visible at first glance
Side dashboard navigation hierarchy is unclear due to grey background on active menu items

Competitive Analysis

I ran a quick competitive analysis on other e-commerce CMS platforms and found some patterns:

White background with high contrast colours translates to higher accessibility
Filtering feature of products are efficient for larger businesses with a high number of products

User Tasks

With a defined user in mind using the products view page, I could identify the key user journeys:

Adding new products to inventory
Adding products in bulk by importing with CSV file
Add categories and tagging products with the categories

Proposed Solutions

Overall visual design update porting over main features and adding additional functionalities.
As it was requested to use original colour palette as a foundation, I turned the contrast of three main colours higher. I used a light grey backsplash for the main modal and white for the vertical menu and top navigation bar. This is to aim to correct a higher colour contrast ratio.
For fluid user flow, I added top-level main navigation items such as Products, Categories, Options on the top left where it is more visible and accessible.
For scalability of platform to target larger businesses, I placed 'Import' and 'Export' feature for adding products in bulk.
'Add Products' button to remain at the top right with higher contrast colour.
'Select All' checkbox and single checkboxes to put bulk action on items.

Wireframing

While this is a redesign, most of main features are being ported over such as the products tab and the editing capabilities of each product. I wanted to keep the lo-fi wireframing step at a minimum and just lay out the main dashboard components of the products view. Once I have the general layout of the dashboard, it was easy enough to shuffle around components in my mock-ups.

DASBOARD PRODUCTS VIEW AND MODAL POP UP WIREFRAMES

Visual Interface

The current interface is cleanly laid out enough to acommodate most of the main features but what it lacked was the white space and light background to make the elements pop out. To begin resolving this, I optimized white space through subtle spacing and adjustments in margins and paddings.

Being able to play with the current colour palette as a foundation was helpful as I quite like the color combinations. The one edit I made was turning the vibrance up on a select few of the main colours.

Prototyping

I was excited to pull the new interface together as a prototype as I would be able to see the fluidity with the common user journey. One of the main features of a merchant dashboard is the handling of products, and to be able to go between the main components without much thought is a success in usability.

Top-level navigation items are placed in both the side navigation and top tab menu for accessibility.

Takeaways

Building this case for a redesign of Chec's merchant dashboard was an insightful challenge and a lot of fun. To redesign a product's platform involves some context setting. Given a clear design brief and a bit of research into some user feedback,I was more equipped to focus on the main goals on the Products view page.

Customizing your Git Prompt

jaepass — Sun, 16 Feb 2020 06:58:41 +0000

https://github.com/ohmyzsh/ohmyzsh/wiki/Themes

Cart Modal Demo

jaepass — Thu, 13 Feb 2020 09:26:18 +0000

Playing with CodeSandbox Online IDE

jaepass — Sat, 25 Jan 2020 00:16:40 +0000

Live Site

eCommerce 101 - a Junior's Developers Guide to Integrating Commerce.js

jaepass — Fri, 17 Jan 2020 06:35:06 +0000

Introduction

In 2019, global retail eCommerce sales shot to a staggering 3.5 trillion USD and are projected to almost double by 2022. At this rate, innovation and the need for progressive software for developers to leverage will continue to grow. There is certainly no slowing down the global eCommerce industry, and as a Junior Developer entering the space, it is an exciting avenue to jump into and learn.

I have recently started my journey as a Junior Frontend Developer and Designer at Chec/Commerce.js. Chec/Commerce.js is an API-first eCommerce platform geared towards developers, designers, and businesses to create custom eCommerce experiences on, web, mobile, and beyond.

Being in a startup with a small core team, I have the privilege of being able to jump in on various aspects of design and development and learn from all the team members. Because building an incredible developer experience is always at the forefront of Commerce.js, I build integrations with Commerce.js and contribute with continuous improvement on the documentation, guides, and resources. Other days, I’ll design marketing assets or help to engage and define our developer community.

There is certainly no better time to enter the eCommerce industry as there is continuous innovation in the space with endless learning and growth opportunities.

In this article I’ll be introducing some basic eCommerce concepts and guiding fellow junior developers through a basic integration with Commerce.js.

To skip straight to the integration guide, go here Getting Started

What is headless eCommerce?

The industry has shifted from a traditional eCommerce concept and unanimously opted for a better and more efficient method to building web stores. You may have heard the fairly new coined term “headless” eCommerce. What exactly does it mean to take a “headless” approach to building eCommerce solutions?

Headless eCommerce is anything but the traditional way of building a web store. Traditional platforms come packaged as robust, monolithic solutions that bind you to its ecosystem. Within this walled-environment, you are strapped to use a specific tool, platform, and technology stack.

On the other hand, “headless” figuratively means cutting off the frontend presentation layer so that you can take an autonomous approach to fetch your backend data separately and display it with the frontend language or framework of your choice. With a headless / serverless approach, the API is treated as a “first-class citizen” in this ecosystem, where the first point-of-contact your users will encounter is the API.

This is truly exciting, as for the first time, this approach takes away the abstraction and complexity of having to roll your own solution. A junior developer is able to come into a headless eCommerce project with the know-how to simply start making requests to the API backend to fetch data, and output the data with their language or framework of choice. Ultimately, developers with no eCommerce experience can learn to create custom purchasing flows, unique brand experiences, and complete eCommerce businesses.

As a junior developer, why should you tackle a headless eCommerce project?

Being a newcomer in today’s industry can sure be overwhelming with the endless influx of information, technologies, and “best practices” to implement your projects.

When I was going through my Web Development program in a technical institute, my first foray into eCommerce was injecting WooCommerce as a plugin onto a WordPress website. I remember thinking there must be an easier and more intuitive way of handling eCommerce functionalities. The first I had heard of a headless eCommerce platform is through Chec/Commerce.js.

Within the first week, I was able to try my hand at building a basic single page eCommerce app with Commerce.js . This project was built with a product catalogue, a cart and checkout feature, all without writing any backend code. I was able to strictly stay in the frontend space by designing a simple storefront UI and develop it.

From this project alone, I learned about the concepts of API, how to use an SDK to fetch your data, JAMstack project architecture, asynchronous programming, and application state management.

With a headless approach, building an eCommerce project can truly and feasibly be a one-man’s job, whereas a whole backend and frontend team would be needed for a monolithic or roll-your-own solution.

The points below are why I believe any Junior Developer should learn modern frontend development by building a headless eCommerce project:

1. Understanding of JAMstack

Learn how to build a JAMstack project, a modern project architecture to progressively handle data.

2. Ability to build on various touchpoints

Ever wanted to learn how to build a Progressive Web App (PWA)? A PWA is a browser-based app mimicking a native app. Learn by integrating Commerce.js easily with a PWA tool!

3. Learn a new framework while you're at it

Learn today’s most popular frameworks, Reactjs or Vuejs by integrating it with Commerce.js

4. Building a real-world project

With the eCommerce industry’s continuous growth, you learn to build a real-world project. Globally, there are currently 12-24 million eCommerce stores online, be a part of this growth!

5. Take ownership of the project at hand

Headless eCommerce project can be a one man’s job. Are you a student? A freelance designer or developer? Seize the opportunity to take full ownership of a web project by building it with a headless eCommerce tool.

What is Chec and Commerce.js?

Commerce.js was created to communicate with Chec, a lightweight API where your data is being stored on the backend. The Chec platform comes with a prebuilt merchant dashboard for managing your products and inventory. Both Chec and Commerce.js are aimed at developers and designers to create custom seamless eCommerce solutions that can easily integrate with any modern tool.

Being an API-first eCommerce tool, Commerce.js enables companies to divide capabilities into separate, autonomous services such as microservices. Building applications based on microservices helps in ensuring good UX with different devices and platforms.

I’ve always thought the best way to learn anything new is to learn through building a real-world project. Joining Chec/Commerce.js as a Junior Developer gave me the opportunity to build integrations with an API-first platform and using the Commerce.js SDK to easily communicate with the backend data. The Commerce.js documentation is continuously refined to improve developer experience of all levels. Throughout the docs are high-level ideas, tool tips and glossary terms, so that you’re learning fundamentals and concepts as you go along with your integration project.

What exactly makes Commerce.js different?

1. Developers and designers building tools for developers and designers

Satisfies and targets pain points we have all faced as developers and designers ourselves.

2. Empathetic product built from the ground up

As developers and businesses owners ourselves, we’ve been there. We’re creating the best merchant and developer experience to suit a broad spectrum of skill levels and business types, because one size, doesn’t fit all when it comes to eCommerce.

3. Well-documented API

For an API to be consumed by developers, it needs to be well-documented. The Commerce.js documentation is written with this in mind, structured out with a set of patterns that we, as developers, would naturally ask for such as URLs, request methods, headers, and request parameters.

4. Time to live

With Commerce.js, developers and designers can take a concept and go live in a matter of days. The Chec platform even has hosted checkouts and storefronts (that require no coding) that you can use to validate ideas before diving into an integration.

5. Well-designed API

Commerce.s is the only eCommerce API that provides logic and helper functions for you to handle the functionalities of the complete eCommerce lifecycle: Before the checkout (pre-capture), during the checkout, after the checkout (post-capture).

6. Integrate anywhere

Commerce.js can be integrated into any front end framework, platform or device, making it an incredibly extendable eCommerce tool. As Commerce.js is pre-integrated with modern payment gateways, you can just focus on the eCommerce functionality and making it work with other microservices.

7. Developer experience

Commerce.js comes with built-in helper functions to help with common checks and functionalities such as “Is this variant available for this order?” These helper functions are built in anticipating common questions and eliminating having to build them manually.

Let’s start building our first eCommerce project with Commerce.js!

All it takes to build your first Commerce.js integration are a few key steps.

Prerequisites

This project assumes you have some knowledge of the below concepts before starting:

Some basic knowledge of JavaScript
Some knowledge of JavaScript frameworks
An idea of the JAMstack architecture and how APIs work

What you will need to start this project

An IDE or code editor
NodeJS, at least v8/10
npm or yarn

Frontend and Backend tools

Because the frontend presentation layer is completely decoupled from the backend logic, you are free to choose your modern frontend tool or other backend systems to integrate with:

Modern frontend frameworks: VueJS, ReactJS, or Angular
Static site generators like GatsbyJS or Gridsome
CMS: Contentful or Cosmic.js for CMS’s
PIM — Product Information Management for product marketing data

Getting started

Sign up for your Chec account

To start building your eCommerce storefront, we first need to get you up and running with a Chec account.

Upload your products

In order to build an eCommerce website, you'd need some data to work with like products and product details. So once you've set up your account, let's log in and start uploading our products!

Set up your project on the command line

If you prefer to use a command line interface for your Chec project, manage your backend, or scaffold an example demo store, we have a Chec CLI to rapidly help with the setup. The Chec CLI can be globally installed via npm, can provides the chec command in your terminal.

To install the Chec CLI, run the below commands:

    $ npm install -g @chec/cli
    $ chec COMMAND
    running command...
    $ chec (-v|--version|version)
    @chec/cli/1.0.0 darwin-x64 node-v10.16.3
    $ chec --help [COMMAND]
    USAGE
      $ chec COMMAND
    ...

After installation, you now have all these commands at your disposal for swift development and management of your Chec project:

chec demo-store [STORE] [TARGETDIRECTORY]
chec help [COMMAND]
chec log LOGID
chec login
chec logout
chec logs
chec register
chec request METHOD RESOURCE [PAYLOAD]
chec whoami

To read up more on the usage of these commands, go here.

Project setup

After you have chosen your frontend application language or framework and have it set up in your local environment, we will now go ahead and install Commerce.js.

Inject the Commerce.js logic layer

After setting up your project environment, lets inject the Commerce.js logic. We need to install the Commerce.js SDK to communicate with the Chec API and fetch data from the backend.

npm install @chec/commerce.js

Now we need to link up our Chec store to our project. To do so, we need to create a new Commerce instance and pass in our public API key (grab your public key from your Chec dashboard).

// Import Commerce.js as a dependency
import Commerce from '@chec/commerce.js';

// Initialize store with public key and store key in variable
// Commerce also accepts a second argument 'true', enabling the Commerce.js console debugger

const commerce = new Commerce('ENTER YOUR PUBLIC KEY HERE', true);

Make requests to fetch data from Chec

For instance, you may want to retrieve and list all your products in your product catalogue page. From your commerce object, you can access your products like so:

commerce.products.list().then((result) => {
   console.log(result.data.map(product => product.name));
});

The response you get from the request above will console log your product data.

These are what we have accomplished here so far:

Chec store set up
Installed Commerce.js SDK to communicate with the Chec API
Created a new Commerce instance and passed in your public API key to connect to your Chec store
Made a request to commerce product object property to list out your product data.

The whole idea of an API-first eCommerce platform is to make asynchronous calls to data when needed. Through your whole application, you will be making requests to endpoints to handle the full eCommerce logical flow.

Next steps would be to:

Parse out your data and populate your product catalogue view with the product media, metadata, variants, options, conditionals, and prices.
Fetch your cart by using the retrieve method on your cart object commerce.cart.retrieve()
Add products to your cart with the commerce.cart.add method.
Create a checkout token with commerce.cart.generateToken and capture your checkout with commerce.checkout.capture.

For the full guide on building an eCommerce product catalogue, check out this guide. If you would like a more comprehensive tutorial on building the full checkout process, have a go at this tutorial!

As a Junior Developer who came from primarily a design background, I’ve been delighted with how simple using Commerce.js is. Entering frontend development in today’s industry can seem mind-boggling with endless tools and not enough guidance on how best to use them. Commerce.js is truly a developer tool that is working hard on the ground to eliminate pain points and is aimed at letting you get your hands dirty on learning and growing your skillset.

We encourage you to check out our documentation, resources, and blogs below.

commercejs.com/docs/getting-started
commercejs.com/resources
blog.commercejs.com

We’re excited to be on this journey with you to build your first Commerce.js integration! Please join our community on slack, share your projects with us, or ask us any questions you have!

Join our community here!

SeasonEats: Eating seasonal local foods UX case study

jaepass — Thu, 09 Jan 2020 00:13:10 +0000

Will be importing from my Medium post here soon. Read the full case study below!

SeasonEats: Eating seasonal local foods UX case study | by Jae Tay | Medium

Jae Tay ・ Mar 2, 2019 ・ 5 min read
Medium

Create a SPA product catalogue with Commerce.js and Vue.js

jaepass — Wed, 08 Jan 2020 23:37:51 +0000

Introduction

As of late, I have been in the deep-end learning everything "Headless eCommerce," a concept that would have otherwise been a rather technical topic just two months back.

I am a newly minted Junior Developer/Designer at Chec Platform/Commerce.js, a Headless eCommerce solutions startup based out of Vancouver, BC. Joining a progressive and growing startup is exciting in so many ways. I was able to come in, jump right on board, and start building and testing out the tools.

For my first Commerce.js integration, I chose to use Vue.js simply because it truly is a kickass framework!

Create a single page product catalogue with Commerce.js and Vue.js

Visit Live Site

https://jaepass.github.io/example-cjs-vue/

For this guide, we will be creating a single page product display of a Chec storefront using Commerce.js SDK and Vue.js as a framework.

What is Commerce.js you might ask? If this is your first foray into a headless eCommerce project, please continue to read on! Another question might then be "What is headless eCommerce?" There are definitely a lot of sources out there explaining what exactly this "headless" concept means. A headless platform has its frontend decoupled so that the data orchestration or inventory management is handled in the backend and fetched using an API. This concept completely eliminates the complexity and gives frontend developers the power to easily create an eCommerce web store, an otherwise daunting task if you are a newcomer. When I first started my dev career at Commerce.js, I did my fair share of digging and wrote up a TL;DR.

Commerce.js is an API-first eCommerce solution platform aimed at creating seamless eCommerce solutions that easily integrate with any modern tool. As this was my first foray into creating a headless eCommerce solution, being able to jump right in and spit out a SPA (Single Page App) web store really establishes Commerce.js as a powerful developer tool with a low barrier to entry. But I would say the one best selling point about using a headless eCommerce tool like Commerce.js is the complete control you have over your frontend. Think of designing a unique digital experience with customized content consumption all the way through to your purchase flow. No out-of-the-box design here. If you can dream it, you can build it with Commerce.js! Please read more into Chec Platform (our API platform) and our Commerce.js SDK here.

Prerequisites

This project assumes you have some knowledge of the below concepts before starting:

Some basic knowledge of JavaScript
Some knowledge of a JS framework like Vue.js
An idea of the JAMstack architecture and how APIs work

What you will need to start this project

An IDE or code editor
NodeJS, at least v8/10
npm or yarn

Some things note

The goal of this tutorial is to walk you through creating a simple storefront displaying your product catalogue with Commerce.js and Vue.js. This particular project on the repository contains the full checkout process but for the sake of simplicity and easing into using Commerce.js, we will only be focusing our efforts in creating the product display.
The styling of this project is done mainly using CSS and a bit of Bootstrap for basic layout. We will not be going into styling details and instead hone our focus in on the logic of Commerce.js.
If you would like to jump right into forking this repo and customize the storefront as you please, then disregard the rest of this tutorial! Otherwise, let's get right into it!

Getting started

1. Sign up for your Chec account

To start building your eCommerce storefront, we first need to get you up and running with a Chec account.
Did you know you can get started with Chec for free? As long as you're in test mode, your account will remain at no cost to you. Let's head over to Chec to create your account and get rockin' with building your eCommerce website.

2. Upload your products

In order to build an eCommerce website, you'd need some data to work with like products and product details. So once you've set up your account, let's log in and start uploading our products!
To keep a visually modular product display, we will be uploading 9 products in total, each with the below details at the bare minimum:
- Product Image
- Product Name
- Price
- Product Description

Project setup

For this particular demo storefront integration, we are using Vue.js framework. We're big fans of Vue.js here at Chec Platform/Commerce.js. There are several reasons why: If you love frameworks that are modular, lightweight, performant, and comes packed with the coolest cats like directives, you'll love Vue.js.

1. Install Vuejs

Open your Terminal window and install Vue globally:

  npm install -g @vue/cli

2. Set up your Vue project:

#### a) To create a new project, run:

  vue create your-project-name

Follow the next steps to add the following to your project (feel free to opt out for now as you can always install these dependencies separately later on):

Babel
CSS Pre-processors: SASS/SCSS (if you plan to use SASS)
Linter

b) Change directory into your project folder:

cd your-project-name

c) Install dependencies required by the template (maybe brew yourself a nice cup of coffee after running installation):

npm install

4. Start your local HTTP server and run development:

npm run serve

3. Inject the Commerce.js logic layer

In order to communicate with the Chec API and fetch data from the backend, we need to install the Commerce.js SDK:

  npm install @chec/commerce.js

Now we need to link up our Chec store to our project. To do so, we need to create a new Commerce instance and pass in our public API key (grab your public key from your Chec dashboard). Let's open up our src/main.js file:

  //main.js

  // Import Commerce.js as a dependency
  import Commerce from '@chec/commerce.js';

  // Initialize store with public key and store key in variable
  // Commerce also accepts a second argument 'true', enabling the Commerce.js console debugger
  const commerce = new Commerce('ENTER YOUR PUBLIC KEY HERE', true);

4. Instantiating your Chec store

This is where the real fun part starts. You will now see how truly progressive and powerful building a JAMstack project is. All the abstraction of server-side processes is completely decoupled. All you need to do is make requests to various Chec API endpoints, receive successful responses, then you have your raw data to output beautifully onto your web store.

All of our APIs are designed to work either alone or with each other. Our APIs are organized around REST and are designed to have predictable, resource-oriented URLs that use appropriate HTTP response codes to indicate the results of API responses. All of the API responses are JSON encoded.

Still working from our main.js file, copy the rest of the code below:

//main.js

// Import Commerce.js as a dependency
import Commerce from '@chec/commerce.js';

import Vue from 'vue'
import App from './App.vue'

// Initialize store with public key, store key in variable
const commerce = new Commerce('ENTER YOUR PUBLIC KEY HERE', true);

Vue.config.productionTip = false

// Create a Vue instance
// Pass our Commerce instance as a prop
new Vue({
  render: h => h(App,
    { props: { commerce } }),
}).$mount('#app')

Our new Vue instance must be declared as an entry component in our main.js. We then have to define our $mount property to point to the DOM and tell Vue where the entry component should be mounted.

5. Start creating your product display

We will be coding most of the logic in the App.vue file. So let's open up the file and see what we're working with!

If you're starting your project from scratch, the Vue app has neatly laid out the file components for you. For modularity, your HTML markup, JS, and CSS can all live in a single .vue extended file. A scaffolded App.vue file contains these elements:

<template></template> Within the template tags is where you will be writing your markup for your product display container
<script></script> In the script tags is where the logic of the app will live
<style></style> The style tags is where you'll be styling the components of your app

If you're Visual Studio Code Editor, simply start a new file skeleton structure by typing / + tab. You will end up with a file structure like this:

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

Once you have your App.vue skeleton, let's start adding in the elements.

1. Add logic in <script>

//App.vue

<script>
import Product from "@/components/Product.vue";

export default {
  name: "app",
  components: {
    Product, 
  },
  // Pass commerce as a prop
  props: {
    commerce: {
      required: true,
      type: Object
    }
  },
  // Return our product data 
  data() {
    return {
      products: [],
    };
  },

  //When Vue app is created, run these functions to fetch data from API
  created() {
    //Make a request to list products
    this.commerce.products.list().then((resp) => {
        //Respond with products data upon a successful request
        this.products = resp.data;
    })
    //Handle Error
    .catch((error) => {
        console.log(error);
    });
  },
};

</script>

Let's start by breaking the above code down in chunks shall we?

In our components property, we need to define Product as a prop to later return it in our data() function below it. The returned object properties our Product in this case can be provided to the Product component as a prop. A custom directive which we will later bind to our template is essentially a prop, and our prop value is each individual looped product item (more on this in the next section).

When our App is created, we use the Commerce.js commerce.products.list() method to respond with a list of our static product objects. As you can see, we are only making a request to our Chec store backend once our app is created(). Upon a successful request, we then list out our products, otherwise we respond with an error message. Commerce.js allows us to make asynchronous promise-based calls to only execute our products list, if and when our request was made successfully. Async calls like these are a good use case to add a loading indicator while promises are being resolved.

2. Add markup in <template>

<!-- App.vue -->

<template>
    <div>
        <!-- Products catalogue -->
        <div class="container mx-auto px-4">
            <div class="flex mb-4">
                <div class="row">
                    <!-- Loop through products and output -->
                    <!-- :key is for Vue to keep track of items -->
                    <div class="col-sm-4" v-for="product in products" :key="product.id">
                        <!-- Bind product to cart -->
                        <Product  :product="product"/>  
                        </div><!-- END Product Catalogue -->
                    </div>
                </div>
            </div><!-- END of App Container -->
    </div><!-- END of Storefront -->
</template>

Now let's have a look at our template code.

We can safely ignore those class attributes such as container, mx, px, flex, col, etc. as those are Bootstrap pre-defined class names. These Bootstrap styles help to lay out the product display in responsive columns.

The neat thing about Vue is that it is a declarative framework, meaning we can render dynamic data to the DOM using Vue's straightforward template syntax. Vue also comes packed with built-in directives like v-for, which is most fitting to use for looping through our product data here:

<div v-for="product in products" :key="product.id">

The v-for directive here helps to loop through each product data object to render. The :key attribute gives each looped item a unique condition, which in this case we use our product.id. If you're curious to understand more about the :key attribute, the Vue official docs provide more info here.

Nested within is our <Product> component:

<Product :product="product" />

We bind our element attributes v-bind:product="product" with the v:bind directive. :product="product" is a shorthand of v-bind:product. We will get to creating our Product component in the next section. At this point, what you need to understand is the <Product> component within the template is what is injecting in and displaying what our products layout.

Let's now add our Product component: Create a new file in src/components and name it Product.vue

1. Add logic in <script>

//Product.vue

<script>
export default{
    name: 'product',
    props: ['product']
}
</script>

Here we are naming our component and passing our product as props.

2. Add layout in <template>

<template>
    <div class="card my-5 border-0" style="height:41rem;">
        <div class="card-body">
            <img :src="product.media.source" :alt="product.name" class="card-img-top"/>
            <h4 class="title text-center card-title display-5 pt-4">{{product.name}}</h4>
            <p class="description text-center card-text display-5" v-html="product.description"></p>
            <p class="text-center text-muted card-subtitle display-5 price">{{product.price.formatted_with_symbol}}</p>
        </div>
    </div><!-- End of card content -->
</template>

The Commerce.js SDK is what is allowing us to easily render our product data attributes such as product.media.source, product.name, product.price.formatted_with_symbol. Our Chec data can be rendered using either intepolation with double curly braces or custom directive attributes. Chec's API is beautifully designed with various endpoints to let you as a developer have access to work with all this data. It is now your turn to output your product data onto a unique customized eCommerce web app!

DEV Community: jaepass

🛍️ Build a commerce storefront

Prerequisites

Getting Started

Basic React App Structure:

Install our commerce API

Link up our Commerce instance

Make your first request to fetch the products data

Start to style your components

Create our product item component

Create our products list component

Conclusion

Author

Note-to-self as a Junior Developer

1. Don't be afraid of sounding like a total newb.

2. Ask questions, LOTS OF THEM.

3. Adding to the above point, note down every issue you come across and store them away as assets of knowledge.

4. Get close and comfortable with version control.

5. Try not to code blindly.

6. Feeling like new knowledge is not easily retained.

7. Your newness is one of the most important values.

A Small COVID-19 Initiative

Learning Redux

What is Redux?

Building block of Redux: Store, Actions, Reducers

Now lets put Redux to work!

Learning Destructuring

Chec Dashboard Redesign

Design Brief

My Goals

Design Stack

Introduction

Research

Analysis

Strengths of current product's view dashboard:

Room for Improvements:

Competitive Analysis

User Tasks

Proposed Solutions

Wireframing

Visual Interface

Prototyping

Takeaways

Customizing your Git Prompt

Cart Modal Demo

Playing with CodeSandbox Online IDE

eCommerce 101 - a Junior's Developers Guide to Integrating Commerce.js

Introduction

What is headless eCommerce?

As a junior developer, why should you tackle a headless eCommerce project?

1. Understanding of JAMstack

2. Ability to build on various touchpoints

3. Learn a new framework while you're at it

4. Building a real-world project

5. Take ownership of the project at hand

What is Chec and Commerce.js?

What exactly makes Commerce.js different?

1. Developers and designers building tools for developers and designers

2. Empathetic product built from the ground up

3. Well-documented API

4. Time to live

5. Well-designed API

6. Integrate anywhere

7. Developer experience

Let’s start building our first eCommerce project with Commerce.js!

Prerequisites

What you will need to start this project

Frontend and Backend tools

Getting started

Sign up for your Chec account

Upload your products

Set up your project on the command line

Project setup

Inject the Commerce.js logic layer

Make requests to fetch data from Chec

These are what we have accomplished here so far:

Next steps would be to:

SeasonEats: Eating seasonal local foods UX case study

SeasonEats: Eating seasonal local foods UX case study | by Jae Tay | Medium

Jae Tay ・ Mar 2, 2019 ・ 5 min read Medium

Jae Tay ・ Mar 2, 2019 ・ 5 min read
Medium