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.
- MD Arshad Khan,Shivanshu Chobey Click here to view our Blog.
- Click here to watch a brief preview of our project in video format.
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.
- Images : bobbibrowncosmetics.com
- Content : bobbibrowncosmetics.com
- CSS Library: Bootstrap | Tailwind CSS | Material-UI
- Icons : Reacct-Font Awesome
- References : MDN Docs | W3School | React | React Redux
- React
- Redux
- HTML 5
- CSS 3
- JavaScript
- CSS Library — Bootstrap, Tailwind CSS, Material-UI
- Github
Client: bobbibrowncosmetics.com
- 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
- Filters for custom price
- Sort functions for High to Low and Low to High Price, Rating, Bestsellers, Name and Color.
- Add to cart option for buying products.
- Payment Page.
- Media query for All Size Screen.
- Images : bobbibrowncosmetics.com
- Content : bobbibrowncosmetics.com
- CSS Library: Bootstrap | Tailwind CSS
- Icons : Reacct-Font Awesome
- References : MDN Docs | W3School | React | React Redux
- React
- Redux
- HTML
- CSS
- Javascript
- CSS Library — Bootstrap. …Tailwind CSS. …
- Github
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.
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.
Here we can search for any specific item to look for its details and for adding it to the cart.
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.
Here in mapping part our location gets fetched automatically after allowing our geological location, or else we can also search for some custom location.
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.
Here we can see the details of the selected item just by a single click.
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.
Here we can utilize some facility of different offers.
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.
-
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.
Click on name to visit Github Account
MD Arshad Khan, Abhinav Roy, Shivanshu Chobey, Yogesh Kumar, Nikesh Borkar, Rahul Kumar
Click the name to visit their Github Profile
For support, email - mdarshadkhan1998@gmail.com