My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
My very first individual cloning project, YOOX website, construct week Masai School

My very first individual cloning project, YOOX website, construct week Masai School

Sireesha Ravulapalli's photo
Sireesha Ravulapalli
·Jan 22, 2022·

2 min read

Hello Readers, How is your day? Hope everything is safe and sound. I am about to share my experience of doing my very first individual project given in my construct wee at Masai School. The target is to clone a website named YOOX in a span of seven days. And now I am going to tell about my one week journey with this Yoox.

HOW and WHAT I HAVE CLONED? As the website have several pages, I cloned a few pages and added functionalities. Coming to the TECH STACKS,

Frontend:

  1. HTML for website structure
  2. CSS for styling
  3. Javascript

Backend:

  1. Masai_school/api-moker for login and registration authentication
  2. Local Storage as website api is not available

Functionalities:

  1. Landing Page, Footer and Header

1.PNG

Form footer page we can enter registration page or login page. I made footer part as static. Other than in landing page header also have categories part from where one can select one and enter that page. It also have cart and favorite icons from where one can open that page.

  1. Register and Login For both these pages I have used the api authentication just like how our real register and login pages works.

register.PNG

  1. Home page These page can be of any category. It will be opened from landing page by clicking on the images displayed. I made women page. Here is a sneak peek of the page.

Capture.PNG

  1. Special Page By selecting any particular special category from home page takes to special page. Products can be sorted based on the price.

special.PNG

Products Display

grid.PNG

  1. Item Page In this page the details of the product that we selected will be shown as shown below. And also most recently viewed, similar products grid we be present to select.

details.PNG

  1. Cart page / checkout page This is the last page where Shipping address, Payment details, Order confirmation is made. We can also remove the items from the cart. After successfully placing order confirmation alert with and order id is displayed.

EXPERIENCE: An awesome feeling of confidence after completing the target. I have experienced the frustation of fixing the bugs learning that it was due to type error. Things like time management and having pleasant mind in time of stress, thought by Masai is really helpful. I have learned different concepts that can help me in future.