Collaborative Project At Masai School “Beauty Bebo Clone”.
Getting Started…
It was a challenging journey for me and all my team members as we have to complete it within the time of construct week, so we faced different challenges like it was our first project and we did not have any experience working in a team also we did not know how to manage everything within the period. So we started with planning and studying the website, then we distributed the workflow, the roles, and responsibilities and with great collaboration, we managed the work.
Project Details -
We had to make a replica of the Beauty Bebo website.
Beauty Bebo is India’s fastest growing online retail store for the day-to-day and special occasion needs of Makeup, Skincare, Haircare, Personal care, Mom and Baby care, Fragrance, and Ayurveda products.
We have tried our best to clone the replica of the website.
Tech Stacks used -
HTML : 42.70%
CSS : 12.60%
JavaScript : 44.70%
Some Glimpse and Screenshots of our website:-
Home Page -
- This is the main landing page of our website. Here clicking on any option on the Navbar will redirect the user to the respective Product Page.
- It is fully functional.
Sign In From -
- Here we have a sign-in Icon in the top right corner when the user clicks on the sign-in button near the Heart button.
- Here we integrate User authentication to check whether the user email and password match with details existing in the database.
Sign-Up Form-
- Here we have a sign-up page if a user is new so he needs to create an account that’s why we have given a button to click to go through the signup option when the user clicks on the create an account button.
- After filling in the information and summiting the form his/her account is automatically created and he/she will be redirected to the login page.
All Products page -
When you hover on our navbar all the product+category pages will appear In.
Also, the user can filter the products according to name, category, and price.
Clicking on the Add To Bag Button will add products to the Bag.
ADD TO CART PAGE-
when you click on any of the product add to cart button just simply send this product to add to the cart page when all the information with the total price is also given on the right side box.
- Coupon-Code- If you use our coupon code INDIAN it will give you your total 30% discount.
Check-Out Page-
here user needs to fill in all the correct information for shipping and also for the billing.
Order confirmed Page -
Our Team Members:-
- Harshit Tripathi
- Rupesh Thakur
- Manoj Kumar
- Ashish Patyal
Team Contributions:-
Harshit Tripathi-
My LinkedIn profile: https://www.linkedin.com/in/harshit-tripathi-ab9191216
1. I worked on the home page and tried to clone it exactly like the original website’s page specifically when it comes to the Navigation bar, footer, and banners.
2. Worked on almost every page of the website in terms of syncing all the pages together and fixing the Navigation bar, footer sitemap, and as well as on functionality of the website.
3. Built product search filtering Created a local database for the search bar functionality
4. Also worked on add to cart button and remove button and give the functionality of discount ono total if the user used our coupon code
And much other syncing functionality in this project was part of my job.
Rupesh Thakur-
My LinkedIn profile: https://www.linkedin.com/in/rupeshthakur8844/
I used many properties and learned a lot of things from this project:-
1. I used HTML, CSS, JS, and Local-Storage ( to store and get data) and creative tags in JavaScript.
2. I used a lot of CSS properties to improve the user interface of the website.
3. I worked on the Sign-in, Sign-up, and add-to-cart page and Payment page.
Manoj Kumar-
My LinkedIn profile: https://www.linkedin.com/in/manoj-kumer-b8b399157/
1. I worked on the product page and lab-test page. I face some problems in the JavaScript part but it gets resolved by discussing them with my friends.
2. I learn a lot of things in JavaScript, learn more about local storage, how to append, add the product to the cart, make sliding and drop-down pages, and also improved my HTML & CSS, I like working as a team, interact with each other professionally.
3. I gave my best and did a lot of things but still, there are a few functionally things that are left behind and remain static. In my point of view, we can make our website more efficient by using JavaScript from the initial days so that we can save time unlike making pages again and again by using CSS and HTML so that we could have been worked more on the remaining things.
Ashish Patyal-
My LinkedIn profile: https://www.linkedin.com/in/ashish-patyal-92460a236
Hello, I worked on my first project. This is my first project. We are all team of four members.
1. I have used HTML, and CSS to create an attractive webpage and with JS for all functionality.
2. My contribution to this project is about making some product pages.
3. By using CSS flex I have made content in alignment.
4. I have used dom functionality which I have learned from this project with help of my teammates.
Hope you all like our Cloned website.
Thank you.
