Masai Construct Week-1 Project: SkinStore clone
/ * begin * /
To clone SkinStore.com, across user experience and backend functionality with HTML, JS, and CSS, while displaying the use of Local Storage and DOM manipulation.
SkinStore is an online marketplace that offers a vast catalog of beauty products comprising skincare, haircare, self-care, makeup, and body categories. Customers can shop for premium beauty brands like SkinMedica, By Terry, Fragrance, SkinCeuticals, etc.
- Home Page
- Product Listing page
- Brand Page
- Product Individual Page
- Cart Page
- Wishlist Page
- Payment Page
- My Order Page
- Login Page
- Register Page
Register > Login > Homepage > Category > Product Listing > Product Page > Cart > Payment Page > Order Placed > My Orders
Signup/Login
Authenticate users and log them into the homepage. If a new user is encountered, sign them up.
Add to cart
Checks if the cart already contains the product. If no, adds the product to the cart, if yes, increase the quantity.
Add to Wishlist
Adds the favorite product to a wishlist for quick access in the future.
Product Filtering
Filter products on gender, color, product category, price, and ratings for easy access.
Product Sorting
Sort products on price, rating, and lexicographical order.
Search Product Brand
Find the product from the universal search field in the navigation bar.
Delete from Cart/Wishlist
Delete the product from the cart or wishlist.
Discount Coupon Code
Add a discount code on the payment page to avail of seasonal offers. We have implemented two codes - JOY30 and Masai-DNA.
Payment Page
Input payment details from the user and validate them before placing the order.
My orders
Display history of successfully placed orders.
-
/Data collection/ forms the backbone of our project. We have used Javascript objects to store product data with different fields - product URL, name, image, product price, offer, etc.
We have utilized Local Storage to store cart data, wishlist data, and user data during the user browsing session. We use these data to populate the wishlist page and cart page with appropriate products. -
/Event listeners/ are crucial in making the website dynamic and responsive. mouseover, mouseout, click, change
-
/Grid and Flex layouts/ are used extensively throughout the website to draw complex div layouts and page structures. Both these layouts enable us to add media queries to the pages to create a responsive web layout.
-
/CSS Selectors and Combinators/ used in the site have simplified navigating through the long nested divs structures without adding separate ids for every Html element or tag.
-
/Creating HTML through JavaScript/ helped us in populating the pages from JSON data objects with map and forEach function in javascript. We also learned how to attach CSS classes with JS.
Netlify link - SkinStore clone
Dilasa Thapa: pw08-425
Nehal Ahmad: pw06-113
Aman Ninave: pa04-045
Aman Singh: pw08-329
/ * end * /