To enhance my skills in JavaScript and React and learn more about Git collaboration, I participated in a bootcamp last year. As part of the program, I worked on this project for one month.

I am pleased to share the final result with you and invite you to add items to your shopping cart.

Shopping page Index

Stage 1 – RWD

For this project, I dedicated my efforts to mastering the use of flexbox in CSS for the entire website structure.

As a frontend engineer, being proficient in responsive web design is a crucial skill, and I found flexbox froggy to be particularly helpful for beginners.

In addition, I invested significant time in learning Git and practiced by uploading my code to GitHub and requesting code reviews from peers. The Git branching approach was particularly useful for enhancing my skills.


Stage 2 – Function Logic & Local Storage

Because I was working on an E-commerce website, I needed to master the logic behind the purchasing process. In addition, I had to learn how to store users’ shopping cart data, which required me to understand the usage of local storage.

As I was developing an E-commerce website, I realized the importance of mastering the function logic behind the checkout process. I also had to learn how to use local storage to save users’ shopping cart data. Moreover, I had to constantly check and refine my CSS structure to ensure it was not broken.

Developing an E-commerce website taught me the significance of understanding the purchasing process and how to store users’ shopping cart data. Learning local storage was essential for implementing this feature. Additionally, I had to pay attention to my CSS structure to prevent it from breaking down.

Tune the RWD

Stage 3 – API Integration & Google SEO

I also learned more about how to communicate via TapPay API.  I used pure JavaScript in the end, and try to write ES6/ES7 in this project.

And Integrated Facebook API into my website while a user is logging.

In the end, I put my website into Google Analytics to track the user’s behaviors. GA Documentation was really helpful and I would definitely dig into it in the future.

Google Page Speed Insights & Mobile-Friendly Test — Google Search Console also helped me to know more about the performance of my E-commerce Website.

Facebook API Integration
PageSpeed Test
Mobile-Friendly Test
Google Analytics Integration