Develop an E-commerce website from scratch

I joined a Bootcamp last year to sharpen my skills in JavaScript and React, and also learned more about Git collaboration. I spent 1 month on this project.

Here’s the final result and feel free to put some items in your shopping cart.

Stage 1 – RWD

I focused on how to use flex-box in CSS for the whole website structure. Familiar with RWD is the most important skill for a frontend engineer. I highly recommend flex-box froggy for a newbie. It’s really helpful after playing the game.

Also, I spent a lot of time learning Git. I put my code on GitHub and learned to pull-request to a reviewer. I learned a lot of skills from learning Git branching.

Stage 2 – Function Logic & Local Storage

Because I was learning to do an E-commerce website, I need to learn more about the function logic when a user buys things. Also, I need to learn how to store the data of a user put items in their shopping cart, so that means I need to learn how to use local storage.

And still… Return to check all my CSS structure, sometimes it’s just broken like this (T_T).

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.