The aim of this project is to create an e-Commerce site using NextJS (React) in the frontend and Commerce.js as a third party API for the backend include features such as product list and details, shopping cart, checking out, and order confirmation.
In an effort to apply what I know of the React webframe work, I decided to create a simple e-commerce site of electronic products to demonstrate understanding of how to use big data and heavy backend use in context of commercial transactions online. Normally I would've used Node Express and MongoDB for the backend but to change things up in this project I decided to use a third party API called Commerce.js which is specfically made for backends to e-commerce sites. I also wanted to create something practical that is similar to something I would probably work on in the workplace thus making a nice addition to my resume as an impressive project. It should be noted this e-commerce site project will be kept relatively simple as e-commerce is fairly new to me right now so this project might be updated in the future beyond January 2021. It should also be noted this is the third attempt at completing this project as the previous two attempts done in December were unsuccessful and thus the repos were privated or deleted.
The homepage of the site displays all the products for sale in rows of four and from there the user can click on any product to go to a specific page with details on the product clicked on alongside the price, the quantity of the item avaivable, and whether or not the product is in stock.
After clicking on the product from the product list, the user can then proceed to click on the "Add to Cart" button and will redirected to the cart page where they can edit the quantity of the product they want and even remove the item from the cart if needed. To add more items, the user can click on the name of the site in the upper left hand corner to be redirected back to the home page to add more products to the cart. The number of items in the cart will appear as an icon on the Cart button in the upper right hand corner.
Once the user is done adding everything they want in the cart, the user can checkout where they will fill out a three step form where they will fill in the customer, shipping and payment information. Note that for the payment information I already had it filled in for the sake of time and that the card information is NOT real. For simplicty sake I kept the domestic shipping cost at $0 as well.
Once all the infomation is filled in, the user can click "Confirm Order" and after a moment the user will be redirected to an order confirmation page which summarizes the order along with an order number while the merchant, the person running the e-commerce site, will also get notified of the order placed by the user on CommerceJS (shown in the first gif). The user will also get an email of the order confirmation as well as the merchant (shown in second gif).
Initally, I had thought to make an e-commerce website using the MERN stack but just building the backend was too difficult for me and would take me months to finish it thus I looked for a third party API catered for e-commerce that being CommerceJS. Unfornately the frontend was no different for me so to compensate for my lack of experience in React at the moment so I used NextJS which is a form of React used for commerce sites making it easier for me to build the site pages. For the sake of time, I kept this site relatively simple so I left out features such as user authencation, admin privileges, other payment options (through Stripe, Paypal, etc), categorzing products, and order tracking. Overall the goal of this project was to show that I know how to handle data in the context of commerical transactions, something commonly done every second of everyday, and I felt that I have accomplished that goal. However if I had to redo this project I would make sure to use MERN stack to make the site more customizable to my wants but before I do that I should work on better my skills in the React framework which I intend to do in my next project.