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.

1_fOQQeaKr_hfBmA9QvQgPCw

 

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.

1_4bR3zF56a2rEdjtjQhPO8g

1_FexzI_HEblZzxw_xvWO2Dg1_YqgL3NcF5IE8osT4zkgnDQ1_jSAEvLC4YcjVM5nSEgJsNw

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).

1_1KPZWJetQnYXpuWSAV_HZA
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.

 

1_S7BMMYFGcLFX5Pg4yrMmFg
Facebook API Intergration
1_R49k_eLLY4TzChillYoWqg
PageSpeed Test
1_9pMWO-QrPNGiMZ6FWuHyuQ
Mobile-Friendly Test

 

 

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 

1_N-Ehb4cYvFZ70Cg4Yh5nuA
Google Analytics Intergration