Bobbi-Brown-Cosmetics

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #golang #android #machine-learning #deep-learning #docker #cli #kubernetes #vue #awesome-list #pytorch

Bobbi-Brown-Cosmetics

(★ 13)

Cloned bobbibrowncosmetics.com, an E-Commerce website for beauty Products which provides compelling features such as instant delivery.

Bobbi-Brown-Cosmetics 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Clone of bobbibrowncosmetics.com
![Gif](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/Gif.gif)
[Bobbi Brown Cosmetics](https://www.bobbibrowncosmetics.com/) 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](https://www.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](https://bobbi-brown-clone-arshad-abhinav-yogesh-shivanshu-rahul-nikesh.netlify.app/) to preview our project.
- [MD Arshad Khan](https://medium.com/@mdarshadkhan1998/clone-of-bobbibrowncosmetics-com-5e0baa7bd62b),[Shivanshu Chobey](https://medium.com/@shivanshuchobey5998/bobbibrown-com-website-clone-construct-week-unit-4-237dd9990d7c) Click here to view our Blog.
- [Click here](https://drive.google.com/file/d/1bGrJOXcpS2e1ZPlwFjyBPsqSXb_5iucg/view?usp=sharing) to watch a brief preview of our project in video format.
![Logo](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/logo.png)

[bobbibrowncosmetics.com](https://www.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](https://www.bobbibrowncosmetics.com/)
- Content : [bobbibrowncosmetics.com](https://www.bobbibrowncosmetics.com/)
- CSS Library: [Bootstrap](https://getbootstrap.com/) | [Tailwind CSS](https://tailwindcss.com/) | [Material-UI](https://v4.mui.com/)
- Icons : [Reacct-Font Awesome](https://fontawesome.com/)
- References : [MDN Docs](https://developer.mozilla.org/en-US/) | [W3School](https://www.w3schools.com/) | [React](https://reactjs.org/) | [React Redux](https://react-redux.js.org/)

## Tech Stack
- React
- Redux
- HTML 5
- CSS 3
- JavaScript
- CSS Library — Bootstrap, Tailwind CSS, Material-UI
- Github

**Client:** [bobbibrowncosmetics.com](https://www.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
- 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.

## Credits

- Images : [bobbibrowncosmetics.com](https://www.bobbibrowncosmetics.com/)
- Content : [bobbibrowncosmetics.com](https://www.bobbibrowncosmetics.com/)
- CSS Library: [Bootstrap](https://getbootstrap.com/) | [Tailwind CSS](https://tailwindcss.com/)
- Icons : [Reacct-Font Awesome](https://fontawesome.com/)
- References : [MDN Docs](https://developer.mozilla.org/en-US/) | [W3School](https://www.w3schools.com/) | [React](https://reactjs.org/) | [React Redux](https://react-redux.js.org/)

## 🛠 Tech Stack

- React
- Redux
- HTML
- CSS
- Javascript
- CSS Library — Bootstrap. …Tailwind CSS. …
- Github

## 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.

![Home page](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/1-HomePage.png)

### 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.

![Registration Page](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/4-Signup_Login.png)

### 3. Search Part

Here we can search for any specific item to look for its details and for adding it to the cart.

![Search Part](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/2-search.png)

### 4. 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.

![Search Page](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/3-PopupPart.png)

### 5. Map Functionality

Here in mapping part our location gets fetched automatically after allowing our geological location, or else we can also search for some custom location.

![Search Page](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/5-map.png)

### 6. 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.

![Search Page](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/6-ProductPage.png)

### 7. Single Product Detailed Page

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

![Search Page](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/7-SingleProductPage.png)

### 8. Cart page

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.

![Website Screenshot](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/8-Cart.png)

### 9. Offers page

Here we can utilize some facility of different offers.

![Website Screenshot](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/9-Offers%20_Part.png)
![Website Screenshot](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/11-Offers%20Part.png)

### 10. 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.

![Website Screenshot](https://raw.githubusercontent.com/mdarshadkhan1998/Bobbi-Brown-Cosmetics/main/bobbi-brown/src/Readme%20Images/10-Paument_Checkout.png)

## Challenges

1. 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.

2. 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.

3. 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.

4. 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.

5. We faced difficulties to manage the routes, page, dependencies to work at a time.

6. 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.
 
7. The main challenge of ours was to run the whole project without rerendering or reloading.

## Team
Click on name to visit Github Account
- [MD Arshad Khan](https://github.com/mdarshadkhan1998)
- [Abhinav Roy](https://github.com/abhinavroy121)
- [Shivanshu Chobey](https://github.com/Shivanshu5998s)
- [Yogesh Kumar](https://github.com/iYogeshkumar)
- [Nikesh Borkar](https://github.com/NikeshBorkar)
- [Rahul Kumar](https://github.com/krRahul10)

## 🔗 Linkedin

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/md-arshad-khan-350206154/)

[MD Arshad Khan](https://www.linkedin.com/in/md-arshad-khan-350206154/), 
[Abhinav Roy](https://www.linkedin.com/in/abhinav-roy-35154120a/), 
[Shivanshu Chobey](https://www.linkedin.com/in/shivanshu5998/), 
[Yogesh Kumar](https://www.linkedin.com/in/yogeshkumar21101995/), 
[Nikesh Borkar](https://www.linkedin.com/in/nikesh-borkar/),
[Rahul Kumar](https://www.linkedin.com/in/md-arshad-khan-350206154/)

## Authors
Click the name to visit their Github Profile
- [MD Arshad Khan](https://github.com/mdarshadkhan1998)

## Support

For support, email - [mdarshadkhan1998@gmail.com](mdarshadkhan1998@gmail.com)

Bobbi-Brown-Cosmetics

Bobbi-Brown-Cosmetics 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Bobbi-Brown-Cosmetics

Bobbi-Brown-Cosmetics 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README