A New Experience with Cloning of Mamaearth website
Introduction
Hello everyone, This is Rohit Kumar Gupta along with Shubham Paswan, Sai Kiran Arishanapalli, Bharanishwaran, Aun Mohammad, and Sachin Ingale. As our Third construct week project at Masai School, We have cloned Asia’s first MadeSafe certified brand Mamaearth.
Our main objective was to complete all main functionality of the website, such as Signing Up for the buying of a product. We have completed this project in 5 days.
Mamaearth:
Mamaearth is an Indian company of Health, Wellness & Fitness. It is Asia’s first MadeSafe certified brand. The brand’s proposition and the dire need for toxin-free organic products. The company headquarters is in Gurgaon, Haryana. It is one of the leading companies or a brand which intends to make the lives of mums & expectant mums better and more beautiful. A brand that welcomes all babies to a healthy and safe world.
Click here to visit Mamaearth's official website
Click here to visit cloned Mamaearth
🛠 Skills
- HTML 5
- CSS 3
- JavaScript
- React Library
- Github
Features
- Home page with a quick glimpse of the whole website, products of all categories, and comparison with other’s product
- Authentication page — Login / Sign Up / Profile and their Pop-Ups.
- Product slider for different categories.
- Product page for different categories with sorting functionality.
- Detailed product preview page.
- Add to cart option for buying products.
- Payment Page.
My Contribution
- In this project, my part was on the Authentication page.
- If the user has a prior account in Mamaearth then he/she needs to log in with OTP verification
- otherwise signup with OTP verification
Screenshots
- Home Page
Our landing consists of some of the main functionalities such as Navigation of all type product, search product part, login, Sign-Up, 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.
And on clicking on any product user get a completely descriptive page about product. where user can get FAQs of product and user gets a Navigation bar of
Key Ingredients | How to use | Who can use | Why Mamaearth
- Authentication page
Here in Authentication page, User needs to fill mobile number If user has no prior account he/She needs to click on signup button other wise Login button.
If the user clicks on the Signup button he/she is redirected Signup page. Now user needs to fill out all credentials and click on the signup button and he/she will be redirected to the OTP page.
If the user clicks on the login button he/she will be directly redirected to the OTP page.
If the user fills the incorrect OTP he/she gets a popup Of Incorrect OTP otherwise he/she gets a popup Login successful and he/she will be redirected to the Home page.
- Product category section
This is the detailed list of Product items where we can add items to the cart directly. Or can search for any specific item for adding it to the cart.
here user gets functionality as a Filter of products according to his/her need and a sorting option.
As the user clicks on add to cart button of any product, the cart gets updated.
- Cart Section
Here, user can view all items added to cart. If he wants to increase/decrease quantity of any product just clicking on button of +/- . And finally if he/she wants to purchase just require a click on the Continue button. And user will be redirected to payment page, if user is logged in other wise he/she needs to first login.
- Payment Section
Here, user needs to fill complete address and contact detail for delivery purpose. After this user can select any of the suggested payment method to proceed with the payment and fill details and click on the place order button.
- The popUp message of successful payment
After succesful payment user gets a popup message of successful purchasing and after 5 sec user gets redirected to Home page.
Challenges
- This time our team was working with the React library and no one was confident in this. I was totally unable to work with the library of React. Then we decided That I (Rohit Kumar Gupta) will work using HTML CSS and JavaScript. And they will convert it into React and finally, we will merge. I cloned the pages like the Authentication page(login, Signup, and otp page), Profile page, MamaCash page, Manage address page, and contacts page with 100% functionality and responsive for mobile view and desktop view. But at the time of conversion, we were unable to convert it and at last, our team decided to create an authentication page separately using React and merge to complete the project.
- We faced challenges with CSS As popup message alignment.
- And at last, we faced the problem to make it responsive to mobile view and finally we have submitted a desktop view clone.
Github Link → Project
Github Link → Authentication and other pages cloned using HTML CSS and javaScript(Which have not been used in Project due to merging problem)
🔗 You can connect with me on
Author
“Rohit Kumar Gupta”
email- rg15697@gmail.com