TATA 1mg — Clone
This cloned website is designed with the technologies HTML, CSS and JAVASCRIPT. All the pages of this cloned website are dynamic in nature right from starting, homepage to the end, checkout page.
Homepage
Homepage is the first page to which the most of the user visits. This page consist of different section:
Navbar
It consists of details of almost every pages link like signup, login, cart, product category and so on. You can also search any product from the search box.
Body
It consist of the details of the items based on the brand, categories, diseases, sale, trending, different tests, checkups, specific body parts, nutrition, popular combo deals, new arrivals, ayurveda, homeopathy, deals of the day, breakfasts cereals and so on.
Footer
It describe about the company, like their aim, feathers in their cap, services they offer.
At the bottom of the footer we can find different links like about us, privacy policy, contact us careers and many more.We can also see google and apple app store icon to download and install their apps.
Signup and Login Page
We can enter our mobile number and click to continue you will be redirected to the one time password page and on clicking to done button you will be redirected to the login page. To enter the details.
Product Page
On the product page you can see the list of all the products of that particular category. On the left side of the product page there are filter based on the product brand and if you want to search for a particular type you can search in the search box.
After you check mark any of the checkbox product associated to that brand only be filtered and will be shown.
On the right side at the just top of the product card their is filter based on the relevances like to sort from high to low or low to high or even based on the rating and discount.
From this page we can add items to the card by simply clicking on the ADD button and you can see number of items changed at the top on the cart icon.
Product description page
On the description page we can find the details of a particular product like product highlights, rating, care plan, effect of the medicine company name, usage, and some other suggestions.
From the product description page also we can add that item to the cart after having adequate idea about the product or prescribed by the doctor.
Billing and Payment
After clicking to cart icon or the the quick order or from the product description page we will be redirected to this address form page. We can fill the address details to which you want to get the product delivered. After that click to submit button.
Now you are the payment page there are many methods to pay for the items like 1mg wallets, upi, cards, net banking, pay on delivery or even pay later. Fill you respective details and then click to PLACE ORDER. Now your order is placed.
Some challenges
- To make the completely functional caroule using javascript, css and html.
- To make the website responsive so that it would look pleasant and properly functional for the users
- To arrange the data in array of object format so that it can be store it to the local storage and can be accessed when required.
- To merge different pages of the website and find the bugs that was creating conflicts for other segment of the code.
Conclusion
When we started building the project every concept of github and javascript implementation on a functional website was new to us and we were thinking we would not be able to create it as effectively as others but we did.
Now we believe that in order to master any technology we should implement the concepts that we have learned by creating some project as we did for the HTML, CSS and Javascript.
Team Members
- Sonu kumar Yadav
- Prince Mittal
- Akhil Kumar
- Anshu Raj
- Rajat