AFFAN-AHMAD / Nykaa-clone

This website is clone of Nykaa, an online store of beauty and makeup products. A group project of 4 members completed in 5 days.

Home Page:https://sleek-circle.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nykaa is an Indian e-commerce Mumbai-based retail seller of beauty, fashion and wellness products. The e-commerce startup lists products from over 1200 global brands along with its own line of products Nykaa Cosmetics and Nykaa Naturals. It sells beauty,wellness and fashion products across website, mobile apps and 76 offline stores.

Technologies we used

  • React
  • Redux
  • JavaScript
  • Chakra UI
  • Node as runtime
  • MongoDB as Database
  • Express , EJS for Backend

Installing and Running

To run this application on your local system, execute the following commands on your terminal/command line:

npm i

run the server

create a .env file with username and password of mongodb

Step by Step procedure to run this app using the deployed link

  1. Click on this link https://sleek-circle.vercel.app/

  2. You will land on the home page of the website.

  3. Go to navbar, hover on makeup and next go to the Lip column which will redirect you to the products page. nyka makeup to products

  4. Here you will find all the products available, Pagination feature, Sorting feature and Filtering feature. The data is dynamically coming from the backend, for getting the list of available brands & categories, we have used mongo aggregation query and to filter, we have used Mongo Find query using JavaScript Map Method for the creation of the various combinations. A proper blog has been written by one of the team members @Affan Ahmad explaining that in detail. Here you can check that https://medium.com/@affanahmad2797/algorithm-for-making-combinations-of-mongo-queries-using-javascript-map-method-d6470bc4a1f7

  5. Every product has a veiw-details option in that, clicking on that will redirect you to the product's details page, where you can check the various information avalaible for that particular product, we are using react-router-dom to get the "id" of that particular product and navigating to the product/:id page. Here you can check if the product is available in you area or not inserting your pincode into the input box and clicking "check"

    Screenshot (88) Screenshot (89)

  6. To add a product to your cart, click on add to bag button, now in the navbar there is "bag" icon, to open the cart, click on that.

  7. Here in the cart you can increase the quantity of the products, remove any product for the cart and proceed to the address page.

  8. On the address, you can click on ship to this address button and move to the payemnt page.

  9. Confirm your card details click on Pay now, your order has been placed now the cart will be emptied and you will be redirected tp the home page again.

Features

  • There is Login/Signup functionality.
  • Elegant Navbar for easy navigation between pages and products.
  • Customer can view the products on product page and sort them by price and in lexical manner.
  • In product page pagination feature is available so that user can easily navigate one page to another and see the products in systematic manner.
  • Filter of the products for a combination of products and brands.
  • Product details page shows the selected product images and information.
  • Customer can validate the pincode for delivery information.
  • Customer can add the product into shopping bag from the product detail page.
  • Cart page to change the items quantity or delete the items from the cart.
  • Payment page which calculates the amount of products dynamically.

Contributors

About

This website is clone of Nykaa, an online store of beauty and makeup products. A group project of 4 members completed in 5 days.

https://sleek-circle.vercel.app/


Languages

Language:JavaScript 93.5%Language:CSS 5.3%Language:HTML 1.2%