Nordstrom Rack is an American off-price department store chain founded in 1973. It offers branded clothing and accessories for women, men, and kids at a large discount to consumers across the United States and Canada. They launched their website in February 2014. Cloning this website got us excited. This excitement arose from the fact that nordstromrack.com is a website that offers its users ease of operations through its seamless functionalities. We have humbly incorporated many such functionalities in our project as well.
TECH STACK : HTML(46.5%),CSS(13.9%),JavaScript(39.6%).
FUNCTIONALITIES: Sign up, log in, filter products, sort products, add a product to bag, remove products from bag, and place an order.
-
Navbar and footer.
The navbar is common to all the pages. We have applied the concept of exporting the code to all the pages instead of copying the code on all pages. . On hovering on the various categories like clearance, women, men, etc, the user will see a dropdown of various categories he/she can choose from. The footer is common to all pages and the same exporting concept has also been used here.
-
Home page.
a) The login indicator: If the user is not logged in, he/she will be routed to our sign-in page by simply clicking the sign-in or create account button. But if the user is already logged in, he/she will be able to see his/her name attached with a welcome message at top of the homepage.
b) The slider functionality.
-
Create an account and log in.
On clicking the create account button on the home page the user will be redirected to sign-in/ create account page. The user has to enter his/her password. On clicking next if you are a new user you will be asked to fill in your details and create a password. After creating an account the user will be redirected to sign in. Here he/she has to enter the set password and can easily log in to the website. If you are a pre existing user you will be asked to re-enter your password and you can easily log in. Hence for a pre existing user, we have eliminated the pain of re-entering the details and creating a new password. The logout functionality will be visible to the user if he/she hovers over his/her name in the navbar after logging in.
-
Mens Activewear Page.
Under the men’s category upon clicking the activewear section, the user will be routed to the men’s activewear page. Here the user can see a variety of available products. He/she may sort the products based on their rating or price. We have also provided the functionality of filtering, whereby a user can filter the products as per category, gender, brand, and fit. Upon clicking a product the user will be redirected to the product description page.
-
Product Description page.
The selected product’s detail will be displayed on the product description page. Functionalities like selecting the size of the product and the color of the product are available on this page. The user can also add the products to the bag by simply clicking the add to bag button. At the bottom, the user will also be able to see the products which are frequently bought together. This frequently bought section is dynamic and varies for different products.
-
Bag page.
This page will contain all the products that are added to the bag. Users can remove the product from the bag. At the very bottom of the page, the total payable amount will be visible to the user. Clicking on the checkout button will route the user to the checkout page.
-
Checkout page. Access to the checkout page is only available to a logged-in user. If not logged in the checkout page will route you to the sign-in page and you may sign in to continue to the checkout page. The checkout page will display the images of the products you have added to the bag and the details of the same. To place an order the user will have to fill in the details of the shipping address and select a mode of payment.
Contributions.
-
Ashish Kumar Prusty.
a) Development of sign-up and login page.
b) Development of bag page.
-
Ashok Kumar.
a) Development of the navigation bar.
b) Development of checkout and order success page.
-
Prathyush Nair.
a) Development of Men’s activewear page.
b) Development of product display page.
-
Ritik Wankhede.
a) Development of the home page.
-
Shubham Kumar.
a) Developed footer.
Netlify Link: https://quiet-crepe-a6deeb.netlify.app/
Medium Link:https://medium.com/@prathyu360/cloning-the-website-of-nordstrom-rack-af68fce46989