Clone of Bluemercury.com

Hello readers, I am Krishna Kant, a full-stack web developer and here I am sharing my experience while cloning an ECommerce application Bluemercury.com.
Bluemercury introduction-why and what
Many times we wish to land upon the customised genre of products that we ish to buy rather than landing on giant ECommerce platforms where we have to choose that one product from the clumsy noise of unwanted sponsors, ads, recommendations. Bluemercury serves this purpose by providing a platform where users can find their choice among cosmetics, skincare, wellness and spa products.
Cloning Bluemercury.com
As a part of learning full-stack web development, projects and construct chunks play a vital role in aggressive development learning. For the same, at Masai school, after learning the backend part in the MERN stack, it was our valour to build something awesome. And at the top of it, the curriculum team had shortlisted the websites for it and our team of three got Bluemercury.com.
We, the budding-builders-
A team of three includes me (Krishna Kant), Sunny Dhanwani and Nitesh Goswami
Into the cloning-
First thing first
At first, we decided the priorities to have and assigned responsibilities. In the short time span, we focused on implementing more functionalities and eye-catching user-Interface design. We did not bother about pixel-perfect replicas but cared more to add as many features as possible.
So, what we did?
We implemented the following features and functionalities on our product-
User sign-up and login authentication from remote server MongoDB database,
Search product option with debouncing and throttling along with the customised suggestion and dynamic category list,
Option to get a gist of detailed products based on user’s search as well as reach on the single product page from a quick suggestion box,
Sorting the list of products as per price, recommendation and multiple filters on category, brand, type of products and price range,
Add to cart, wishlist
Doing payment and complete the transaction process

Stack and resources used
We did front-end in Javascript, HTML and CSS. Used font-awesome UI library for the static icons. For the back-end, we used Node.js and MongoDB and Express.js.
After making the database, we used Postman to do post, get and patch requests of product data and users data.
Also, we used MDN, We3School, for adapting with theoretical implementations. For debugging purposes, Stack Overflow was used a couple of times.
How we did it?
In HTML, we used input forms for interaction with users,
For smooth navigation, we acquired “href” properties in the list child divs
Prioritising dynamic page transitions and merges, we utilised window.location.href on div and button clicks,
Regarding CSS, we considered flex and grid for layout designs,
For hovering, zooming and pop-up purpose, we implemented z-index and position property in CSS.
In the javascript part, for API fetch requests(get, put, patch, delete, post) we used async, await. For handling the asynchronous part, we did set timeout functions.
To achieve the basic front-end parts, we did DOM manipulations.
We used MongoDB atlas as our remote database for our project data request handlings,
We kept pushing all our updates to Github in separate branches of all developers and at last, we merged to complete the project.
User-journey
A website in action acts as the platform to serve multiple customers with their variants of demands. Here we have targeted one of the user journeys where a user lands on the home page to buy any product. Let me reveal the mystery of how the user journey unfolds…
Let me introduce you to Peter Parker who happens to be a user in our case.
As soon as Peter lands on the homepage, he is subjected to the eye-catching corrosives, main contents and detailed description of the website. A navigation bar is all that he needs. A dropdown quick-navigation is confiscated in the ‘Shop’ icon.
Peter likes to explore and hence clicks on the ‘search icon in the right of the navigation. A wide input box opens and welcomes him there. Now, we understand and respect the variations in typing traits of humans. If Peter by mistake enters extra spaces, it will be automatically trimmed off to provide the best possible customised search experience. Typing speed can vary in several scenarios and hence we have implemented debouncing and throttling as well.
As soon as Peter types two or more two letters in the search box, on the basis of the values entered by him, he will be shown items, categories, quick search options in the suggestion box which are being fetched dynamically from the database created by us.
Peter has two options-to clicks on any of the suggestions shown and quickly navigate to the product he wishes to buy or press the enter key to get a gist of all possible products as per the details entered in the input criteria. Let us see both of the user cases-
case-1: Peter clicks ‘enter’ and he is directed to the customised-products-search page where there are all products appearing as per the values in the input box he had entered, from here he can click on any product and go to the page of product of his choice.
case-2: Peter selects any of the products shown in the suggestion box and lands up on the page of the product of his choice.
Peter now can add the product to the wishlist and/or in the cart.
Now, he enters the cart page by clicking on the bag icon in the top-right corner.
And guess what happens now? Let me reveal the mystery. Well…we respect and take care of privacy. Everyone is equal at least in this virtual world let it be a common man or vigilante and hence even Peter Parker has to come out of the hood and register himself as a person, create an account and then log in to continue. Once these formalities will be done, he will be directed to the payment page and adding the address details.
And hence the process of buying an item from Bluemercury.com completes successfully.
Alright Pal, what is happening behind the curtain?
Behind the curtain? Definitely not magic but backend…
So, when Peter types in the search bar, input keys are taken into action to trim extra spaces, fetch a get request from the database to see if any object in the backend includes the name as entered by him. Ultimately an array of matched objects is fetched and the typically customised itineraries are shown in the suggestion box. Now depending on the user cases, the data is fetched in session local storage to show on the next page.
At the time of adding to the wishlist and cart, we have used both local storage and fetch request to the user’s object in the backend. so as to provide the most delicate experience.
Once Peter tries to sign up or log in, the user's data is fetched from the database and compares the values to create an account and while doing login as well.
So, this is how we tried to implement the end result. Let us leave Peter Parker in his fantasy world and let me tell you about challenges which we faced.
Challenges faced, solutions and learnings
In implementing backend features we had to add a server and many a time server crashed or had to be run manually. So, for this, we added Nodemon to solve this complexity,
While using local storage, it is necessary to set local storage and get items. We set local storage in promise functions which are asynchronous in operation and hence window location changed to a different page before storing anything in local storage. For this, we used block scope in a Javascript function and solved the problem,
It was vague to implement all the features with minute details in small-time so we choose one-two case of each functionality to be covered.
Beyond this project-
Like every developer, we perceived this project as the product and product life-cycle never ends in practical aspects. So, we will keep implementing, adding and enhancing this very much product which we have built. We will share all the details here and would love to get your reaction.
At last but not least, in this never-ending, evolving and blissful journey of project completion, you my dear friends play a most vital role as someone who is having the endless capability to suggest and improvise in order to bring the best out of something. Please do check out our git-repository, videos, snapshots to suggest the out of ordinary…
Thanks a lot for showing your love here…