This is a front-end application developed using React to work with CommerceJS, an API where you can create your own store and publish your items, categories, discounts and more using their system. This application fetches all this data using a key provided by CommerceJS and displays it in the page, allowing the customers to purchase these products.
When the customers first loads the page, an asynchronous request is performed to fetch all the categories created in the API.
"getCategories()" is a function comming from "GlobalContext" which is a ContextAPI component who contains most of the asynchronous request functions organized in it. The function getCategories fetches the categories comming from the API and filter them allowing only those that contain one or more product to be shown. It also organizes the array so the categories with more products are shown first in the navigation menu.
If your store have too many categories, the categories with less items will be shown in a dropdown menu at the end of the navbar. This is so that the navbar doesn't get too polluted, and also so that there are no overflow issues.
Of course the behavior is different in mobile dispositives. The customers can open a side-menu with all the categories displayed in it.
All the products published in the API will be loaded when the customers loads the page for the first time and shown in the home page, as demonstrated in the first image of this document.
products that belong to a specific category will be displayed when entering that category page.
The customers can add products they are interested in directly from this products grid to the cart. They can also visit each product specific page and check other details, like description, images and available quantity. Desirable amount of products can also be defined here.
When the customers first loads the website, a cart will be retrieved from the API, it can be a empty cart if the user never visited the site before, or a cart fulfilled with some items that were added there before. The API tracks the cart content using a cookie, you can check more info about how that works in the API's docs.
The customers can view, remove and alter the quantity of each product they added to the cart. The cart informs the prices of each choosen product and the total price. If the customers have a promo discount code, they can type them here, the code will be stored in a state inside the "GlobalContext" and its validity will be checked at checkout.
When the customers arrive at checkout, a checkout token will be generated containing most of the information on the purchase. This token will be used on most of the checkout operations.
The first step is collect the customer's basic data, such as name, email, address, address code, country, city and shipping method. The "AddressForm" file will fetch all the countries previously registred in the API to a HTML select, another select will be fulfilled with the subdivions of the choosen shipping country and so will the shipping method.
The next step is the payment form, where the customer can review his purchase and inform the credit card through Stripe API. When the customer enters this step, the shipping method will be fetched to the API and so will the discount code, if informed before. The price with the shipping and the discount will be calculated by the API and displayed to the user so the purchase can be concluded.
A final object containing all the information about the purchase, including customer's information, purchase informations and paymenthod details will be fetched to the API, then an email with all the details will be sent to the store owner and to the customer.
You can experience how the website works by yourself and check all of it's freatures through a demo version that i've uploaded in netlify: https://gabrieln-ecommerce.netlify.app/
This version is only a test demo and the purchase can't be completed once a test constant is set to true.
Finally, i would like to recommend JavaScript Mastery video which I took inspiration and instruction to develop this site.