Sugar Cosmetic Clone

Have you ever played Clash of Clan or any clan strategy game? if yes then you know the joy of building something.

It doesn't matter if you build a Paper plane or Tesla, the feeling is the same. in my case, I build and clone web sites as I’m learning Web development at Masai School.

So last week I got a Team Project to build a clone of Sugar Cosmetics website along with my teammates Abhinav Raj, Vinesh Nair, and Lokesh Nimje. surprisingly we managed to do it in the given time period (4 Days).

However, we not only just completed our project but also got 3rd Place in our batch and 4th place across all cohorts.

Tech Stack Used

We created a whole clone with bare minimum things and didn't use any fancy Framework or UI. The list of stack used while the building is mentioned below.

  1. HTML5
  2. CSS3
  3. JavaScript

Overall Structure and Functionality

We have tried to replicate the original functionality of the website so the following features and pages are made.

Key Features

  • New User Registration
  • Live Search for Products
  • Database with json-server
  • ChatBot

Landing Page

On the landing page, users can see a list of Different Products, Ads, and banners of Sugar Cosmetics which are getting fetched from our database. we have also implemented some cool effects such as Pagination and Carousel.

Users can also use the search bar to search for anything, it has Live Search enable. on typing, it will display products without pressing the enter key.

We have also made a ChatBot if you look at the right bottom corner. surprisingly it’s working, it will reply to you with some welcome messages and then wait for you to ask something. if your query is relevant then the bot will reply back according to your query, and if not then it will suggest you something to ask.

Login & Register

To purchase something User must have to create an account. there are two different ways to Login and Register.

1. Through Landing page sidebar

2. Through Dedicated Login page

After registration data will be stored in the database so a user can log in again later. and after login user will be redirected to the My Account page where he can verify his details.

Product Pages

There are three product pages listed on the clone website as mentioned earlier. they all have few common features as,

  1. Items can be filtered according to Price
  2. The view can be changed to Grid or List
  3. Add Item to Wishlist or Cart
  4. Update or Delete Item

After finalizing items users can go to checkout and choose any payment method, on placing an order confirmation popup will appear.

Roles and Responsibilities

  • We divided our work into 4 parts and stick to it, such as
    - Lokesh was creating and maintaining the database.
    - Vinesh was making the basic UI of the landing page.
    - Abhinav dedicated to Product pages.
    - while I got the responsibility to create chatbot and maintain responsiveness of the overall UI for different screen sizes.
  • Instead of only focusing on the individual task we also help each other, take responsibility to complete the project, we shared our approaches and methods to solve the different problems.

Challenges faced

  • Merge conflicts were the major issue we faced throughout that four days.
  • Performing CRUD operations on the database was also one of the difficult tasks, but we managed to do that.

Conclusion

it doesn't matter how much capable you are in terms of knowledge, if you don't apply it or help someone it’s useless. We took this project as collective responsibility which made the final output possible in the given time period. yes, it takes late nights and some constant brainstorming but in the end it worth it, and we also enjoyed this journey.

if you are still reading then you are awesome, Thank you for reading my blog.

Team Members and Contributors

1. Akash Vaghela

2. Abhinav Raj

3. Lokesh Nimje

4. Vinesh Nair

At Masai | Titan Batch Student