I started this project out of curiosity, I wanted to see the advantages & disadvantages in building an e-commerce app using React, Commercejs and stripe and an app build with (Mongodb, Express, React and Nodejs | MERN).
PROS: Its certainly faster to build, in more of that commercejs has some nice tools to communicate with the client. CONS: as a beginner I like to have the code in front of me to see from where an issue is coming, commercejs doesn't offer that.
- Having conclude the Default version (example: few images below), I decided to customize it a bit (still in process but already available for recruiters "upon request" 👈).
The main motivator for this project was my curiosity as well as my desire to expand my knowledge. Due to the disastrous effect the pandemic had on the small businesses I used to visit, I decided I wanted to find a way to create websites and e-commerce stores that any business owner could use to represent their wares online, be it small or big.
Although it isn't fully functional yet, as there is a final error I have to correct to publish it on the web, this is the result of my work. Aside from that I wasn't entirely satisfied with the design so I customized it as you can see from the preview shown above.
I changed all the original images and design palette for the ones you see on the image above. I also tested different things that you don't have in the video tutorial, you can find them in my Notes
- All the Branches containing the process
- default-project
- navbar-basic-and-default-commercejs-setup
- fecthing-data-from-commercejs
- creating-products-with-commercejs-adding-dynamic-button-add-to-basket
- Cart.CartItem-buttons-increase-decrease-remove
- buttons-increase-decrease-remove-emptyCart-allready
- checkoutTokenId-part1
- token-shipping-Countries
- token-shipping-Subdivisions
- token-shipping-Options
- the-next-button-before-payment-form
- stripe-1
- stripe-2-order-confirmation-done
- confirmation-styling-and-spinner-end
-
Interesting links that helped me to debug the last warnings of the project
-
Read more inside the debugging
Cleanup memory leaks on an Unmounted Component in React Hooks
Can different cleanups be done conditionally in useEffect?
Big thanks to Adrian Hajdin , for sharing this Great tutorial on how to set up an E-commerce store using: React | Material UI | Commerce.js and Stripe.