This is an e-commerce website clone that we made during the construct week at Masai School. It was completed within 5 days. We created a good responsive UI. So, you can use this website through phone and tablet also.

This project is deployed on netlify here - Farfetch Clone

• @Jaimin Sheladiya [ Student Code - fw18_0783 ]

• @Sumit-Gangwar [ Student Code - fw18_0057 ]
• @heyabrar [ Student Code - fp03_072 ]
• @Vishall001 [ Student Code - fw18_0134 ]
• @JaiminSheladiya [ Student Code - fw18_0783 ]
• @prashantshetti07 [ Student Code - fw18_0678 ]
• @gitskr26hub [ Student Code - fw18_0406 ]
• @heynaveed [ Student Code - fp03_063 ]

The e-commerce website has the following pages and the order of flow is also the same.

1. This page as the name suggests has the login and signup functionality, the login and signup data are stored in the local storage and used for verification of the user.
2. You need to put minimum 8 digit password with 1 special character . And also need to put same password in the login page.

1. This page as the name suggests has the homepage functionality. This is the landing page, Men's part, Women's part, and Kids part can be accessed from here.

2. Cart page is also accessible from here, to view your cart. To add the item to cart you will have to go to specific category page or you can add from homepage also.

3. There is also dropdown menus for the featured brand and trending now. so, you can also check in by there.

4. Below it you can find the QR code for download over mobile app. You can scan that QR code and after it you can download mobile app of our website.

1. Every page has navbar in top of the page. Navbar has some special functionalities in it.

2. So there are several buttons for men , women ,kids , Wishlist , cart , nation and login-signup.

3. after clicking on that particular button you will be redirect to that related webpage.

4. Near to the cart button you can find the count for how many items are there in cart and Wishlist.

1. Each products have their own landing page. In there you can found some pretty information like our designers or brands which we have in our websites. It also gives you a trending deals and products for that particular part.

2. Above of it you can find the different categories of the products. Like men's part has categories like watches , clothing , shoes , sneakers , bags , accessories etc. other 2 women's and kids have their related categories.

3. You can choose one of them and it will redirect you to their particular webpage .

1. After clicking one of the categories you will be redirect to that particular category page . Suppose you choose men's --> Sneakers. You will be redirected to the sneakers page.

2. In this page you will find all the products of sneakers. In each of the product card you can found needed details for it.

3. You can find their images for it. and you can also find another image for that product by just hover on it. It is applicable on all the product cards on the website.

4. You will also find the heart button on top of card. You can click on that and it will add the item into Wishlist. And colour of that particular button will be changed into black.

5. There is also some details of product in cards like product name , brand name , price , discount and effective price respectively.

6. In top of the webpage. You can find 2 selection menus for categories and sort Items. So, you can set it according to your need.

7. After clicking on particular product you will be redirect to its product page.

1. This page gets the data about that specific product from the category pages and displays it in detail here.

2. You can find more details of the product from it. Also, you can find and set the sizes from it.

3. You can also find some similar items by scrolling down.

4. In product page you can find buttons for the add to bag button and Wishlist button.

5. After clicking on Wishlist button that particular item will be added into the Wishlist.

6. Similarly for the cart/bag button. When you will click on this button. Item will be added into cart and you will be redirected to the cart page.

7. Into navbar you will found that the count is also increases whenever you will add item into cart or Wishlist.

8. On clicking on heart of the navbar you will be redirected to the Wishlist page of the website.

1. In this webpage. You will get items which is into the Wishlist. You will find details for particular item there. You can also change the size for products.

2. If you want to remove the item from the Wishlist. Just click on cross sign which is given above the card. You can delete the particular item by clicking that cross.

3. There is also add to bag button below the details . So, by clicking on that you can Add that item into bag.

4. You will find that the count of the bag items and Wishlist are also updated after make changes.

5. By clicking on bag button you will be redirected to the bag webpage.

1. Here all the products that you have bought will be displayed with the info like price and quantity.

2. You can change quantity according to your need. and the total of the cart value will be updated respectively.

3. Clicking on checkout will take you to Checkout page.

1. In this page you will find input fields for address for delivery.

2. You will also find that there is summary. where all the products will be displayed which will going to checkout. Also, you can find the total summarized payment total there.

3. There is also one button named as 'proceed to payment'. After clicking on that you will be redirected to the payment page.

4. Before clicking on that you need to fill the form of delivery address with valid details first.

5. After filling that form . You can go to payment page.

1. Payment page is like the final payment gateway to add the card details like CVV number, Name, Card expiry date etc.

2. there is several options for make payments like UPI , Cards , Net banking etc. you can make payment from whatever you need.

3. We created only card payment functionality for our clone .

4. If there will any offers will applicable. It will directly apply and you can find it on 'payment summary' . You will directly find discounted price.

5. You can find card details form. You need to give valid input and then you can click on 'Make Payment' Button . It will redirect you to confirmation page .

1. If all the details of previous page were right . Then you will be redirect to this page.

2. In this page you can find massage of 'Order successfully placed' . and it will give you an estimated delivery date for delivery and also order Id for your reference.

3. There is also button named as 'Track order' and 'homepage'. By clicking on homepage you will be redirected to the homepage.

• We created this clone as much good as we can. We tried to give all the functionalities into it. And give also responsive looks by media queries.

• I used simple HTML , CSS and JS to complete my project part.

• I created the men’s page and product page . In there you can find all relative products of men with several categories. I also give their category filter and sorting functionality. You can use according to your need.

• In product page I give as much dynamic data as I can. I give price brand category , images and description dynamic for all the product.

• On hovering on any of the card of product you will find that product image is change in Realtime.

• I used array of object and stored into local Storage for using the data. Because we can't find any good API for this data.

• Thanks to all teammates for do their work properly and make a good clone.

• All pages have same Navbar for that I've used import/export and the website is fully responsive.

• Navbar and footer section are different for both PC and mobile devices.

• Wishlist Page is also responsive, products arranged according to the width of device.

• I've used some popular tech stack HTML, CSS, JavaScript and for CSS structuring I've used SCSS and Bootstrap to build this website.

• In Cart I have used some basic tools like HTML CSS and JavaScript and with the help of HTML and CSS,I have given good UI to the page and with JavaScript.

• I have provided some functionalities like you can increase the quantity and provide also a cross icon to delete any product & depending on items you can see prices. And also provide a Checkout button.

• In Checkout I have provide a form where you need to fill basic information like name , address , phone-number , pin code after you need to click on proceed to payment button.

• In payment you need to choose the payment method and fill the information accordingly and then click on make payment button. And your order has been placed.

• Women's page has one main page and has a navbar where every important section is provided. The main page has some trending items, discount items and etc. And in navbar.

• there are sections like sales, clothing, shoes, bags etc. When you click on a particular section you will redirect to that page.

• Every women page has two filter options that you can filter by categories or by price (low to high ,high etc).

• And there is one more function that when you put your cursor on the particular item, then it shows another picture of that product which is helpful for the visitor.

• I have used JavaScript for functionality, HTML, and CSS to build women part in this website.