Develop an E-commerce website from scratch

Screen Shot 2019-04-29 at 10.17.02 PM

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

Screen Shot 2019-04-29 at 10.15.53 PM

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

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

Stage 2 – Function Logic & Local Storage

1_FexzI_HEblZzxw_xvWO2Dg.png1_YqgL3NcF5IE8osT4zkgnDQ.png
Because I was learning to do an E-commerce website, I need to learn more about the  function logic when a user buy things. Also I need to learned 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.

1_1KPZWJetQnYXpuWSAV_HZA.png

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

Stage 3 – API Integration & Google SEO

1_jSAEvLC4YcjVM5nSEgJsNw.png

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.

1_S7BMMYFGcLFX5Pg4yrMmFg.png

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

1_N-Ehb4cYvFZ70Cg4Yh5nuA.png

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

1_9pMWO-QrPNGiMZ6FWuHyuQ.png1_R49k_eLLY4TzChillYoWqg.png

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

You could read more about my development journey here:

Week1 – Learned RWD & AJAX & Git 
Week2 – Learned Function Logic & Local Storage
Week3 – Learned Integrated TapPay & Facebook API & Google SEO