Building Himalayausa.com clone

Hello readers, I am Krishna Kant, a full-stack web developer and here I am sharing my experience while cloning an ECommerce application Himalayausa.com.

Himalaya introduction-why and what

Himalaya is an Indian origin supplements store that provides herbal healthcare items. It is an indigenous E-Commerce store with a speciality in clinically tested healthcare-related products.

Cloning Himalayausa.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 got Himalayausa.com.

We, the budding-builders-

It took 4 days of effort from me(Krishna Kant) and Dheeraj Bisht to clone this features-rich functionality website.

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. 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,
• Option to search the product from our MongoDB atlas database 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,
• Doing payment and complete the transaction process

Quick snapshots to get a peep inside

Stack and resources used

We did the front-end by using the Javascript framework React.js. Used font-awesome UI library for the static icons. For the back-end, we used Node.js and MongoDB and Express.js. Connected our backend features using mongoose.

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?

• For smooth UI rendering, we used React hooks like useState, useEffect,
• For smooth navigation, we acquired router from react-router-dom and used links,
• Prioritising dynamic page transitions and merges, we utilised query params, react-router links,
• 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 Axios. For handling the asynchronous part, we did set timeout functions.
• To achieve the basic front-end parts, we did DOM manipulations and conditional renderings.
• 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 Dr. Strange who happens to be a user in our case.

Dr. Strange is in search of herbal medicines to increase his health stamina. As soon as he 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.

Our Doc. 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 Doc. 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 Doctor Strange types four or more 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.
Mr. Strange has options to enter two multiverses. First, one-to click on any of the suggestions shown and quickly navigate to the product he wishes to buy or second one-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: User 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: The user selects any of the products shown in the suggestion box and lands up on the page of the product of his choice.

Doctor Strange now can add the product to 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 Dr Strange 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 Himalayausa.com completes successfully.

Alright Pal, what is happening behind the curtain?

Behind the curtain? Definitely not magic but backend…

So, when Dr. Strange 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 cart, we have used fetch request to the user’s object in the backend. so as to provide the most delicate experience.

Once Dr. 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 Doctor Strange in his multiverse and let me tell you about the challenges which we faced.

Challenges faced, solutions and learnings

1. 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,
2. While maintaining the user’s active state and cart details on every pages, it was a tough task. So, we used context API provided by React and implemented it to render props and pages,
3. It was vague to implement all the features with minute details in small-time so we choose one-two cases 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…