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](https://commercejs.com/). 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](https://www.npmjs.com/package/@chec/cli).

## 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

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.

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:

1. Chec store set up
2. Installed Commerce.js SDK to communicate with the Chec API
3. Created a new Commerce instance and passed in your public API key to connect to your Chec store
4. 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:

1. Parse out your data and populate your product catalogue view with the product media, metadata, variants, options, conditionals, and prices.
2. Fetch your cart by using the retrieve method on your [cart object](http://commercejs.com/docs/api/#retrieve-a-cart) commerce.cart.retrieve()
3. [Add products](http://commercejs.com/docs/api/#add-item-to-cart) to your cart with the commerce.cart.add method.
4. Create a [checkout token](http://commercejs.com/docs/api/#generate-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
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 is a self-driven app project I am creating as part of my online portfolio.

Process

1. Ideation
2. Research
3. Design
4. Prototype

Ideation

Problem definition

Living in the West Coast of Canada, there is an abundance of local produce and foods in the warmer seasons. However, in the fall and winter months, buying local and in-season foods become more challenging. This problem didn’t stand out quite as much until my recent time in Italy where I was trying to buy broccoli in June and could not find it. I realized Italians have been born and bred to buy and eat seasonal ingredients all their lives. Heck, most households grow their own crop as well! Of course, Italy differs in their rich agriculture and strong support in their domestic industries.

Most grocery stores and markets in Canada do not necessarily merchandise local and in-season produce in the front of the stores where is it easily accessible and obvious to buyers. With the overwhelming display of products shipped from our neighbouring trade partners such as California, Mexico, Chile and even China, making the right purchases in grocery stores can be difficult.

Eating local seasonal ingredients would solve an overflow of agricultural and economic issues, therefore, to bring us back to the root of the problem, it has to start with our demand for seasonal local products.

To be able to identify the problem areas, I had to think of who the ideal member of the family with the purchasing power is. It would be fair to determine that in most situations, mothers, college students, working professionals, grandmothers (in order of most purchasing power), are the ones making the household purchasing decisions.

Brainstorming

My Goals

After identifying the main problems and the need for resources and information on seasonality, these are my goals for SeasonEats mobile application:

• To provide easily laid out resources for consumers to access while shopping for groceries
• To help redirect the community back to solely purchase ingredients from local producers and farmers and in turn strengthen the local agriculture and economy
• To partner with local farmers and food outlets to highlight their local in-season produce and groceries
• To help consumers understand “Less is More,” in this case, less and (local) choices help make better informed purchasing decisions

Value Proposition

To create a mobile application to help people make in-season and local purchasing decisions. SeasonEats will enable consumers to start to think local and make easier local in-season product choices while shopping. The main components of the mobile app will include:

• An ‘all-year around produce and foods list’
• Map to highlight the nearest local grocery stores and farmer markets
• A recipes tab starting from easy cooking level to encourage people to cook at home
• An incentive program whereby consumers accumulate redeemable points when buying local in-season products

Research

To validate the problem areas I have identified as a local consumer as well as from family members and friends, I wanted to conduct further research from the local community.

I posed some questions on food community groups on social media as well and conducted a simple survey online. Some of the questions I asked are as listed:

1. What are your motivators before going to the grocery store to shop?
2. What are the important factors when buying food? Factors such as taste, quality, health benefits, price.
3. How often do you cook at home?
4. Do you consciously try to buy local and in-season produce? If not, why is that?
5. What would motivate you to use seasonal ingredients?

Some of the findings were conclusive of the lack of knowledge about food seasonality. As consumers, we tend to base our eating and shopping routine heavily on convenience and price. Time spent shopping and cooking at home have lessened since the mid century as evident of the influx of food delivery apps in recent times.

Knowing the types of foods and ingredients that are at their peak for the season and having them be easily available would help with ease of shopping and eating. An added value of eating seasonal and local foods is money-saving. When foods are the peak of the season, the abundance of supply will bring the costs down. Consumers also know that extra added values such as tastes and quality comes with buying produce and foods that are harvested and grown locally.

According to my research, 85% of consumers desire to practice seasonality but lack the knowledge or how-to to implement in their lifestyles.

Some of the key findings led me to identify one defined potential user, Monica, a stay-at-home mom of three children.

User Journey Map

Having an ideal user for this mobile application allowed me to create a journey map to ideate an identifiable perspective. I was able to discern this user’s goals, emotions, motivations and present opportunities where applicable. This user needed distinctive directions and inspirations for a satisfied experience with using the application. Throughout her journey, there were many opportunities for the app to be useful in achieving her goals. One of the main opportunities that could be presented throughout her journey would be notifications and alerts to keep the user on track and help save time.

Design

For the design of this app, I wanted to convey a fresh, clean and bright look. The idea is give the same impression as one would experience when shopping for fresh foods. We tend to shop for produce and fruits by looking for the right colours and textures. The on-boarding screens welcome users to an array of vegetables and fruits. Graphic icons were used only on elements and food photos are meant to highlight the main components.

Next Steps

• Prototyping with Framer
• Conducting user testing
• Design the map/search and recipe generating elements

Tools used

Adobe Photoshop, Adobe Illustrator, Adobe XD

Creating a travel resource app for families who wander.

This is a self-driven app project I am creating as part of my online portfolio.

Ideation

Problem definition

The problem addressed is the difficulty I find when doing research into a destination I plan to travel to with my family. As an avid traveler, I normally would try to cover as much bases as I can during the planning phase and research for tips and recommendations online prior to traveling. Each time, I end up with bookmarking over 20 tabs onto my browser. I realized that there has to be a better resource or platform where all the information can be consolidated. Often times, I have to search specific keywords such as family-friendly resorts, restaurants with fresh seafood, shops to buy souvenirs, or landmarks to visit to find effective tips. These searches would lead me to a multitude of different webpages such as TripAdvisor, personal blogs, yelp, business pages or posting a question on a facebook group.

Brainstorming

Value Proposition

To create an app where families with children are able to access travel information and tips on one platform. Travellers are able to write short posts or blogs, share pictures, travel itineraries, guides, and update real-time location to connect with other travellers or reach out to locals for insider’s tips.

Introducing WanderFam, a travel app for families who wander

Process

1. Ideation
2. Research
3. Design
4. Prototype

Research

To attest to the frustrations I face when planning a family vacation , I wanted to conduct a survey using google forms and request for responses on parents/mom facebook groups. This method was most accessible as the community of parents in the groups are resourceful and helpful. Being able to retrieve answers from real parents who travel would help me identify needs and “pain-points” to come up with solutions. Below is the summary from the five questions I came up with:

Findings

From the five questions in the survey, I was able to put together some general needs of a mom planning a vacation for her family. What I wasn’t able to interpret were specific needs and solutions to come up with the main key features to include in the app. In my hypothesis, I had hoped to create an app that would make traveling easier for families but it is too general of a proposition. I thought about my own behaviours while planning a trip and recognized that this app would be utilized more in the planning stages as opposed to while being on the trip. I realized I had to ask more specific questions on what users’ needs are while in the planning stages.

Survey Part II

Striving for more qualitative research, I posed the questions on the same parents facebook group and received more than a few responses that I felt strongly represent two archetypes. This part of my survey concentrates more on specific needs while planning for a family vacation. The variation of needs boiled down to the difference between family dynamics, the duration of the trips, and financial situations.

Personas

From the survey research, there was a pattern in asking for reliable recommendations and finding family-friendly places. Validating that moms were the main decision-makers and planners for family vacations, I was able to put together two distinctive personas resembling two moms with different family dynamics, needs, pain-points, and wishes.

Working Whitney

31 years old

Married

2.5 year old toddler

Project Manager

Planning

• Starts planning for a family vacation once she books time off of work 6 months in advance
• Researches and makes packing lists for traveling with a toddler
• Researches on necessary items she would need to buy more of in the destination country
• Monitors when airline tickets drops in price but isn’t motivated by it.
• Tends to buy airline tickets at least 4 months in advance

Frustrations

• Tries to prevent taking long haul flights with toddler
• Wants to be sure to pack the right things and not have to buy too much while on vacation
• Hates how much time needs to be dedicated to research for a family vacation and how many sources she needs to go through online. Finds that there aren’t many sources that are specific to families with children.

Dream Destinations

• Spain, Bora Bora

Goals

• Tries to avoid places that are too touristy and rather eat at the local spots
• Stay somewhere close the beach and do water sports or activities
• To try to enjoy herself even though she knows she will be the main organizer while on the trip. Tries to pass on some tasks to her husband ie. to keep toddler occupied while she searches her phone for recommendations and makes bookings

Fears

• Getting sick while on vacation
• Forgetting to pack necessities for her toddler and having to find them while on vacation
• Not finding family-friendly places to stay and eat

Juggling Janice

36 years old

Married

9 month old baby, 3 year old toddler

Stay-at-home mom with a home-based specialty cake business

Planning

• Starts planning for a family vacation when she finds a good enough deal that she couldn’t pass up. Her husband is a city worker and has longer vacation periods.
• Travels at least twice a year so is quite knowledgeable on what to pack to travel with two kids
• Wants to find more family friendly destinations and not just resort to the usual places they go to
• Wants to get recommendations from moms who have gone to more exotic places.
• Tends to buy airline tickets at as soon as she finds a good deal sometimes even 2 weeks before vacation

Frustrations

• The amount of things to pack with two kids
• Finds it hard to determine what places are most safe for her kids
• Has to take into account the needs and wishes for her kids and husband
• Not being able to have at least one date night with her husband while on vacation

Dream Destinations

• All-inclusive vacations in Europe, Disneyworld

Goals

• Finds accommodation with daycare services
• To make sure everyone has a nice vacation
• To do activities to bond with her family and have lasting memories

Fears

• Her children getting lost
• Her children losing appetite
• Finding enough activities for her toddler to do

I was able to come up with these mains components to include in the app based on these needs.

• Reviews and recommendations from friends and family and travellers alike
• Top family-friendly places to eat/see/do
• “Borrow” itineraries that were used/recommended by other families
• Customizable set of filter search options

User Journey Map

Basing this user journey map off of our archetype user, Working Whitney, I was able to draw out the steps she would take to plan her family vacation with her husband and toddler son. Using a journey map helps me validate Whitney’s needs, goals, and the emotions she feels through out the planning and traveling process.

User Flowchart

After having a sense of our user’s journey in planning her vacation, I was able to come up with a flowchart to iterate the user’s process interacting with the application. The user would open up the app to four on-boarding screens which would take her through descriptions of the four main components of the app. She would then sign up for a new user account through email or social media. In each of the filter preferences screen, I have included a ‘skip’ button. This gives the user the option to come back to these filters later or to entirely skip it if they do not know what to choose at that moment. Filtering their preferences would provide the user with more accurate generated optimized results.

Design

Before sketching out the concept screens of the app, I had a clear idea of the components and placements of elements I wanted to go for. Using only rough sketches on paper, I wanted to highlight the filter preferences the user will encounter after on-boarding. Looking at the user flowchart, the filter screens make up a larger part of what the user will experience when using the app for the first time.

Sketching

Prototype

Knowing that I would only be designing the filter preferences screens, I opted to jump right from sketching to prototyping on Adobe XD. Referencing from my User Flowchart, I was able to lay out each element in lo-fi wireframes before adding design aesthetics in the artboards. Each of the filter screens only needed some slight additions and rearranging. After finalizing the designs, I added animations to the screens to demonstrate the flow of the app. The focal point of the initial user experience is to discover that they are able to get good recommendations deriving from the preferences they choose.

Conclusions

This app being my first UX project and prototyping, I had hoped to keep the process simple and concise. Even though I had always been using Adobe tools, I found that with each step, I had to go through small learning curves.

Takeaways

I have more than a few key takeaways from this first concept project:

• Learning that UX design is really about identifying and solving problems with good extensive background research
• Taking more time with sketching and lo-fi wireframing. Editing my designs in the artboards wasn’t ideal as I found that I was constantly going back to change the aesthetics and branding.
• To be able to do some user testing. Adobe XD was a limited tool in that I could only save my animations as a video file but not as a GIF or prototype for me to conduct user testing

Next Steps

• Switching over to Sketch tool for prototyping
• Conducting user testing
• Design the Home dashboard, My Trips, and Featured Vacations screens and conduct user testing on this stage

Tools used

Adobe Photoshop, Adobe Illustrator, Adobe XD

WanderFam: Family Travel App Case Study was originally published in Jae Design on Medium, where people are continuing the conversation by highlighting and responding to this story.