Sugar Cosmetic Clone

Tech Stack Used

  1. HTML5
  2. CSS3
  3. JavaScript

Overall Structure and Functionality

Key Features

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

Landing Page

Login & Register

Product Pages

  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.


Team Members and Contributors

1. Akash Vaghela

2. Abhinav Raj

3. Lokesh Nimje

4. Vinesh Nair

At Masai | Titan Batch Student

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Three Deployment Patterns


Advantages and Disadvantages of FaaS

Launch a Website Without Writing a Single Line of Code

How I made this responsive web page and what I learned doing it

Environment variables in Python & Docker

Does a Data Team need a Product Manager?

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
Akash Vaghela

Akash Vaghela

At Masai | Titan Batch Student

More from Medium

What is MVC architecture?

Journey of DLithe Bootcamp .NET Full Stack Week 2(Jan31-Feb5)

Best Practices for Magento 2 Custom Theme Development

Handling responsive images in HTML

Right: mockup of 3 designs for mobile, tablet, desktop with a photo of a house by the sea in each design, with a different size. Left: Handling responsive images in HTML with srcset and <picture>.