Skip to content

Purplle is an Indian multi-brand beauty retailer selling cosmetic and wellness products. It is an E-commerce site where users can buy all cosmetics related products .

Notifications You must be signed in to change notification settings

Shivamkakda/Purplle-Clone

 
 

Repository files navigation


Purpple Online Store Clone


purplle

Welcome 👋


About Purplle:

Meet Purplle,India's No.1 Beauty DestiNation! A powerful concoction of technology and beauty. A portal which delivers the best of both the worlds.Makeup has been around for over a hundred thousand years, and beauty is only evolving. What started with red pigment clay is now a fascinating world of foundation, rouge, lipstick, blush, mascara, eye shadow, eye liner, eye caramba!

About this project: 🙌

This is a team project, built by us in the Construct Week - Unit 3 at Masai School.


Presentation Video:


Demo Deployed link:


Project Blog:


Our Team Members ❤️


Pages & Features 👇

  • Home Page: Carousel Slider using setTimeout.
  • Sign-Up Page: User details stored to local storage.
  • Sign-In Page: User authentication to check whether user email and password is valid with details existing in the database.
  • Product Category Page: Products created dynamically, with sorting and filtering features. Used event listener to dynamically change the image on hover.
  • Cart Page: User can see or remove products added in the cart.
  • Wishlist Page: Users can add or remove products to the wishlist.
  • Checkout Page: Users can add the delivery address.
  • Payment Page: Users can add their payment details and also avail for discount.
  • Order Processing Page : setTimout to emulate original payment flow.
  • Order Successful Page : cart gets empty automatically in local storage, once the user lands on this page.
  • Additional Features : Kept the branding, fonts, colors and favicon and titles consistent throughtout the whole site to give a feel like the original site.

How To Use ✅

First you have to have to go to the signup page and create a new account. Then you will be redirected to the signIn page, where you will have to Enter Your Previous Signup Details For Further Process. Use that to complete the signup process. After the signup process is completed user details are added to the local storage.After clicking SignIn page User will redirect to products Page You can now go through the products page and navigate to add products to the cart. After that you can proceed to the checkout page. If you are not signed in you will be redirected to the signin page where you should use the same details you used during the signup proces. Otherwise you will not be able to signup. After signin you can go to the checkout page and add your address and proceed to payment page to add your debit/credit card details to place your order successfully.


Tech Stack Used 🔧

  • HTML
  • CSS
  • JavaScript
  • Advanced JavaScript
  • Material UI Colors

Tools Used 🔧

Screenshots 📷

  • Github
  • vsCode
  • Whatsupp

  • Home Page

Landing Page


  • Navbar UI

Landing Page Subcategory


  • Navbar UI 2

Landing Page Brands Category


  • Sign-Up Page

Sign Up Page


  • Sign-In Page

Sign In Page


  • Product Category Page

Product Category Page


  • Product Details Page Product Details Page

  • Cart Page

Cart Page


  • Checkout Page

Checkout Page


  • Payment Page

Payment Page


  • Footer Section

Order Successful Page


Thank You! For Your Time 😃

About

Purplle is an Indian multi-brand beauty retailer selling cosmetic and wellness products. It is an E-commerce site where users can buy all cosmetics related products .

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 88.6%
  • JavaScript 8.1%
  • CSS 3.3%