Unit 2 Project

Clone of Nordstrom an US based e-commerce company.

Nordstrom, Inc. is a leading fashion retailer offering compelling clothing, shoes and accessories for men, women and kids.

This is our first team collaboration project at Full Stack-development bootcamp in Masai School

Project Demo

Team Members & collaborators

1) Ravi Ranjan Kumar

2) Md Tausif

Tools & Technology Used

1) HTML

2) CS

3) JavaScript

4) JS-DOM Manipulation

5) JSON

6) Local Storage

7) VS Code editor

Pages cloned

---

By Ravi Ranjan Kumar

1. Home Page
2. Men's Page
3. Men's Clothing Page
4. Product detail display Page
5. Shopping bag page
6. Footer on all pages
7. Readme page of github

By Md Tausif

8. Header on all pages
9. Registerd user validation page
10. Login page
11. Create Account page
12. Created Account congratulation page
13. Checkout Page

---

HomePage

---

Clothing page

---

Apparel Detail

---

Checkout Page

---

User Interface

1. From home page a user can got to category product from header menu or links given displayed at different sections in home page body sub-sections:-

   1. Modal on home page as soon a customer visits the home page.
   2. Carousal changing image of some sub-section
   3. Carousal changing text-content of some sub-section

2. On Category page a user can go to sub-category like clothing from selectin filter from side menu of links on images

3. On Clothing page a user can see all clothes available and do these below actions

   1. For each cloth items following details are shown:-
      1. Item image
      2. Item price
      3. Item name with brand
      4. Fully functional Color Selector buttons
      5. Color of each button same as product items available colour
      6. With each color button user can see the item's image of that button color
      7. On hovering over item image a quick view of item's second image
      8. Rating of cloth item
      9. Total comments on item
   2. A user can sort on basis of price high to low, price low to high, customer rating high to low, featured items.
   3. Total no of available clothes below heading Men Clothing.
   4. User can filter items by clicking on filter criteria displayed in side-navigation.
   5. User can filter based on category of clothes like activewear, suits & separaters, hoodies, shirt
   6. User can filter based on materials of clothes like 100% cotton, 100% linen, Denim
   7. User can see total number of available clothes based on that particular filter criteria.
   8. By clicking on image of any cloth item a new page containing details of that product is opened.

4. On product details page a customer can :-

   1. hover over main image displayed to see the enlarged view
   2. selct from different small icon displayed of left side of man image to see the icon image's big image and again hover over it to see that in detail.
   3. selct the colour from color selctor button and see all above images in the new colour
   4. see the original and discounted price along with discount % .
   5. select colour and size from selection boxes
   6. see the details about fitting of clothes
   7. see the details about cloth material
   8. see the description of brand
   9. on clicking add to bag, customer is redirected to shoping bag page

5. On shopping bag page a custome can :-

   1. view all his bag items along with detail like image, description, remove and save later button, price, quant, sub-total, etc.
   2. On increasing-decreasing quantity the item price and sub-total price also change accordingly.
   3. On clicking remove button or save later item is removed from shoping bag display and price changes accordingly.
   4. If the last available item of bag is removed the customer is redirected to shoping page at men's clothing.
   5. When a item is saved for later, a alert is displayed containing message to login to see the saved items from user profile.
   6. If the last available item of bag is saved for later, customer is re-directed to signIn/create account page.
   7. If checkout is clicked the customer is redirected to checkout page.

6. on checkout page a customer can :-

   1. see the total price including taxes and shipping charges.
   2. Images of items purchasing.
   3. Apply promocode masai30 to get 30% discount on checkout amount
   4. Fill the address in address section
   5. after submiting address his addres short summary is displayed at payment page.
   6. After filling card details form validation is done.
   7. After succesfully making payment:-
      1. messages is displayed payment successfull
      2. after that order status
      3. next order delivery date
      4. and finally order delivery succes message

7. On clicking signin or create account customer is diverted to Registerd user validation page.

8. On user validation page:-

   1. User is asked for email, and customer is validated from database of registered user.
   2. If registerd user he is directed to login page.
   3. If new user he is directed to create account page.

9. On login page a user needs to validate his/her credentials:-

   1. If wrong credential alert message displayed.
   2. If correct credential user is redirected to men's shopping page.

10. On signup page user is aked for other details and then directed to create account congratulation page.

11. On congratulation page customer needs to update mobile number and redirected to shopping page.

12. All pages have footer included with links to NORDSTROM social page.

all images are taken from Nordstrom only for educational and learning puropose.

all icons and fonts taken from open sources from google search.

We have no copyrights over images, icons or fonts.