Clone of bobbibrowncosmetics.com

Bobbi Brown Cosmetics is a global prestige beauty brand that empowers women to embrace and enhance their individual beauty. It has an Global instant delivery service. Customers of this company use the mobile application or website to order prestige beauty products online.

Cloning bobbibrowncosmetics.com was our project for Unit-4 Construct week at Masai School. Our main objective was to complete all main functionality of this e-commerce website , starting from sing up till buying of the products, and that too without refreshing or rerendering the website more than once throughout the operation.
We completed this project within a week.

Click here to preview our project.

bobbibrowncosmetics.com is a leading Women Cosmetics Products Ecommerce Website. Bobbi Brown is an American professional make-up artist, author, and the founder of Bobbi Brown Cosmetics. Brown created ten natural-shade lipsticks which according to Entrepreneur “revolutionized the beauty industry”. She has written nine books about beauty and wellness.

Credits

Images : bobbibrowncosmetics.com
Content : bobbibrowncosmetics.com
CSS Library: Bootstrap | Tailwind CSS | Material-UI
Icons : Reacct-Font Awesome
References : MDN Docs | W3School

Tech Stack

HTML 5
CSS 3
JavaScript
CSS Library — Bootstrap
Github

Client: bobbibrowncosmetics.com

Features

Login | Sign Up | Profile | Offers and Toggled Navbars with their Pop-Ups.
Location Fetching using Geographical Location, lat and lng | custom Location Search.
Manual slider of products card for different categories.
Search bar for finding the product by it's name and viewing it.
Product page for different categories.
Detailed product preview page
Add to cart option for buying products.
Payment Page.

Screenshots of our Project for Overview

1. Landing page

Our landing consists of some of the main functionalities such as location detection, search product part, login, Sign-Up, view profile, add to cart, product preview, increment and decrement of cart items, add and remove items from cart, proceed payment part, sliding images and products and many more.

2. Registration Page

Here in Login part, the user need to fill the correct credentials to log in, and if input type mismatches then it will throw an error to "Enter a valid Credential" Once we are done with Login part we will be redirected to OTP page and after submitting correct OTP it will take you to the Home Page.

3. Pop-Up Part

In this we are having 2 different navbars which toggles after scrolling to a particular height. And we can also See popup functionality on both of the navbars.

4. Product Page

This the sample of a product Page for Best Sellers, and similarly we have different pages based on new comings, popularity and many more, here I have added Sorting functionality for each page based on Price, Rating, Name, Category and Best Sellers. And apart from this we can also click on any item to see its details and add it to cart.

5. Single Product Detailed Page

Here we can see the details of the selected item just by a single click.

6. Cart page

A cart page has two UI which conditionally renders depending weather cart is empty or at least has one item inside. After adding all the required grocery items we can go to cart where all selected items will be displayed and here in cart we can increase , decrease or remove items from the cart,and also we can apply for discount using coupon coad.

Empty Cart

Cart with items

7. Offers page

Here we can utilize some facility of different offers.

8. Payment Checkout Products

After clicking on proceed button of cart, we will be redirected to payment page, where we can select any of the suggested payment method to proceed with the payment. After this we will be asked to enter contact number along with some other details and after verifying the OTP we will be redirected us to the home page.

Challenges

As every journey has some challenges and so was ours. In our team, all of the members were not familiar with each other so it was difficult for all of us to communicate and collaborate, there were some moments where members were not able to communicate with each other and had a conflict and it was hard for everyone to handle these conflicts.
Another problem was to merge all of the files in a proper sequence which was again a difficult task for us because while merging and connecting all the pages some of the pages had the same name, and while running the site it was redirecting to some other pages so it was difficult to find the location and to rename the file.
As there were 2 different navbars in this which were toggling after scrolling to a certain height, So it was very difficult to apply the flag on that part in order toggle it.
We faced challenges with CSS, as few of the team members used Bootstrap and Material-UI and remaining few members unknowingly used the same name class which already existed in bootstrap, which created an unpredictable conflict in the CSS Part.
We faced difficulties to manage the routes, page, dependencies to work at a time.
One of the main challenge faced by us was while making Popups for navbar and while finding the geological location and fetching an approximate location of used once he allows permission for live location.
The main challenge of ours was to run the whole project without rerendering or reloading.

Team

Click on name to visit Github Account

soumyanil22/Group_project_bobbi_brown