Sugar Cosmetic Clone

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.

Login & Register

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

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

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.

Team Members and Contributors

1. Akash Vaghela

2. Abhinav Raj

3. Lokesh Nimje

4. Vinesh Nair

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store